- implement awards section

src/modals/ModalRegistrar.js

@@ -1,6 +1,7 @@
 import React, { Fragment } from "react";
 import AuthModal from "./AuthModal";
 import ResumeModal from "./ResumeModal";
+import AwardModal from "./sections/AwardModal";
 import EducationModal from "./sections/EducationModal";
 import SocialModal from "./sections/SocialModal";
 import WorkModal from "./sections/WorkModal";
@@ -13,6 +14,7 @@ const ModalRegistrar = () => {
       <SocialModal />
       <WorkModal />
       <EducationModal />
+      <AwardModal />
     </Fragment>
   );
 };

src/modals/ResumeModal.js

@@ -3,8 +3,8 @@ import { get } from "lodash";
 import React, { useContext } from "react";
 import * as Yup from "yup";
 import Input from "../components/shared/Input";
+import ModalEvents from "../constants/ModalEvents";
 import DatabaseContext from "../contexts/DatabaseContext";
-import ModalContext from "../contexts/ModalContext";
 import DataModal from "./DataModal";
 
 const initialValues = {
@@ -18,12 +18,12 @@ const validationSchema = Yup.object().shape({
 });
 
 const ResumeModal = () => {
-  const { events } = useContext(ModalContext);
   const { createResume, updateResume } = useContext(DatabaseContext);
 
   const getFieldProps = (formik, name) => ({
     touched: get(formik, `touched.${name}`, false),
     error: get(formik, `errors.${name}`, ""),
+    isRequired: get(validationSchema, `fields.${name}._exclusive.required`),
     ...formik.getFieldProps(name),
   });
 
@@ -42,7 +42,7 @@ const ResumeModal = () => {
           }}
           onEdit={updateResume}
           onCreate={createResume}
-          event={events.CREATE_RESUME_MODAL}
+          event={ModalEvents.CREATE_RESUME_MODAL}
         >
           <Input
             label="Name"

src/modals/sections/AwardModal.js

@@ -0,0 +1,76 @@
+import { Formik } from "formik";
+import { get } from "lodash";
+import React from "react";
+import * as Yup from "yup";
+import Input from "../../components/shared/Input";
+import ModalEvents from "../../constants/ModalEvents";
+import DataModal from "../DataModal";
+
+const initialValues = {
+  title: "",
+  awarder: "",
+  date: "",
+  summary: "",
+};
+
+const validationSchema = Yup.object().shape({
+  title: Yup.string().required("This is a required field."),
+  awarder: Yup.string().required("This is a required field."),
+  date: Yup.date().max(new Date()),
+  summary: Yup.string(),
+});
+
+const AwardModal = () => {
+  const getFieldProps = (formik, name) => ({
+    touched: get(formik, `touched.${name}`, false),
+    error: get(formik, `errors.${name}`, ""),
+    isRequired: get(validationSchema, `fields.${name}._exclusive.required`),
+    ...formik.getFieldProps(name),
+  });
+
+  return (
+    <Formik
+      validateOnBlur
+      initialValues={initialValues}
+      validationSchema={validationSchema}
+    >
+      {(formik) => (
+        <DataModal
+          path="awards.items"
+          name="Awards"
+          event={ModalEvents.AWARD_MODAL}
+        >
+          <div className="grid grid-cols-2 gap-8">
+            <Input
+              label="Title"
+              className="col-span-2"
+              placeholder="Intl. Flutter Hackathon '19"
+              {...getFieldProps(formik, "title")}
+            />
+
+            <Input
+              label="Awarder"
+              placeholder="Google"
+              {...getFieldProps(formik, "awarder")}
+            />
+
+            <Input
+              type="date"
+              label="Date"
+              {...getFieldProps(formik, "date")}
+            />
+
+            <Input
+              type="textarea"
+              label="Summary"
+              className="col-span-2"
+              {...getFieldProps(formik, "summary")}
+            />
+          </div>
+        </DataModal>
+      )}
+    </Formik>
+  );
+};
+
+export default AwardModal;

src/modals/sections/EducationModal.js

@@ -1,10 +1,10 @@
 import { Field, FieldArray, Formik } from "formik";
 import { get } from "lodash";
-import React, { useContext } from "react";
+import React from "react";
 import { MdAdd } from "react-icons/md";
 import * as Yup from "yup";
 import Input from "../../components/shared/Input";
-import ModalContext from "../../contexts/ModalContext";
+import ModalEvents from "../../constants/ModalEvents";
 import { handleKeyDown } from "../../utils";
 import DataModal from "../DataModal";
 
@@ -36,11 +36,10 @@ const validationSchema = Yup.object().shape({
 });
 
 const EducationModal = () => {
-  const { events } = useContext(ModalContext);
-
   const getFieldProps = (formik, name) => ({
     touched: get(formik, `touched.${name}`, false),
     error: get(formik, `errors.${name}`, ""),
+    isRequired: get(validationSchema, `fields.${name}._exclusive.required`),
     ...formik.getFieldProps(name),
   });
 
@@ -54,7 +53,7 @@ const EducationModal = () => {
         <DataModal
           path="education.items"
           name="Education"
-          event={events.EDUCATION_MODAL}
+          event={ModalEvents.EDUCATION_MODAL}
         >
           <div className="grid grid-cols-2 gap-8">
             <Input

src/modals/sections/SocialModal.js

@@ -1,9 +1,9 @@
 import { Formik } from "formik";
 import { get } from "lodash";
-import React, { useContext } from "react";
+import React from "react";
 import * as Yup from "yup";
 import Input from "../../components/shared/Input";
-import ModalContext from "../../contexts/ModalContext";
+import ModalEvents from "../../constants/ModalEvents";
 import DataModal from "../DataModal";
 
 const initialValues = {
@@ -24,11 +24,10 @@ const validationSchema = Yup.object().shape({
 });
 
 const SocialModal = () => {
-  const { events } = useContext(ModalContext);
-
   const getFieldProps = (formik, name) => ({
     touched: get(formik, `touched.${name}`, false),
     error: get(formik, `errors.${name}`, ""),
+    isRequired: get(validationSchema, `fields.${name}._exclusive.required`),
     ...formik.getFieldProps(name),
   });
 
@@ -42,7 +41,7 @@ const SocialModal = () => {
         <DataModal
           path="social.items"
           name="Social Network"
-          event={events.SOCIAL_MODAL}
+          event={ModalEvents.SOCIAL_MODAL}
         >
           <div className="grid grid-cols-2 gap-8">
             <Input

src/modals/sections/WorkModal.js

@@ -1,10 +1,10 @@
 import { Field, FieldArray, Formik } from "formik";
 import { get } from "lodash";
-import React, { useContext } from "react";
+import React from "react";
 import { MdAdd } from "react-icons/md";
 import * as Yup from "yup";
 import Input from "../../components/shared/Input";
-import ModalContext from "../../contexts/ModalContext";
+import ModalEvents from "../../constants/ModalEvents";
 import { handleKeyDown } from "../../utils";
 import DataModal from "../DataModal";
 
@@ -38,11 +38,10 @@ const validationSchema = Yup.object().shape({
 });
 
 const WorkModal = () => {
-  const { events } = useContext(ModalContext);
-
   const getFieldProps = (formik, name) => ({
     touched: get(formik, `touched.${name}`, false),
     error: get(formik, `errors.${name}`, ""),
+    isRequired: get(validationSchema, `fields.${name}._exclusive.required`),
     ...formik.getFieldProps(name),
   });
 
@@ -56,7 +55,7 @@ const WorkModal = () => {
         <DataModal
           path="work.items"
           name="Work Experience"
-          event={events.WORK_MODAL}
+          event={ModalEvents.WORK_MODAL}
         >
           <div className="grid grid-cols-2 gap-8">
             <Input