- implement awards section

src/components/builder/lists/double/DoubleFieldListItem.js

@@ -65,8 +65,8 @@ const DoubleFieldListItem = ({
   return (
     <div className={styles.container}>
       <div className="flex flex-col">
-        <span className="font-medium">{title}</span>
-        <span className="mt-1 text-sm opacity-75">{subtitle}</span>
+        <span className="font-medium truncate">{title}</span>
+        <span className="mt-1 text-sm opacity-75 truncate">{subtitle}</span>
       </div>
 
       <div className={styles.menu}>

src/components/builder/lists/double/DoubleFieldListItem.module.css

@@ -1,5 +1,5 @@
 .container {
-  @apply flex items-center justify-between border-t border-secondary px-8 py-5;
+  @apply flex items-center justify-between border-t border-secondary px-6 py-5;
 }
 
 .container:first-child {

src/components/builder/lists/triple/TripleFieldListItem.js

@@ -66,10 +66,10 @@ const TripleFieldListItem = ({
   return (
     <div className={styles.container}>
       <div className="grid">
-        <span className="font-medium">{title}</span>
-        <span className="mt-1 text-sm opacity-75">{subtitle}</span>
+        <span className="font-medium truncate">{title}</span>
+        <span className="mt-1 text-sm opacity-75 truncate">{subtitle}</span>
 
-        <span className="w-4/5 mt-6 text-sm opacity-75 truncate">{text}</span>
+        <span className="w-4/5 mt-5 text-sm opacity-75 truncate">{text}</span>
       </div>
 
       <div className={styles.menu}>

src/components/builder/lists/triple/TripleFieldListItem.module.css

@@ -1,5 +1,5 @@
 .container {
-  @apply flex items-center justify-between border-t border-secondary px-8 py-5;
+  @apply flex items-center justify-between border-t border-secondary px-6 py-5;
 }
 
 .container:first-child {

src/components/builder/sections/Awards.js

@@ -0,0 +1,28 @@
+import { get } from "lodash";
+import React from "react";
+import Heading from "../../shared/Heading";
+import List from "../lists/List";
+import TripleFieldListItem from "../lists/triple/TripleFieldListItem";
+
+const Awards = ({ id, name, event, state }) => {
+  const path = `${id}.items`;
+  const items = get(state, path, []);
+
+  return (
+    <section>
+      <Heading>{name}</Heading>
+
+      <List
+        path={path}
+        items={items}
+        event={event}
+        titlePath="title"
+        subtitlePath="awarder"
+        textPath="summary"
+        listItemComponent={TripleFieldListItem}
+      />
+    </section>
+  );
+};
+
+export default Awards;

src/components/shared/Input.js

@@ -18,6 +18,7 @@ const Input = ({
   checked,
   onChange,
   className,
+  isRequired,
   placeholder,
   onDeleteItem,
   showDeleteItemButton,
@@ -42,7 +43,13 @@ const Input = ({
   return (
     <div className={cx(styles.container, className)}>
       <label htmlFor={uuid}>
-        <span>{label}</span>
+        <span>
+          {label}{" "}
+          {isRequired && (
+            <span className="opacity-75 font-normal lowercase">(Required)</span>
+          )}
+        </span>
+
         {type === "textarea" ? (
           <div className="flex flex-col">
             <textarea

src/constants/ModalEvents.js

@@ -0,0 +1,10 @@
+const ModalEvents = {
+  AUTH_MODAL: "auth_modal",
+  CREATE_RESUME_MODAL: "create_resume_modal",
+  SOCIAL_MODAL: "social_modal",
+  WORK_MODAL: "work_modal",
+  EDUCATION_MODAL: "education_modal",
+  AWARD_MODAL: "award_modal",
+};
+
+export default ModalEvents;

src/contexts/ModalContext.js

@@ -1,17 +1,10 @@
 import { createNanoEvents } from "nanoevents";
 import React, { createContext } from "react";
-
-const MODAL_EVENTS = {
-  AUTH_MODAL: "auth_modal",
-  CREATE_RESUME_MODAL: "create_resume_modal",
-  SOCIAL_MODAL: "social_modal",
-  WORK_MODAL: "work_modal",
-  EDUCATION_MODAL: "education_modal",
-};
+import ModalEvents from "../constants/ModalEvents";
 
 const emitter = createNanoEvents();
 
-const defaultState = { events: MODAL_EVENTS, emitter };
+const defaultState = { events: ModalEvents, emitter };
 
 const ModalContext = createContext(defaultState);
 
@@ -25,4 +18,4 @@ const ModalProvider = ({ children }) => {
 
 export default ModalContext;
 
-export { ModalProvider, MODAL_EVENTS };
+export { ModalProvider };

src/data/leftSections.js

@@ -1,12 +1,14 @@
 import { AiOutlineTwitter } from "react-icons/ai";
+import { FaAward } from "react-icons/fa";
 import { IoMdBriefcase, IoMdDocument } from "react-icons/io";
 import { MdPerson, MdSchool } from "react-icons/md";
+import Awards from "../components/builder/sections/Awards";
 import Education from "../components/builder/sections/Education";
 import Objective from "../components/builder/sections/Objective";
 import Profile from "../components/builder/sections/Profile";
 import Social from "../components/builder/sections/Social";
 import Work from "../components/builder/sections/Work";
-import { MODAL_EVENTS } from "../contexts/ModalContext";
+import ModalEvents from "../constants/ModalEvents";
 
 export default [
   {
@@ -20,7 +22,7 @@ export default [
     name: "Social Network",
     icon: AiOutlineTwitter,
     component: Social,
-    event: MODAL_EVENTS.SOCIAL_MODAL,
+    event: ModalEvents.SOCIAL_MODAL,
   },
   {
     id: "objective",
@@ -33,13 +35,20 @@ export default [
     name: "Work Experience",
     icon: IoMdBriefcase,
     component: Work,
-    event: MODAL_EVENTS.WORK_MODAL,
+    event: ModalEvents.WORK_MODAL,
   },
   {
     id: "education",
     name: "Education",
     icon: MdSchool,
     component: Education,
-    event: MODAL_EVENTS.EDUCATION_MODAL,
+    event: ModalEvents.EDUCATION_MODAL,
+  },
+  {
+    id: "awards",
+    name: "Awards",
+    icon: FaAward,
+    component: Awards,
+    event: ModalEvents.AWARD_MODAL,
   },
 ];

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