- using nanoevents as event emitter

- bug: createResumeModal opens twice

src/modals/AuthModal.js

@@ -1,15 +1,23 @@
-import React, { useState, useContext, Fragment } from "react";
-import BaseModal from "./BaseModal";
+import { navigate } from "gatsby";
+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 ModalContext from "../contexts/ModalContext";
+import React, { Fragment } from "react";
 import AuthModal from "./AuthModal";
 import CreateResumeModal from "./CreateResumeModal";
 
 const ModalRegistrar = () => {
-  const { createResumeModal } = useContext(ModalContext);
-
   return (
     <Fragment>
       <AuthModal />
-      <CreateResumeModal data={createResumeModal.data} />
+      <CreateResumeModal />
     </Fragment>
   );
 };