Add delete user button

client/src/components/CustomPopup.js

@@ -0,0 +1,8 @@
+import React from 'react'
+import { Popup } from "semantic-ui-react";
+
+export default function CustomPopup({ content, children }) {
+    return (
+        <Popup inverted content={content} trigger={children} />
+    )
+}

client/src/components/DeleteButton.js

@@ -0,0 +1,52 @@
+import React, { useState } from 'react'
+import { Button, Confirm } from 'semantic-ui-react'
+import { gql, useMutation } from '@apollo/client';
+
+import { FETCH_USERS_QUERY } from '../util/GraphQL';
+import CustomPopup from './CustomPopup'
+
+const DELETE_USER_MUTATION = gql`
+  mutation deleteUser($userID: ID!) {
+    deleteUser(userID: $userID)
+  }
+`
+
+export default function DeleteButton({ userID, callback }) {
+    const [confirmOpen, setConfirmOpen] = useState(false);
+
+    const mutation = DELETE_USER_MUTATION;
+
+    const [deleteUser] = useMutation(mutation, {
+        update(proxy) {
+            setConfirmOpen(false);
+            const data = proxy.readQuery({
+                query: FETCH_USERS_QUERY
+            });
+            proxy.writeQuery({
+                query: FETCH_USERS_QUERY,
+                data: {
+                    getUsers: data.getUsers.filter((a) => a.id !== userID)
+                },
+            });
+            if (callback) callback();
+        },
+        variables: {
+            userID
+        }
+    });
+
+    return (
+        <>
+            <CustomPopup content={'Delete User'}>
+                <Button circular icon="close" color="red" floated="right" onClick={() => setConfirmOpen(true)}>
+                </Button>
+            </CustomPopup>
+            <Confirm
+                open={confirmOpen}
+                onCancel={() => setConfirmOpen(false)}
+                onConfirm={deleteUser}
+            />
+        </>
+    );
+}
+

client/src/components/UserTable.js

@@ -3,6 +3,8 @@ import { Table } from 'semantic-ui-react'
 import moment from "moment";
 import trLocale from "moment/locale/tr";
 
+import DeleteButton from '../components/DeleteButton';
+
 export default function UserTable({ user: { id, name, email, role, createdAt } }) {
     moment.locale('tr', [trLocale])
 
@@ -14,6 +16,9 @@ export default function UserTable({ user: { id, name, email, role, createdAt } }
                 <Table.Cell>{email}</Table.Cell>
                 <Table.Cell>{role}</Table.Cell>
                 <Table.Cell>{moment(createdAt).fromNow()}</Table.Cell>
+                <Table.Cell>
+                    <DeleteButton userID={id} />
+                </Table.Cell>
             </Table.Row>
         </Table.Body>
     )

client/src/pages/Home.js

@@ -10,7 +10,7 @@ export default function Home() {
     const { loading, data: { getUsers: users } = {} } = useQuery(FETCH_USERS_QUERY);
 
     return (
-        <Grid columns={4} >
+        <Grid columns={6} >
             <Grid.Column>
                 <UserForm></UserForm>
             </Grid.Column>
@@ -26,6 +26,7 @@ export default function Home() {
                                 <Table.HeaderCell>E-mail</Table.HeaderCell>
                                 <Table.HeaderCell>Kayıt Tipi</Table.HeaderCell>
                                 <Table.HeaderCell>Kayıt Tarihi</Table.HeaderCell>
+                                <Table.HeaderCell>İşlemler</Table.HeaderCell>
                             </Table.Row>
                         </Table.Header>
                         {