- deleting a resume

src/components/dashboard/ResumePreview.js

@@ -2,12 +2,15 @@ import { Menu, MenuItem } from "@material-ui/core";
 import moment from "moment";
 import React, { useContext, useState } from "react";
 import { MdMoreHoriz, MdOpenInNew } from "react-icons/md";
+import { toast } from "react-toastify";
 import ModalContext from "../../contexts/ModalContext";
+import ResumeContext from "../../contexts/ResumeContext";
 import styles from "./ResumePreview.module.css";
 
 const ResumePreview = ({ resume }) => {
   const [anchorEl, setAnchorEl] = useState(null);
   const { createResumeModal } = useContext(ModalContext);
+  const { deleteResume } = useContext(ResumeContext);
 
   const handleOpen = () => {
     console.log("Hello, World!");
@@ -23,6 +26,12 @@ const ResumePreview = ({ resume }) => {
     setAnchorEl(null);
   };
 
+  const handleDelete = () => {
+    deleteResume(resume);
+    toast(`${resume.name} was deleted successfully`);
+    setAnchorEl(null);
+  };
+
   const handleMenuClose = () => {
     setAnchorEl(null);
   };
@@ -56,8 +65,7 @@ const ResumePreview = ({ resume }) => {
           onClose={handleMenuClose}
         >
           <MenuItem onClick={handleRename}>Rename</MenuItem>
-          <MenuItem onClick={handleMenuClose}>Duplicate</MenuItem>
-          <MenuItem onClick={handleMenuClose}>
+          <MenuItem onClick={handleDelete}>
             <span className="text-red-600">Delete</span>
           </MenuItem>
         </Menu>

src/components/shared/Wrapper.js

@@ -1,21 +1,24 @@
-import React, { Fragment } from "react";
-import { ToastContainer, Slide } from "react-toastify";
+import React, { Fragment, useEffect } from "react";
+import { Slide, toast } from "react-toastify";
 import ModalRegistrar from "../../modals/ModalRegistrar";
 
 const Wrapper = ({ children }) => {
+  useEffect(() => {
+    toast.configure({
+      role: "alert",
+      hideProgressBar: true,
+      transition: Slide,
+      closeButton: false,
+      position: "bottom-right",
+      pauseOnFocusLoss: false,
+    });
+  }, []);
+
   return (
     <Fragment>
       {children}
 
       <ModalRegistrar />
-      <ToastContainer
-        role="alert"
-        hideProgressBar
-        transition={Slide}
-        closeButton={false}
-        position="bottom-right"
-        pauseOnFocusLoss={false}
-      />
     </Fragment>
   );
 };

src/contexts/ModalContext.js

@@ -17,6 +17,7 @@ const ModalContext = createContext(defaultState);
 
 const ModalProvider = ({ children }) => {
   const [authOpen, setAuthOpen] = useState(false);
+
   const [createResumeOpen, setCreateResumeOpen] = useState(false);
   const [createResumeData, setCreateResumeData] = useState(null);
 

src/contexts/ResumeContext.js

@@ -7,6 +7,7 @@ import UserContext from "./UserContext";
 const defaultState = {
   resumes: [],
   createResume: async () => {},
+  deleteResume: async () => {},
 };
 
 const ResumeContext = createContext(defaultState);
@@ -56,12 +57,18 @@ const ResumeProvider = ({ children }) => {
     });
   };
 
+  const deleteResume = async (resume) => {
+    const { id } = resume;
+    await firebase.firestore().collection(collectionRef).doc(id).delete();
+  };
+
   return (
     <ResumeContext.Provider
       value={{
         resumes,
         createResume,
         updateResume,
+        deleteResume,
       }}
     >
       {children}

src/modals/CreateResumeModal.js

@@ -9,7 +9,9 @@ import { getModalText } from "../utils";
 import BaseModal from "./BaseModal";
 
 const CreateResumeSchema = Yup.object().shape({
-  name: Yup.string().min(2).required(),
+  name: Yup.string()
+    .min(5, "Please enter at least 5 characters.")
+    .required("This is a required field."),
 });
 
 const CreateResumeModal = ({ data }) => {

src/modals/ModalRegistrar.js

@@ -1,7 +1,7 @@
 import React, { Fragment, useContext } from "react";
+import ModalContext from "../contexts/ModalContext";
 import AuthModal from "./AuthModal";
 import CreateResumeModal from "./CreateResumeModal";
-import ModalContext from "../contexts/ModalContext";
 
 const ModalRegistrar = () => {
   const { createResumeModal } = useContext(ModalContext);