- using nanoevents as event emitter

- bug: createResumeModal opens twice

.vscode/settings.json

@@ -1,5 +1,11 @@
 {
   "files.associations": {
     "*.js": "javascriptreact"
-  }
+  },
+  "[javascriptreact]": {
+    "editor.codeActionsOnSave": {
+      "source.organizeImports": true
+    }
+  },
+  "editor.formatOnSave": true
 }

package.json

@@ -18,7 +18,7 @@
     "classnames": "^2.2.6",
     "firebase": "^7.15.5",
     "formik": "^2.1.4",
-    "gatsby": "^2.23.12",
+    "gatsby": "^2.23.20",
     "gatsby-image": "^2.4.12",
     "gatsby-plugin-create-client-paths": "^2.3.9",
     "gatsby-plugin-firebase": "^0.2.0-beta.4",
@@ -32,9 +32,10 @@
     "gatsby-transformer-sharp": "^2.5.10",
     "lodash": "^4.17.15",
     "moment": "^2.27.0",
-    "react": "^16.12.0",
+    "nanoevents": "^5.1.8",
+    "react": "^16.13.1",
     "react-beautiful-dnd": "^13.0.0",
-    "react-dom": "^16.12.0",
+    "react-dom": "^16.13.1",
     "react-firebase-hooks": "^2.2.0",
     "react-helmet": "^6.1.0",
     "react-icons": "^3.10.0",

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 = () => {
+  const handleClick = () => emitter.emit(events.CREATE_RESUME_MODAL);
-    createResumeModal.setOpen(true);
-  };
 
   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);
+    emitter.emit(events.CREATE_RESUME_MODAL, resume);
-    createResumeModal.setData(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
+            <Button title="Login" onClick={handleLogin} isLoading={loading} />
-              title="Login"
-              onClick={handleLogin}
-              isLoading={loading || authModal.isOpen}
-            />
           )}
           <Button
             outline

src/contexts/ModalContext.js

@@ -1,38 +1,20 @@
-import React, { createContext, useState } from "react";
+import { createNanoEvents } from "nanoevents";
+import React, { createContext } from "react";
 
