- 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;