Merge pull request #287 from codeforpdx/issue-223/delete-client-modal…

…-scott

Issue 223/delete client modal scott

src/components/Clients/AddClientModal.jsx

@@ -33,7 +33,7 @@ const renderWebId = (username) => {
   return `${template[0]}${username}${template[1]}`;
 };
 
-const AddClientModal = ({ showModal, setShowModal }) => {
+const AddClientModal = ({ showAddClientModal, setShowAddClientModal }) => {
   const { state, dispatch } = useStatusNotification();
   const [userGivenName, setUserGivenName] = useState('');
   const [userFamilyName, setUserFamilyName] = useState('');
@@ -68,7 +68,7 @@ const AddClientModal = ({ showModal, setShowModal }) => {
       );
       setTimeout(() => {
         dispatch({ type: 'CLEAR_PROCESSING' });
-      }, 3000);
+      }, 2000);
       return;
     }
 
@@ -81,7 +81,7 @@ const AddClientModal = ({ showModal, setShowModal }) => {
       );
       setTimeout(() => {
         dispatch({ type: 'CLEAR_PROCESSING' });
-      }, 3000);
+      }, 2000);
       return;
     }
     // ===== END OF ERROR DISPLAY OPTIONS =====
@@ -122,12 +122,17 @@ const AddClientModal = ({ showModal, setShowModal }) => {
         setUsername('');
         setWebId('');
         dispatch({ type: 'CLEAR_PROCESSING' });
-      }, 3000);
+        setShowAddClientModal(false);
+      }, 2000);
     }
   };
 
   return (
-    <Dialog open={showModal} aria-labelledby="dialog-title" onClose={() => setShowModal(false)}>
+    <Dialog
+      open={showAddClientModal}
+      aria-labelledby="dialog-title"
+      onClose={() => setShowAddClientModal(false)}
+    >
       <FormSection
         title="Add Client"
         state={state}
@@ -193,7 +198,7 @@ const AddClientModal = ({ showModal, setShowModal }) => {
               variant="outlined"
               color="error"
               endIcon={<ClearIcon />}
-              onClick={() => setShowModal(false)}
+              onClick={() => setShowAddClientModal(false)}
               fullWidth
             >
               CANCEL

src/components/Clients/ClientList.jsx

@@ -1,9 +1,10 @@
 // React Imports
-import React, { useContext } from 'react';
+import React, { useContext, useState } from 'react';
 // Context Imports
 import { UserListContext } from '../../contexts';
 // Component Imports
 import ClientListTable from './ClientListTable';
+import DeleteClientModal from './DeleteClientModal';
 import { EmptyListNotification, LoadingAnimation } from '../Notification';
 
 /**
@@ -18,16 +19,37 @@ const ClientList = () => {
   const { userListObject } = useContext(UserListContext);
   const { loadingUsers } = useContext(UserListContext);
 
+  // state for DeleteClientModal component
+  const [showDeleteClientModal, setShowDeleteClientModal] = useState(false);
+
+  // state for selected client to delete
+  const [selectedClientToDelete, setSelectedClientToDelete] = useState(null);
+
   const determineClientListTable = userListObject.userList?.length ? (
     // render if clients
-    <ClientListTable statusType="Status" defaultMessage="No actions performed" />
+    <ClientListTable
+      setSelectedClientToDelete={setSelectedClientToDelete}
+      setShowDeleteClientModal={setShowDeleteClientModal}
+    />
   ) : (
     // render if no clients
     <EmptyListNotification type="clients" />
   );
 
   // MAIN RETURN OF COMPONENT
-  return loadingUsers ? <LoadingAnimation loadingItem="clients" /> : determineClientListTable;
+  return loadingUsers ? (
+    <LoadingAnimation loadingItem="clients" />
+  ) : (
+    <>
+      {determineClientListTable}
+      {/* modal/popup renders when showDeleteClientModal state is true */}
+      <DeleteClientModal
+        showDeleteClientModal={showDeleteClientModal}
+        setShowDeleteClientModal={setShowDeleteClientModal}
+        selectedClientToDelete={selectedClientToDelete}
+      />
+    </>
+  );
 };
 
 export default ClientList;

src/components/Clients/ClientListTable.jsx

@@ -12,7 +12,6 @@ import { useStatusNotification } from '../../hooks';
 // Context Imports
 import { UserListContext } from '../../contexts';
 // Component Imports
-import { StatusNotification } from '../Notification';
 import ClientListTableRow from './ClientListTableRow';
 import { StyledTableCell } from '../Table/TableStyles';
 
