diff --git a/src/components/Confirm.jsx b/src/components/Confirm.jsx new file mode 100644 index 0000000..dcefbbe --- /dev/null +++ b/src/components/Confirm.jsx @@ -0,0 +1,57 @@ +import { useEffect, useRef } from 'react'; +import Loading from './Loading'; + +const Confirm = ({ open, onClose, onConfirm, children, title, loading }) => { + const confirmRef = useRef(null); + const cancelRef = useRef(null); + + // Opens/closes modal depending on open state + useEffect(() => { + const { current: el } = confirmRef; + if (open) { + el.showModal(); + cancelRef.current.focus(); + } else el.close(); + }, [open]); + + return ( + +
+

{title}

+ + {loading ? ( + + ) : ( + <> + {children} +
+ + +
+ + )} +
+ + ); +}; + +export default Confirm; diff --git a/src/components/DeleteItem.jsx b/src/components/DeleteItem.jsx new file mode 100644 index 0000000..2ccb355 --- /dev/null +++ b/src/components/DeleteItem.jsx @@ -0,0 +1,45 @@ +import { useState } from 'react'; +import { deleteItem } from '../api/firebase'; +import Confirm from './Confirm'; + +const DeleteItem = ({ itemName, listPath, itemId }) => { + const [open, setOpen] = useState(false); + const [submitted, setSubmitted] = useState(false); + + const handleDelete = (listPath, itemId) => { + setSubmitted(true); + deleteItem(listPath, itemId); + return; + }; + + const openConfirm = () => { + setOpen(true); + }; + const closeConfirm = () => { + setOpen(false); + }; + + return ( + <> + + handleDelete(listPath, itemId)} + open={open} + loading={submitted} + > + {`Do you really want to delete ${itemName.toUpperCase()} from this list?`} + + + ); +}; + +export default DeleteItem; diff --git a/src/components/DeleteList.jsx b/src/components/DeleteList.jsx new file mode 100644 index 0000000..fabaa03 --- /dev/null +++ b/src/components/DeleteList.jsx @@ -0,0 +1,48 @@ +import { useState } from 'react'; +import { deleteList } from '../api/firebase'; +import Confirm from './Confirm'; + +const DeleteList = ({ user, email, listPath, listName, setListPath }) => { + const [open, setOpen] = useState(false); + const [submitted, setSubmitted] = useState(false); + + const handleDelete = (user, email, listPath, listName) => { + setSubmitted(true); + deleteList(user, email, listPath, listName); + setListPath(''); + return; + }; + + const openConfirm = () => { + setOpen(true); + }; + const closeConfirm = () => { + setOpen(false); + }; + + return ( + <> + + handleDelete(user, email, listPath, listName)} + open={open} + loading={submitted} + > + {listPath.includes(user) + ? `Do you really want to delete ${listName.toUpperCase()} list?` + : `Do you really want to stop using ${listName.toUpperCase()} list?`} + + + ); +}; + +export default DeleteList; diff --git a/src/components/ListButtons.jsx b/src/components/ListButtons.jsx index 56bb1bb..b4c6981 100644 --- a/src/components/ListButtons.jsx +++ b/src/components/ListButtons.jsx @@ -3,40 +3,29 @@ const ListButtons = (props) => { const navigate = useNavigate(); const buttonVariants = { - purple: 'flex items-center justify-center rounded-md bg-lightPurple', + purple: + 'text-base sm:text-lg text-offWhite flex items-center justify-center rounded-md bg-lightPurple transition ease-in-out hover:bg-hoverPurple', white: - 'flex items-center justify-center rounded-md bg-lightGrey border text-darkPurple', - }; - - const iconVariants = { - purple: 'fa-inverse', - white: '', - }; - - const textVariants = { - purple: 'text-base sm:text-lg text-offWhite font-poppins', - white: 'text-base sm:text-lg text-darkPurple font-poppins', + 'text-base sm:text-lg text-darkPurple flex items-center justify-center rounded-md bg-lightGrey border text-darkPurple transition ease-in-out hover:bg-hoverPurple hover:text-offWhite', }; return ( -
+
); diff --git a/src/components/ListItem.jsx b/src/components/ListItem.jsx index cb3fa04..579936f 100644 --- a/src/components/ListItem.jsx +++ b/src/components/ListItem.jsx @@ -1,4 +1,4 @@ -import { deleteItem } from '../api/firebase'; +import DeleteItem from './DeleteItem'; export function ListItem({ isRecentlyPurchased, @@ -7,17 +7,6 @@ export function ListItem({ name, updatePurchaseDate, }) { - const handleDelete = (listPath, itemId, itemName) => { - if ( - window.confirm( - `Do you really want to delete ${itemName.toUpperCase()} from this list?`, - ) - ) { - deleteItem(listPath, itemId); - } - return; - }; - return (
- +
); diff --git a/src/components/SingleList.jsx b/src/components/SingleList.jsx index 645681f..d459689 100644 --- a/src/components/SingleList.jsx +++ b/src/components/SingleList.jsx @@ -1,5 +1,5 @@ import { useNavigate } from 'react-router-dom'; -import { deleteList } from '../api/firebase'; +import DeleteList from './DeleteList'; export function SingleList({ userEmail, name, path, setListPath, userId }) { const navigate = useNavigate(); @@ -8,29 +8,6 @@ export function SingleList({ userEmail, name, path, setListPath, userId }) { navigate(`/list/${path}`); } - function handleDelete(user, email, listPath, listName) { - if (listPath.includes(user)) { - if ( - window.confirm( - `Do you really want to delete ${listName.toUpperCase()} list?`, - ) - ) { - deleteList(user, email, listPath, listName); - setListPath(''); - } - return; - } - if ( - window.confirm( - `Do you really want to stop using ${listName.toUpperCase()} list?`, - ) - ) { - deleteList(user, email, listPath, listName); - setListPath(''); - } - return; - } - return (
  • - +
    • ); } diff --git a/src/components/index.js b/src/components/index.js index 5499a34..c79d746 100644 --- a/src/components/index.js +++ b/src/components/index.js @@ -5,3 +5,6 @@ export * from './SearchList'; export * from './Loading'; export * from './ButtonWithIcon'; export * from './ErrorMessage'; +export * from './DeleteList'; +export * from './Confirm'; +export * from './DeleteItem'; diff --git a/src/views/Layout.jsx b/src/views/Layout.jsx index cc7dc5f..3832206 100644 --- a/src/views/Layout.jsx +++ b/src/views/Layout.jsx @@ -12,7 +12,7 @@ export function Layout({ lists, listPath, user, isLoadingUser }) { return (
    -
    +
    {isLoadingUser ? ( ) : !!user ? ( diff --git a/src/views/ManageList.jsx b/src/views/ManageList.jsx index 7b7a13f..9ac3452 100644 --- a/src/views/ManageList.jsx +++ b/src/views/ManageList.jsx @@ -179,7 +179,7 @@ export function ManageList({ data, listPath, userId, userEmail }) { >