- creating and updating resumes

src/modals/BaseModal.js

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { forwardRef, useImperativeHandle } from "react";
 import { isFunction } from "lodash";
 import Modal from "@material-ui/core/Modal";
 import Backdrop from "@material-ui/core/Backdrop";
@@ -7,45 +7,53 @@ import { MdClose } from "react-icons/md";
 import styles from "./BaseModal.module.css";
 import Button from "../components/shared/Button";
 
-const BaseModal = ({ title, state, children, action, onDestroy }) => {
-  const { isOpen, setOpen } = state;
+const BaseModal = forwardRef(
+  ({ title, state, children, action, onDestroy }, ref) => {
+    const { isOpen, setOpen, setData } = state;
 
-  const handleClose = () => {
-    setOpen(false);
-    isFunction(onDestroy) && onDestroy();
-  };
+    const handleClose = () => {
+      setOpen(false);
 
-  return (
-    <Modal
-      open={isOpen}
-      onClose={handleClose}
-      closeAfterTransition
-      className={styles.root}
-      BackdropComponent={Backdrop}
-    >
-      <Fade in={isOpen}>
-        <div className={styles.modal}>
-          <div className={styles.title}>
-            <h2>{title}</h2>
-            <MdClose size="18" onClick={handleClose} />
+      setTimeout(() => {
+        isFunction(setData) && setData(null);
+        isFunction(onDestroy) && onDestroy();
+      }, 250);
+    };
+
+    useImperativeHandle(ref, () => ({ handleClose }));
+
+    return (
+      <Modal
+        open={isOpen}
+        closeAfterTransition
+        onClose={handleClose}
+        className={styles.root}
+        BackdropComponent={Backdrop}
+      >
+        <Fade in={isOpen}>
+          <div className={styles.modal}>
+            <div className={styles.title}>
+              <h2>{title}</h2>
+              <MdClose size="18" onClick={handleClose} />
+            </div>
+
+            <div className={styles.body}>{children}</div>
+
+            <div className={styles.actions}>
+              <Button
+                outline
+                title="Cancel"
+                className="mr-8"
+                onClick={handleClose}
+              />
+
+              {action}
+            </div>
           </div>
-
-          <div className={styles.body}>{children}</div>
-
-          <div className={styles.actions}>
-            <Button
-              outline
-              title="Cancel"
-              className="mr-8"
-              onClick={handleClose}
-            />
-
-            {action}
-          </div>
-        </div>
-      </Fade>
-    </Modal>
-  );
-};
+        </Fade>
+      </Modal>
+    );
+  }
+);
 
 export default BaseModal;

src/modals/CreateResumeModal.js

@@ -1,33 +1,57 @@
-import React, { useContext } from "react";
 import { useFormik } from "formik";
-import BaseModal from "./BaseModal";
-import ModalContext from "../contexts/ModalContext";
+import React, { useContext, useEffect, useRef, useState } from "react";
+import * as Yup from "yup";
 import Button from "../components/shared/Button";
 import Input from "../components/shared/Input";
+import ModalContext from "../contexts/ModalContext";
+import ResumeContext from "../contexts/ResumeContext";
+import { getModalText } from "../utils";
+import BaseModal from "./BaseModal";
 
-const CreateResumeModal = () => {
+const CreateResumeSchema = Yup.object().shape({
+  name: Yup.string().min(2).required(),
+});
+
+const CreateResumeModal = ({ data }) => {
+  const modalRef = useRef(null);
+  const [isEditMode, setEditMode] = useState(false);
   const { createResumeModal } = useContext(ModalContext);
+  const { createResume, updateResume } = useContext(ResumeContext);
+
   const formik = useFormik({
     initialValues: {
       name: "",
     },
-    onSubmit: (values) => {
-      alert(JSON.stringify(values, null, 2));
+    validationSchema: CreateResumeSchema,
+    onSubmit: (data) => {
+      isEditMode ? updateResume(data) : createResume(data);
+      modalRef.current.handleClose();
     },
   });
 
+  useEffect(() => {
+    data && formik.setValues(data) && setEditMode(true);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [data]);
+
   const submitAction = (
-    <Button title="Create Resume" onClick={() => formik.handleSubmit()} />
+    <Button
+      type="submit"
+      title={getModalText(isEditMode, "Resume")}
+      onClick={() => formik.handleSubmit()}
+    />
   );
 
   const onDestroy = () => {
     formik.resetForm();
+    setEditMode(false);
   };
 
   return (
     <BaseModal
+      ref={modalRef}
       state={createResumeModal}
-      title="Create New Resume"
+      title={getModalText(isEditMode, "Resume")}
       action={submitAction}
       onDestroy={onDestroy}
     >
@@ -39,6 +63,7 @@ const CreateResumeModal = () => {
           placeholder="Full Stack Web Developer"
           onChange={formik.handleChange}
           value={formik.values.name}
+          error={formik.errors.name}
         />
       </form>
 

src/modals/ModalRegistrar.js

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