@@ -26,7 +25,7 @@ const columnTitlesArray = ['Select', 'Client', 'WebID', 'Pin', 'Delete'];
  * @name ClientListTable
  */
 
-const ClientListTable = ({ statusType, defaultMessage }) => {
+const ClientListTable = ({ setSelectedClientToDelete, setShowDeleteClientModal }) => {
   const { state, dispatch } = useStatusNotification();
   const { userListObject } = useContext(UserListContext);
 
@@ -52,12 +51,13 @@ const ClientListTable = ({ statusType, defaultMessage }) => {
                 client={client}
                 state={state}
                 dispatch={dispatch}
+                setShowDeleteClientModal={setShowDeleteClientModal}
+                setSelectedClientToDelete={setSelectedClientToDelete}
               />
             );
           })}
         </TableBody>
       </Table>
-      <StatusNotification state={state} statusType={statusType} defaultMessage={defaultMessage} />
     </TableContainer>
   );
 };

src/components/Clients/ClientListTableRow.jsx

@@ -11,7 +11,7 @@ import PushPinOutlinedIcon from '@mui/icons-material/PushPinOutlined';
 // Utility Imports
 import { runNotification } from '../../utils';
 // Context Imports
-import { SelectedUserContext, UserListContext } from '../../contexts';
+import { SelectedUserContext } from '../../contexts';
 import { StyledTableCell, StyledTableRow } from '../Table/TableStyles';
 
 /**
@@ -23,10 +23,16 @@ import { StyledTableCell, StyledTableRow } from '../Table/TableStyles';
  */
 
 // determine what gets rendered in the table body
