- using nanoevents as event emitter
- bug: createResumeModal opens twice
This commit is contained in:
parent
6d3e5823fc
commit
dbb005d26c
|
@ -1,5 +1,11 @@
|
|||
{
|
||||
"files.associations": {
|
||||
"*.js": "javascriptreact"
|
||||
}
|
||||
},
|
||||
"[javascriptreact]": {
|
||||
"editor.codeActionsOnSave": {
|
||||
"source.organizeImports": true
|
||||
}
|
||||
},
|
||||
"editor.formatOnSave": true
|
||||
}
|
||||
|
|
File diff suppressed because it is too large
Load Diff
|
@ -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",
|
||||
|
|
|
@ -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}>
|
||||
|
|
|
@ -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);
|
||||
};
|
||||
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -1,38 +1,20 @@
|
|||
import React, { createContext, useState } from "react";
|
||||
import { createNanoEvents } from "nanoevents";
|
||||
import React, { createContext } from "react";
|
||||
|
||||
const defaultState = {
|
||||
authModal: {
|
||||
isOpen: false,
|
||||
setOpen: () => {},
|
||||
},
|
||||
createResumeModal: {
|
||||
isOpen: false,
|
||||
setOpen: () => {},
|
||||
data: null,
|
||||
setData: () => {},
|
||||
},
|
||||
const events = {
|
||||
AUTH_MODAL: "auth_modal",
|
||||
CREATE_RESUME_MODAL: "create_resume_modal",
|
||||
};
|
||||
|
||||
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
|
||||
value={{
|
||||
authModal: { isOpen: authOpen, setOpen: setAuthOpen },
|
||||
createResumeModal: {
|
||||
isOpen: createResumeOpen,
|
||||
setOpen: setCreateResumeOpen,
|
||||
data: createResumeData,
|
||||
setData: setCreateResumeData,
|
||||
},
|
||||
}}
|
||||
>
|
||||
<ModalContext.Provider value={defaultState}>
|
||||
{children}
|
||||
</ModalContext.Provider>
|
||||
);
|
||||
|
|
|
@ -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}
|
||||
>
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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}
|
||||
|
|
|
@ -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>
|
||||
);
|
||||
};
|
||||
|
|
Loading…
Reference in New Issue