-const defaultState = {
+const events = {
-  authModal: {
+  AUTH_MODAL: "auth_modal",
-    isOpen: false,
+  CREATE_RESUME_MODAL: "create_resume_modal",
-    setOpen: () => {},
-  },
-  createResumeModal: {
-    isOpen: false,
-    setOpen: () => {},
-    data: null,
-    setData: () => {},
-  },
 };
 
+const emitter = createNanoEvents();
+
+const defaultState = { events, emitter };
+
 const ModalContext = createContext(defaultState);
 
 const ModalProvider = ({ children }) => {
-  const [authOpen, setAuthOpen] = useState(false);
-
-  const [createResumeOpen, setCreateResumeOpen] = useState(false);
-  const [createResumeData, setCreateResumeData] = useState(null);
-
   return (
-    <ModalContext.Provider
+    <ModalContext.Provider value={defaultState}>
-      value={{
-        authModal: { isOpen: authOpen, setOpen: setAuthOpen },
-        createResumeModal: {
-          isOpen: createResumeOpen,
-          setOpen: setCreateResumeOpen,
-          data: createResumeData,
-          setData: setCreateResumeData,
-        },
-      }}
-    >
       {children}
     </ModalContext.Provider>
   );

src/modals/AuthModal.js

@@ -1,15 +1,23 @@
-import React, { useState, useContext, Fragment } from "react";
+import { navigate } from "gatsby";
-import BaseModal from "./BaseModal";
+import React, { Fragment, useContext, useEffect, useState } from "react";
 import Button from "../components/shared/Button";
 import ModalContext from "../contexts/ModalContext";
 import UserContext from "../contexts/UserContext";
-import { navigate } from "gatsby";
+import BaseModal from "./BaseModal";
 
 const AuthModal = () => {
+  const [open, setOpen] = useState(false);
   const [isLoading, setLoading] = useState(false);
-  const { authModal } = useContext(ModalContext);
+
+  const { emitter, events } = useContext(ModalContext);
   const { user, loginWithGoogle, logout } = useContext(UserContext);
 
+  useEffect(() => {
+    const unbind = emitter.on(events.AUTH_MODAL, () => setOpen(true));
+
+    return () => unbind();
+  }, [emitter, events]);
+
   const handleSignInWithGoogle = async () => {
     setLoading(true);
     await loginWithGoogle();
@@ -18,7 +26,7 @@ const AuthModal = () => {
 
   const handleGotoApp = () => {
     navigate("/app/dashboard");
-    authModal.setOpen(false);
+    setOpen(false);
   };
 
   const getTitle = () =>
@@ -46,7 +54,7 @@ const AuthModal = () => {
 
   return (
     <BaseModal
-      state={authModal}
+      state={[open, setOpen]}
       title={getTitle()}
       action={user ? loggedInAction : loggedOutAction}
     >

src/modals/BaseModal.js

@@ -1,21 +1,20 @@
-import React, { forwardRef, useImperativeHandle } from "react";
-import { isFunction } from "lodash";
-import Modal from "@material-ui/core/Modal";
 import Backdrop from "@material-ui/core/Backdrop";
 import Fade from "@material-ui/core/Fade";
+import Modal from "@material-ui/core/Modal";
+import { isFunction } from "lodash";
+import React, { forwardRef, useImperativeHandle } from "react";
 import { MdClose } from "react-icons/md";
-import styles from "./BaseModal.module.css";
 import Button from "../components/shared/Button";
+import styles from "./BaseModal.module.css";
 
 const BaseModal = forwardRef(
   ({ title, state, children, action, onDestroy }, ref) => {
-    const { isOpen, setOpen, setData } = state;
+    const [open, setOpen] = state;
 
     const handleClose = () => {
       setOpen(false);
 
       setTimeout(() => {
-        isFunction(setData) && setData(null);
         isFunction(onDestroy) && onDestroy();
       }, 250);
     };
@@ -24,13 +23,13 @@ const BaseModal = forwardRef(
 
     return (
       <Modal
-        open={isOpen}
+        open={open}
         closeAfterTransition
         onClose={handleClose}
         className={styles.root}
         BackdropComponent={Backdrop}
       >
-        <Fade in={isOpen}>
+        <Fade in={open}>
           <div className={styles.modal}>
             <div className={styles.title}>
               <h2>{title}</h2>

src/modals/CreateResumeModal.js

@@ -14,12 +14,25 @@ const CreateResumeSchema = Yup.object().shape({
     .required("This is a required field."),
 });
 
-const CreateResumeModal = ({ data }) => {
+const CreateResumeModal = () => {
   const modalRef = useRef(null);
+
+  const [data, setData] = useState(null);
+  const [open, setOpen] = useState(false);
   const [isEditMode, setEditMode] = useState(false);
-  const { createResumeModal } = useContext(ModalContext);
+
+  const { emitter, events } = useContext(ModalContext);
   const { createResume, updateResume } = useContext(DatabaseContext);
 
+  useEffect(() => {
+    const unbind = emitter.on(events.CREATE_RESUME_MODAL, (data) => {
+      setOpen(true);
+      setData(data);
+    });
+
+    return () => unbind();
+  }, [emitter, events]);
+
   const formik = useFormik({
     initialValues: {
       name: "",
@@ -47,12 +60,13 @@ const CreateResumeModal = ({ data }) => {
   const onDestroy = () => {
     formik.resetForm();
     setEditMode(false);
+    setData(null);
   };
 
   return (
     <BaseModal
       ref={modalRef}
-      state={createResumeModal}
+      state={[open, setOpen]}
       title={getModalText(isEditMode, "Resume")}
       action={submitAction}
       onDestroy={onDestroy}

src/modals/ModalRegistrar.js

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