-const ClientListTableRow = ({ labelId, client, state, dispatch }) => {
+const ClientListTableRow = ({
+  labelId,
+  client,
+  state,
+  dispatch,
+  setShowDeleteClientModal,
+  setSelectedClientToDelete
+}) => {
   const theme = useTheme();
   const { selectedUser, setSelectedUser } = useContext(SelectedUserContext);
-  const { removeUser } = useContext(UserListContext);
   const [pinned, setPinned] = useState(false);
 
   // determine what icon gets rendered in the pinned column
@@ -44,26 +50,18 @@ const ClientListTableRow = ({ labelId, client, state, dispatch }) => {
     setSelectedUser(clientToSelect);
   };
 
-  // Event handler for deleting client from client list
-  const handleDeleteClient = async () => {
-    if (
-      !window.confirm(
-        `You're about to delete ${client.person} from your client list, do you wish to continue?`
-      )
-    ) {
-      return;
-    }
-    runNotification(`Deleting "${client.person}" from client list...`, 3, state, dispatch);
-    await removeUser(client);
-    runNotification(`"${client.person}" deleted from client list...`, 3, state, dispatch);
-  };
-
   // Event handler for pinning client to top of table
   // ***** TODO: Add in moving pinned row to top of table
   const handlePinClick = () => {
     setPinned(!pinned);
   };
 
+  // Event handler for deleting a client from client list
+  const handleSelectClientToDelete = () => {
+    setSelectedClientToDelete(client);
+    setShowDeleteClientModal(true);
+  };
+
   return (
     <StyledTableRow>
       <StyledTableCell align="center">
@@ -99,7 +97,7 @@ const ClientListTableRow = ({ labelId, client, state, dispatch }) => {
         </IconButton>
       </StyledTableCell>
       <StyledTableCell align="center">
-        <IconButton size="large" edge="end" onClick={() => handleDeleteClient()}>
+        <IconButton size="large" edge="end" onClick={handleSelectClientToDelete}>
           <DeleteOutlineOutlinedIcon />
         </IconButton>
       </StyledTableCell>

src/components/Clients/DeleteClientModal.jsx

@@ -0,0 +1,111 @@
+// React Imports
+import React, { useContext } from 'react';
+// Material UI Imports
+import Button from '@mui/material/Button';
+import ClearIcon from '@mui/icons-material/Clear';
+import CheckIcon from '@mui/icons-material/Check';
+import Dialog from '@mui/material/Dialog';
+import DialogActions from '@mui/material/DialogActions';
+import DialogContent from '@mui/material/DialogContent';
+import DialogContentText from '@mui/material/DialogContentText';
+// Utility Imports
+import { runNotification } from '../../utils';
+// Custom Hook Imports
+import { useStatusNotification } from '../../hooks';
+// Context Imports
+import { UserListContext } from '../../contexts';
+// Component Imports
+import FormSection from '../Form/FormSection';
+
+/**
+ * DeleteClientModal Component - Component that allows users to delete other user's
+ * Pod URLs from a user's list stored on their own Pod
+ *
+ * @memberof Clients
+ * @name DeleteClientModal
+ */
+
+const DeleteClientModal = ({
+  showDeleteClientModal,
+  setShowDeleteClientModal,
+  selectedClientToDelete
+}) => {
+  const { state, dispatch } = useStatusNotification();
+  const { removeUser } = useContext(UserListContext);
+
+  // Event handler for deleting client from client list
+  const handleDeleteClient = async (event) => {
+    event.preventDefault();
+    runNotification(
+      `Deleting "${selectedClientToDelete?.person}" from client list...`,
+      5,
+      state,
+      dispatch
+    );
+    try {
+      await removeUser(selectedClientToDelete);
+    } catch (e) {
+      runNotification(`Client deletion failed. Reason: ${e.message}`);
+    } finally {
+      runNotification(
+        `"${selectedClientToDelete?.person}" deleted from client list...`,
+        5,
+        state,
+        dispatch
+      );
+      setTimeout(() => {
+        setShowDeleteClientModal(false);
+      }, 2000);
+    }
+  };
+
+  return (
+    <Dialog
+      open={showDeleteClientModal}
+      aria-labelledby="dialog-title"
+      aria-describedby="dialog-description"
+      onClose={() => setShowDeleteClientModal(false)}
+    >
+      <FormSection
+        title="Delete Client"
+        state={state}
+        statusType="Status"
+        defaultMessage="To be deleted..."
+      >
+        <form onSubmit={handleDeleteClient} autoComplete="off">
+          <DialogContent>
+            <DialogContentText id="dialog-description">
+              {`Are you sure you want to delete "${selectedClientToDelete?.person}" from your client list?`}
+            </DialogContentText>
+          </DialogContent>
+
+          <DialogActions>
+            <Button
+              variant="outlined"
+              color="error"
+              aria-label="Cancel Button"
+              endIcon={<ClearIcon />}
+              onClick={() => setShowDeleteClientModal(false)}
+            >
+              CANCEL
+            </Button>
+
+            <Button
+              type="submit"
+              variant="contained"
+              color="primary"
+              aria-label="Delete Client Button"
+              endIcon={<CheckIcon />}
+              disabled={state.processing}
+              sx={{ marginLeft: '1rem' }}
+            >
+              DELETE CLIENT
+            </Button>
+          </DialogActions>
+        </form>
+      </FormSection>
+    </Dialog>
+  );
+};
+
+export default DeleteClientModal;

src/components/Clients/index.js

@@ -1,11 +1,13 @@
 import AddClientModal from './AddClientModal';
 import ClientList from './ClientList';
 import ClientListTable from './ClientListTable';
+import ClientListTableRow from './ClientListTableRow';
+import DeleteClientModal from './DeleteClientModal';
 
 /**
  * Components and functions related to Clients functionality within project PASS
  *
  * @namespace Clients
  */
 
-export { AddClientModal, ClientList, ClientListTable };
+export { AddClientModal, ClientList, ClientListTable, ClientListTableRow, DeleteClientModal };

src/routes/Clients.jsx

@@ -7,8 +7,7 @@ import AddIcon from '@mui/icons-material/Add';
 import Button from '@mui/material/Button';
 import Container from '@mui/material/Container';
 // Component Imports
-import AddClientModal from '../components/Clients/AddClientModal';
-import ClientList from '../components/Clients/ClientList';
+import { AddClientModal, ClientList } from '../components/Clients';
 
 /**
  * Clients Component - Component that generates Clients Page for PASS
@@ -19,7 +18,7 @@ import ClientList from '../components/Clients/ClientList';
 
 const Clients = () => {
   // state for AddClientModal component
-  const [showModal, setShowModal] = useState(false);
+  const [showAddClientModal, setShowAddClientModal] = useState(false);
 
   const location = useLocation();
   localStorage.setItem('restorePath', location.pathname);
@@ -32,14 +31,18 @@ const Clients = () => {
         size="small"
         aria-label="Add Client Button"
         startIcon={<AddIcon />}
-        onClick={() => setShowModal(true)}
+        onClick={() => setShowAddClientModal(true)}
         sx={{ marginTop: '3rem' }}
       >
         Add Client
       </Button>
       <ClientList />
-      {/* modal/popup renders when showConfirmationModal state is true */}
-      <AddClientModal showModal={showModal} setShowModal={setShowModal} />
+
+      {/* modal/popup renders when showAddClientModal state is true */}
+      <AddClientModal
+        showAddClientModal={showAddClientModal}
+        setShowAddClientModal={setShowAddClientModal}
+      />
     </Container>
   );
 };