Skip to content

Commit ef7a24e

Browse files
xscottxbrownxxscottxbrownx
authored
Merge pull request #428 from codeforpdx/issue-316/confirmation-modal
Create confirmation modal
2 parents 86591c3 + a47b020 commit ef7a24e

13 files changed

+243
-322
lines changed

Diff for: ‎src/components/Documents/DocumentTable.jsx

+2-1
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@ import { EmptyListNotification, LoadingAnimation } from '../Notification';
2828
* @param {documentTableProps} Props - Props for DocumentTable component
2929
* @returns {React.JSX.Element} The DocumentTable component
3030
*/
31-
const DocumentTable = ({ handleAclPermissionsModal }) => {
31+
const DocumentTable = ({ handleAclPermissionsModal, handleSelectDeleteDoc }) => {
3232
const { documentListObject, loadingDocuments } = useContext(DocumentListContext);
3333
const columnTitlesArray = [
3434
'Name',
@@ -61,6 +61,7 @@ const DocumentTable = ({ handleAclPermissionsModal }) => {
6161
key={document.name}
6262
document={document}
6363
handleAclPermissionsModal={handleAclPermissionsModal}
64+
handleSelectDeleteDoc={handleSelectDeleteDoc}
6465
/>
6566
))}
6667
</TableBody>

Diff for: ‎src/components/Documents/DocumentTableRow.jsx

+3-21
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,14 @@
11
// React Imports
2-
import React, { useContext } from 'react';
2+
import React from 'react';
33
// Custom Hook Imports
44
import { useSession } from '@hooks';
5-
import useNotification from '@hooks/useNotification';
65
// Material UI Imports
76
import DeleteOutlineOutlinedIcon from '@mui/icons-material/DeleteOutlineOutlined';
87
import FileOpenIcon from '@mui/icons-material/FileOpen';
98
import IconButton from '@mui/material/IconButton';
109
import ShareIcon from '@mui/icons-material/Share';
1110
// Utility Imports
1211
import { getBlobFromSolid } from '@utils';
13-
// Context Imports
14-
import { DocumentListContext } from '@contexts';
1512
// Component Imports
1613
import { StyledTableCell, StyledTableRow } from '../Table/TableStyles';
1714
// Constants Imports
@@ -29,10 +26,8 @@ import DOC_TYPES from '../../constants/doc_types';
2926
* @param {documentTableRowProps} Props - Props for DocumentTableRow
3027
* @returns {React.JSX.Element} The DocumentTableRow component
3128
*/
32-
const DocumentTableRow = ({ document, handleAclPermissionsModal }) => {
29+
const DocumentTableRow = ({ document, handleAclPermissionsModal, handleSelectDeleteDoc }) => {
3330
const { session } = useSession();
34-
const { removeDocument } = useContext(DocumentListContext);
35-
const { addNotification } = useNotification();
3631

3732
const { name, type, description, fileUrl, uploadDate, endDate } = document;
3833

@@ -41,19 +36,6 @@ const DocumentTableRow = ({ document, handleAclPermissionsModal }) => {
4136
window.open(urlFileBlob);
4237
};
4338

44-
// Event handler for deleting client from client list
45-
const handleDeleteDocument = async () => {
46-
if (
47-
!window.confirm(
48-
`You're about to delete ${document.name} from the pod, do you wish to continue?`
49-
)
50-
) {
51-
return;
52-
}
53-
await removeDocument(document.name);
54-
addNotification('success', `${document.name} deleted from the pod.`);
55-
};
56-
5739
return (
5840
<StyledTableRow>
5941
<StyledTableCell align="center">{name}</StyledTableCell>
@@ -74,7 +56,7 @@ const DocumentTableRow = ({ document, handleAclPermissionsModal }) => {
7456
</IconButton>
7557
</StyledTableCell>
7658
<StyledTableCell align="center">
77-
<IconButton size="large" edge="end" onClick={() => handleDeleteDocument()}>
59+
<IconButton size="large" edge="end" onClick={() => handleSelectDeleteDoc(document)}>
7860
<DeleteOutlineOutlinedIcon />
7961
</IconButton>
8062
</StyledTableCell>

Diff for: ‎src/components/Modals/ConfirmationButton.jsx

+41
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
// ReactImports
2+
import React from 'react';
3+
// Material UI Imports
4+
import Button from '@mui/material/Button';
5+
import CheckIcon from '@mui/icons-material/Check';
6+
7+
/**
8+
* confirmationButtonProps is an object that stores the props for the
9+
* ConfirmationModal component
10+
*
11+
* @typedef {object} confirmationButtonProps
12+
* @property {string} title - text rendered in confirmationButton
13+
* @property {Function} confirmFunction - method that runs onClick of button
14+
* @property {boolean} processing - state used to disable button
15+
* @memberof typedefs
16+
*/
17+
18+
/**
19+
* ConfirmationButton Component - Component that renders the confirm/affirm/yes
20+
* button on the ConfirmationModal Component
21+
*
22+
* @memberof Modals
23+
* @name ConfirmationButton
24+
* @param {confirmationButtonProps} props - Props used for ConfirmationButton
25+
* @returns {React.JSX.Element} - The confirmation button
26+
*/
27+
const ConfirmationButton = ({ title, confirmFunction, processing }) => (
28+
<Button
29+
variant="contained"
30+
color="primary"
31+
aria-label="Confirm Button"
32+
endIcon={<CheckIcon />}
33+
onClick={confirmFunction}
34+
disabled={processing}
35+
sx={{ marginLeft: '1rem' }}
36+
>
37+
{title.toUpperCase()}
38+
</Button>
39+
);
40+
41+
export default ConfirmationButton;

Diff for: ‎src/components/Modals/ConfirmationModal.jsx

+91
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,91 @@
1+
// React Imports
2+
import React from 'react';
3+
// Material UI Imports
4+
import Button from '@mui/material/Button';
5+
import ClearIcon from '@mui/icons-material/Clear';
6+
import Dialog from '@mui/material/Dialog';
7+
import DialogActions from '@mui/material/DialogActions';
8+
import DialogContent from '@mui/material/DialogContent';
9+
import DialogContentText from '@mui/material/DialogContentText';
10+
import DialogTitle from '@mui/material/DialogTitle';
11+
// Component Imports
12+
import ConfirmationButton from './ConfirmationButton';
13+
import LogoutButton from './LogoutButton';
14+
15+
/**
16+
* confirmationModalProps is an object that stores the props for the
17+
* ConfirmationModal component
18+
*
19+
* @typedef {object} confirmationModalProps
20+
* @property {boolean} showConfirmationModal - toggle showing modal
21+
* @property {React.Dispatch<React.SetStateAction<boolean>>} setShowConfirmationModal - used to close the modal
22+
* @property {string} title - text rendered in dialog title & confirmationButton
23+
* @property {string} text - text rendered in dialog content text
24+
* @property {Function} confirmFunction - method that runs onClick of button
25+
* @property {boolean} processing - state used to disable button
26+
* @property {boolean} [isLogout] - boolean to wrap button with inrupt logout functionality
27+
* @memberof typedefs
28+
*/
29+
30+
/**
31+
* ConfirmationModal Component - Component that allows users to cancel or
32+
* confirm their previously chosen action
33+
*
34+
* @memberof Modals
35+
* @name ConfirmationModal
36+
* @param {confirmationModalProps} props - Props used for ConfirmationModal
37+
* @returns {React.JSX.Element} - The confirmation modal
38+
*/
39+
const ConfirmationModal = ({
40+
showConfirmationModal,
41+
setShowConfirmationModal,
42+
title,
43+
text,
44+
confirmFunction,
45+
processing,
46+
isLogout = false
47+
}) => {
48+
const confirmButton = () =>
49+
isLogout ? (
50+
<LogoutButton>
51+
<ConfirmationButton
52+
title={title}
53+
confirmFunction={confirmFunction}
54+
processing={processing}
55+
/>
56+
</LogoutButton>
57+
) : (
58+
<ConfirmationButton title={title} confirmFunction={confirmFunction} processing={processing} />
59+
);
60+
61+
return (
62+
<Dialog
63+
open={showConfirmationModal}
64+
aria-labelledby="dialog-title"
65+
aria-describedby="dialog-description"
66+
onClose={() => setShowConfirmationModal(false)}
67+
>
68+
<DialogTitle id="dialog-title">{title.toUpperCase()}</DialogTitle>
69+
70+
<DialogContent>
71+
<DialogContentText id="dialog-description">{text}</DialogContentText>
72+
</DialogContent>
73+
74+
<DialogActions>
75+
<Button
76+
variant="outlined"
77+
color="error"
78+
aria-label="Cancel Button"
79+
endIcon={<ClearIcon />}
80+
onClick={() => setShowConfirmationModal(false)}
81+
>
82+
CANCEL
83+
</Button>
84+
85+
{confirmButton()}
86+
</DialogActions>
87+
</Dialog>
88+
);
89+
};
90+
91+
export default ConfirmationModal;

Diff for: ‎src/components/Modals/DeleteContactModal.jsx

-100
This file was deleted.

Diff for: ‎src/components/Modals/LogoutModal.jsx

-62
This file was deleted.

Diff for: ‎src/components/Modals/index.js

+4-4
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import AddContactModal from './AddContactModal';
2-
import DeleteContactModal from './DeleteContactModal';
3-
import LogoutModal from './LogoutModal';
2+
import ConfirmationButton from './ConfirmationButton';
3+
import ConfirmationModal from './ConfirmationModal';
44
import NewMessageModal from './NewMessageModal';
55
import SetAclPermissionsModal from './SetAclPermissionsModal';
66
import UploadDocumentModal from './UploadDocumentModal';
@@ -13,8 +13,8 @@ import UploadDocumentModal from './UploadDocumentModal';
1313

1414
export {
1515
AddContactModal,
16-
DeleteContactModal,
17-
LogoutModal,
16+
ConfirmationButton,
17+
ConfirmationModal,
1818
NewMessageModal,
1919
SetAclPermissionsModal,
2020
UploadDocumentModal

0 commit comments

Comments
 (0)