- using nanoevents as event emitter

- bug: createResumeModal opens twice

src/components/dashboard/CreateResume.js

@@ -4,11 +4,9 @@ import ModalContext from "../../contexts/ModalContext";
 import styles from "./CreateResume.module.css";
 
 const CreateResume = () => {
-  const { createResumeModal } = useContext(ModalContext);
+  const { emitter, events } = useContext(ModalContext);
 
-  const handleClick = () => {
-    createResumeModal.setOpen(true);
-  };
+  const handleClick = () => emitter.emit(events.CREATE_RESUME_MODAL);
 
   return (
     <div className={styles.resume}>

src/components/dashboard/ResumePreview.js

@@ -10,7 +10,7 @@ import styles from "./ResumePreview.module.css";
 
 const ResumePreview = ({ resume }) => {
   const [anchorEl, setAnchorEl] = useState(null);
-  const { createResumeModal } = useContext(ModalContext);
+  const { emitter, events } = useContext(ModalContext);
   const { deleteResume } = useContext(DatabaseContext);
 
   const handleOpen = () => navigate(`/app/builder/${resume.id}`);
@@ -20,8 +20,7 @@ const ResumePreview = ({ resume }) => {
   };
 
   const handleRename = () => {
-    createResumeModal.setOpen(true);
-    createResumeModal.setData(resume);
+    emitter.emit(events.CREATE_RESUME_MODAL, resume);
     setAnchorEl(null);
   };
 

src/components/landing/Hero.js

@@ -1,18 +1,18 @@
+import { navigate } from "gatsby";
 import React, { useContext } from "react";
 import { FaGithub } from "react-icons/fa";
-import ThemeContext from "../../contexts/ThemeContext";
 import ModalContext from "../../contexts/ModalContext";
+import ThemeContext from "../../contexts/ThemeContext";
 import UserContext from "../../contexts/UserContext";
 import Button from "../shared/Button";
 import Logo from "../shared/Logo";
-import { navigate } from "gatsby";
 
 const Hero = () => {
+  const { emitter, events } = useContext(ModalContext);
   const { user, loading } = useContext(UserContext);
   const { toggleDarkMode } = useContext(ThemeContext);
-  const { authModal } = useContext(ModalContext);
 
-  const handleLogin = () => authModal.setOpen(true);
+  const handleLogin = () => emitter.emit(events.AUTH_MODAL);
 
   const handleGotoApp = () => navigate("/app/dashboard");
 
@@ -31,14 +31,10 @@ const Hero = () => {
             <Button
               title="Go to App"
               onClick={handleGotoApp}
-              isLoading={loading || authModal.isOpen}
+              isLoading={loading}
             />
           ) : (
-            <Button
-              title="Login"
-              onClick={handleLogin}
-              isLoading={loading || authModal.isOpen}
-            />
+            <Button title="Login" onClick={handleLogin} isLoading={loading} />
           )}
           <Button
             outline