- designing the dashboard

- resume preview
- create resume modal

src/modals/AuthModal.js

@@ -3,6 +3,7 @@ import BaseModal from "./BaseModal";
 import Button from "../components/shared/Button";
 import ModalContext from "../contexts/ModalContext";
 import UserContext from "../contexts/UserContext";
+import { navigate } from "gatsby";
 
 const AuthModal = () => {
   const [isLoading, setLoading] = useState(false);
@@ -15,8 +16,9 @@ const AuthModal = () => {
     setLoading(false);
   };
 
-  const handleGoToApp = () => {
-    console.log("Go to App");
+  const handleGotoApp = () => {
+    navigate("/app/dashboard");
+    authModal.setOpen(false);
   };
 
   const getTitle = () =>
@@ -30,7 +32,7 @@ const AuthModal = () => {
   const loggedInAction = (
     <Fragment>
       <Button outline className="mr-8" title="Logout" onClick={logout} />
-      <Button title="Go to App" onClick={handleGoToApp} />
+      <Button title="Go to App" onClick={handleGotoApp} />
     </Fragment>
   );
 

src/modals/BaseModal.js

@@ -1,4 +1,5 @@
 import React 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";
@@ -6,10 +7,13 @@ import { MdClose } from "react-icons/md";
 import styles from "./BaseModal.module.css";
 import Button from "../components/shared/Button";
 
-const BaseModal = ({ title, state, children, action }) => {
+const BaseModal = ({ title, state, children, action, onDestroy }) => {
   const { isOpen, setOpen } = state;
 
-  const handleClose = () => setOpen(false);
+  const handleClose = () => {
+    setOpen(false);
+    isFunction(onDestroy) && onDestroy();
+  };
 
   return (
     <Modal

src/modals/CreateResumeModal.js

@@ -0,0 +1,55 @@
+import React, { useContext } from "react";
+import { useFormik } from "formik";
+import BaseModal from "./BaseModal";
+import ModalContext from "../contexts/ModalContext";
+import Button from "../components/shared/Button";
+import Input from "../components/shared/Input";
+
+const CreateResumeModal = () => {
+  const { createResumeModal } = useContext(ModalContext);
+  const formik = useFormik({
+    initialValues: {
+      name: "",
+    },
+    onSubmit: (values) => {
+      alert(JSON.stringify(values, null, 2));
+    },
+  });
+
+  const submitAction = (
+    <Button title="Create Resume" onClick={() => formik.handleSubmit()} />
+  );
+
+  const onDestroy = () => {
+    formik.resetForm();
+  };
+
+  return (
+    <BaseModal
+      state={createResumeModal}
+      title="Create New Resume"
+      action={submitAction}
+      onDestroy={onDestroy}
+    >
+      <form className="mb-8">
+        <Input
+          type="text"
+          label="Name"
+          name="name"
+          placeholder="Full Stack Web Developer"
+          onChange={formik.handleChange}
+          value={formik.values.name}
+        />
+      </form>
+
+      <p>
+        You are going to be creating a new resume from scratch, but first, let's
+        give it a name. This can be the name of the role you want to apply for,
+        or if you're making a resume for a friend, you could call it Alex's
+        Resume.
+      </p>
+    </BaseModal>
+  );
+};
+
+export default CreateResumeModal;

src/modals/ModalRegistrar.js

@@ -1,10 +1,12 @@
 import React, { Fragment } from "react";
 import AuthModal from "./AuthModal";
+import CreateResumeModal from "./CreateResumeModal";
 
 const ModalRegistrar = () => {
   return (
     <Fragment>
       <AuthModal />
+      <CreateResumeModal />
     </Fragment>
   );
 };