- implementing hobby, language and reference sections

- dynamic template selection

src/modals/BaseModal.js

@@ -5,7 +5,7 @@ import { isFunction } from 'lodash';
 import React, { forwardRef, useImperativeHandle } from 'react';
 import { MdClose } from 'react-icons/md';
 import Button from '../components/shared/Button';
-import { handleKeyDown } from '../utils';
+import { handleKeyUp } from '../utils';
 import styles from './BaseModal.module.css';
 
 const BaseModal = forwardRef(
@@ -38,7 +38,7 @@ const BaseModal = forwardRef(
                 size="18"
                 tabIndex="0"
                 onClick={handleClose}
-                onKeyDown={(e) => handleKeyDown(e, handleClose)}
+                onKeyUp={(e) => handleKeyUp(e, handleClose)}
               />
             </div>
 

src/modals/DataModal.js

@@ -41,7 +41,7 @@ const DataModal = ({
   }, [data]);
 
   const onSubmit = async (newData) => {
-    if (isEmpty(await validateForm(newData))) {
+    if (isEmpty(await validateForm())) {
       if (isEditMode) {
         if (data !== newData) {
           isFunction(onEdit)

src/modals/ModalRegistrar.js

@@ -4,6 +4,9 @@ import ResumeModal from './ResumeModal';
 import AwardModal from './sections/AwardModal';
 import CertificateModal from './sections/CertificateModal';
 import EducationModal from './sections/EducationModal';
+import HobbyModal from './sections/HobbyModal';
+import LanguageModal from './sections/LanguageModal';
+import ReferenceModal from './sections/ReferenceModal';
 import SkillModal from './sections/SkillModal';
 import SocialModal from './sections/SocialModal';
 import WorkModal from './sections/WorkModal';
@@ -19,6 +22,9 @@ const ModalRegistrar = () => {
       <AwardModal />
       <CertificateModal />
       <SkillModal />
+      <HobbyModal />
+      <LanguageModal />
+      <ReferenceModal />
     </>
   );
 };

src/modals/ResumeModal.js

@@ -1,17 +1,17 @@
 import { Formik } from 'formik';
-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 { getFieldProps } from '../utils';
 import DataModal from './DataModal';
 
 const initialValues = {
   name: '',
 };
 
-const validationSchema = Yup.object().shape({
+const schema = Yup.object().shape({
   name: Yup.string()
     .min(5, 'Please enter at least 5 characters.')
     .required('This is a required field.'),
@@ -20,18 +20,11 @@ const validationSchema = Yup.object().shape({
 const ResumeModal = () => {
   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),
-  });
-
   return (
     <Formik
       validateOnBlur
       initialValues={initialValues}
-      validationSchema={validationSchema}
+      validationSchema={schema}
     >
       {(formik) => (
         <DataModal
@@ -48,7 +41,7 @@ const ResumeModal = () => {
             label="Name"
             className="mb-8"
             placeholder="Full Stack Web Developer"
-            {...getFieldProps(formik, 'name')}
+            {...getFieldProps(formik, schema, 'name')}
           />
 
           <p>

src/modals/sections/AwardModal.js

@@ -1,9 +1,9 @@
 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 { getFieldProps } from '../../utils';
 import DataModal from '../DataModal';
 
 const initialValues = {
@@ -13,7 +13,7 @@ const initialValues = {
   summary: '',
 };
 
-const validationSchema = Yup.object().shape({
+const schema = 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()),
@@ -21,18 +21,11 @@ const validationSchema = Yup.object().shape({
 });
 
 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}
+      validationSchema={schema}
     >
       {(formik) => (
         <DataModal
@@ -45,26 +38,26 @@ const AwardModal = () => {
               label="Title"
               className="col-span-2"
               placeholder="Intl. Flutter Hackathon '19"
-              {...getFieldProps(formik, 'title')}
+              {...getFieldProps(formik, schema, 'title')}
             />
 
             <Input
               label="Awarder"
               placeholder="Google"
-              {...getFieldProps(formik, 'awarder')}
+              {...getFieldProps(formik, schema, 'awarder')}
             />
 
             <Input
               type="date"
               label="Date"
-              {...getFieldProps(formik, 'date')}
+              {...getFieldProps(formik, schema, 'date')}
             />
 
             <Input
               type="textarea"
               label="Summary"
               className="col-span-2"
-              {...getFieldProps(formik, 'summary')}
+              {...getFieldProps(formik, schema, 'summary')}
             />
           </div>
         </DataModal>

src/modals/sections/CertificateModal.js

@@ -1,9 +1,9 @@
 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 { getFieldProps } from '../../utils';
 import DataModal from '../DataModal';
 
 const initialValues = {
@@ -13,7 +13,7 @@ const initialValues = {
   summary: '',
 };
 
-const validationSchema = Yup.object().shape({
+const schema = Yup.object().shape({
   title: Yup.string().required('This is a required field.'),
   issuer: Yup.string().required('This is a required field.'),
   date: Yup.date().max(new Date()),
@@ -21,18 +21,11 @@ const validationSchema = Yup.object().shape({
 });
 
 const CertificateModal = () => {
-  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}
+      validationSchema={schema}
     >
       {(formik) => (
         <DataModal
@@ -45,26 +38,26 @@ const CertificateModal = () => {
               label="Title"
               className="col-span-2"
               placeholder="CCNP"
-              {...getFieldProps(formik, 'title')}
+              {...getFieldProps(formik, schema, 'title')}
             />
 
             <Input
               label="Issuer"
               placeholder="Cisco Systems"
-              {...getFieldProps(formik, 'issuer')}
+              {...getFieldProps(formik, schema, 'issuer')}
             />
 
             <Input
               type="date"
               label="Date"
-              {...getFieldProps(formik, 'date')}
+              {...getFieldProps(formik, schema, 'date')}
             />
 
             <Input
               type="textarea"
               label="Summary"
               className="col-span-2"
-              {...getFieldProps(formik, 'summary')}
+              {...getFieldProps(formik, schema, 'summary')}
             />
           </div>
         </DataModal>

src/modals/sections/EducationModal.js

@@ -1,11 +1,10 @@
 import { Field, FieldArray, Formik } from 'formik';
-import { get } from 'lodash';
 import React from 'react';
 import { MdAdd } from 'react-icons/md';
 import * as Yup from 'yup';
 import Input from '../../components/shared/Input';
 import ModalEvents from '../../constants/ModalEvents';
-import { handleKeyDown } from '../../utils';
+import { getFieldProps, handleKeyUp } from '../../utils';
 import DataModal from '../DataModal';
 
 const initialValues = {
@@ -19,7 +18,7 @@ const initialValues = {
   temp: '',
 };
 
-const validationSchema = Yup.object().shape({
+const schema = Yup.object().shape({
   institution: Yup.string().required('This is a required field.'),
   field: Yup.string().required('This is a required field.'),
   degree: Yup.string(),
@@ -27,27 +26,20 @@ const validationSchema = Yup.object().shape({
   startDate: Yup.date().required('This is a required field.'),
   endDate: Yup.date().when(
     'startDate',
-    (startDate, schema) =>
+    (startDate, yupSchema) =>
       startDate &&
-      schema.min(startDate, 'End Date must be later than Start Date'),
+      yupSchema.min(startDate, 'End Date must be later than Start Date'),
   ),
   courses: Yup.array().of(Yup.string().required('This is a required field.')),
   temp: Yup.string().ensure(),
 });
 
 const EducationModal = () => {
-  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}
+      validationSchema={schema}
     >
       {(formik) => (
         <DataModal
@@ -60,40 +52,40 @@ const EducationModal = () => {
               label="Institution"
               className="col-span-2"
               placeholder="Dayananda Sagar College of Engineering"
-              {...getFieldProps(formik, 'institution')}
+              {...getFieldProps(formik, schema, 'institution')}
             />
 
             <Input
               label="Field of Study"
               className="col-span-2"
               placeholder="Computer Science &amp; Engineering"
-              {...getFieldProps(formik, 'field')}
+              {...getFieldProps(formik, schema, 'field')}
             />
 
             <Input
               label="Degree Type"
               placeholder="Bachelor's Degree"
-              {...getFieldProps(formik, 'degree')}
+              {...getFieldProps(formik, schema, 'degree')}
             />
 
             <Input
               label="GPA"
               placeholder="8.8"
-              {...getFieldProps(formik, 'gpa')}
+              {...getFieldProps(formik, schema, 'gpa')}
             />
 
             <Input
               type="date"
               label="Start Date"
               placeholder="6th August 208"
-              {...getFieldProps(formik, 'startDate')}
+              {...getFieldProps(formik, schema, 'startDate')}
             />
 
             <Input
               type="date"
               label="End Date"
               placeholder="6th August 208"
-              {...getFieldProps(formik, 'endDate')}
+              {...getFieldProps(formik, schema, 'endDate')}
             />
 
             <FieldArray
@@ -127,13 +119,13 @@ const EducationModal = () => {
                       <div className="flex items-center">
                         <Input
                           placeholder="Algorithms &amp; Data Structures"
-                          {...getFieldProps(formik, 'temp')}
+                          {...getFieldProps(formik, schema, 'temp')}
                         />
                         <MdAdd
                           size="18px"
                           tabIndex="0"
                           className="mx-4 cursor-pointer opacity-50 hover:opacity-75"
-                          onKeyDown={(e) => handleKeyDown(e, handleClickAdd)}
+                          onKeyUp={(e) => handleKeyUp(e, handleClickAdd)}
                           onClick={handleClickAdd}
                         />
                       </div>

src/modals/sections/HobbyModal.js

@@ -0,0 +1,44 @@
+import { Formik } from 'formik';
+import React from 'react';
+import * as Yup from 'yup';
+import Input from '../../components/shared/Input';
+import ModalEvents from '../../constants/ModalEvents';
+import { getFieldProps } from '../../utils';
+import DataModal from '../DataModal';
+
+const initialValues = {
+  name: '',
+};
+
+const schema = Yup.object().shape({
+  name: Yup.string().required('This is a required field.'),
+});
+
+const HobbyModal = () => {
+  return (
+    <Formik
+      validateOnBlur
+      initialValues={initialValues}
+      validationSchema={schema}
+    >
+      {(formik) => (
+        <DataModal
+          name="Hobby"
+          path="hobbies.items"
+          event={ModalEvents.HOBBY_MODAL}
+        >
+          <div className="grid grid-cols-2 gap-8">
+            <Input
+              label="Name"
+              placeholder="Fishing"
+              className="col-span-2"
+              {...getFieldProps(formik, schema, 'name')}
+            />
+          </div>
+        </DataModal>
+      )}
+    </Formik>
+  );
+};
+
+export default HobbyModal;

src/modals/sections/LanguageModal.js

@@ -0,0 +1,51 @@
+import { Formik } from 'formik';
+import React from 'react';
+import * as Yup from 'yup';
+import Input from '../../components/shared/Input';
+import ModalEvents from '../../constants/ModalEvents';
+import { getFieldProps } from '../../utils';
+import DataModal from '../DataModal';
+
+const initialValues = {
+  name: '',
+  fluency: '',
+};
+
+const schema = Yup.object().shape({
+  name: Yup.string().required('This is a required field.'),
+  fluency: Yup.string().required('This is a required field.'),
+});
+
+const LanguageModal = () => {
+  return (
+    <Formik
+      validateOnBlur
+      initialValues={initialValues}
+      validationSchema={schema}
+    >
+      {(formik) => (
+        <DataModal
+          name="Language"
+          path="languages.items"
+          event={ModalEvents.LANGUAGE_MODAL}
+        >
+          <div className="grid grid-cols-2 gap-8">
+            <Input
+              label="Name"
+              placeholder="German"
+              {...getFieldProps(formik, schema, 'name')}
+            />
+
+            <Input
+              label="Fluency"
+              placeholder="Native/B1"
+              {...getFieldProps(formik, schema, 'fluency')}
+            />
+          </div>
+        </DataModal>
+      )}
+    </Formik>
+  );
+};
+
+export default LanguageModal;

src/modals/sections/ReferenceModal.js

@@ -0,0 +1,76 @@
+import { Formik } from 'formik';
+import React from 'react';
+import * as Yup from 'yup';
+import Input from '../../components/shared/Input';
+import ModalEvents from '../../constants/ModalEvents';
+import { getFieldProps } from '../../utils';
+import DataModal from '../DataModal';
+
+const initialValues = {
+  name: '',
+  position: '',
+  contact: '',
+  email: '',
+  summary: '',
+};
+
+const schema = Yup.object().shape({
+  name: Yup.string().required('This is a required field.'),
+  position: Yup.string().required('This is a required field.'),
+  contact: Yup.string(),
+  email: Yup.string().email('Must be a valid email address.'),
+  summary: Yup.string(),
+});
+
+const ReferenceModal = () => {
+  return (
+    <Formik
+      validateOnBlur
+      initialValues={initialValues}
+      validationSchema={schema}
+    >
+      {(formik) => (
+        <DataModal
+          name="Reference"
+          path="references.items"
+          event={ModalEvents.REFERENCE_MODAL}
+        >
+          <div className="grid grid-cols-2 gap-8">
+            <Input
+              label="Name"
+              placeholder="Jane Doe"
+              {...getFieldProps(formik, schema, 'name')}
+            />
+
+            <Input
+              label="position"
+              placeholder="Assistant Manager"
+              {...getFieldProps(formik, schema, 'position')}
+            />
+
+            <Input
+              label="Phone Number"
+              placeholder="+1 (708) 756-6065"
+              {...getFieldProps(formik, schema, 'contact')}
+            />
+
+            <Input
+              label="Email Address"
+              placeholder="janedoe@example.com"
+              {...getFieldProps(formik, schema, 'email')}
+            />
+
+            <Input
+              type="textarea"
+              label="Summary"
+              className="col-span-2"
+              {...getFieldProps(formik, schema, 'summary')}
+            />
+          </div>
+        </DataModal>
+      )}
+    </Formik>
+  );
+};
+
+export default ReferenceModal;

src/modals/sections/SkillModal.js

@@ -1,34 +1,37 @@
 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 { getFieldProps } from '../../utils';
 import DataModal from '../DataModal';
 
+const SKILL_LEVELS = [
+  'Fundamental Awareness',
+  'Novice',
+  'Intermediate',
+  'Advanced',
+  'Expert',
+];
+
 const initialValues = {
   name: '',
-  level: '',
+  level: SKILL_LEVELS[0],
 };
 
-const validationSchema = Yup.object().shape({
+const schema = Yup.object().shape({
   name: Yup.string().required('This is a required field.'),
-  level: Yup.string().required('This is a required field.'),
+  level: Yup.string()
+    .oneOf(SKILL_LEVELS, 'Must be one of the options above.')
+    .required('This is a required field.'),
 });
 
 const SkillModal = () => {
-  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}
+      validationSchema={schema}
     >
       {(formik) => (
         <DataModal
@@ -40,13 +43,14 @@ const SkillModal = () => {
             <Input
               label="Name"
               placeholder="ReactJS"
-              {...getFieldProps(formik, 'name')}
+              {...getFieldProps(formik, schema, 'name')}
             />
 
             <Input
-              type="select"
               label="Level"
-              {...getFieldProps(formik, 'level')}
+              type="dropdown"
+              options={SKILL_LEVELS}
+              {...getFieldProps(formik, schema, 'level')}
             />
           </div>
         </DataModal>

src/modals/sections/SocialModal.js

@@ -1,9 +1,9 @@
 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 { getFieldProps } from '../../utils';
 import DataModal from '../DataModal';
 
 const initialValues = {
@@ -12,7 +12,7 @@ const initialValues = {
   username: '',
 };
 
-const validationSchema = Yup.object().shape({
+const schema = Yup.object().shape({
   network: Yup.string()
     .min(5, 'Please enter at least 5 characters.')
     .required('This is a required field.'),
@@ -24,18 +24,11 @@ const validationSchema = Yup.object().shape({
 });
 
 const SocialModal = () => {
-  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}
+      validationSchema={schema}
     >
       {(formik) => (
         <DataModal
@@ -47,20 +40,20 @@ const SocialModal = () => {
             <Input
               label="Network"
               placeholder="Twitter"
-              {...getFieldProps(formik, 'network')}
+              {...getFieldProps(formik, schema, 'network')}
             />
 
             <Input
               label="Username"
               placeholder="KingOKings"
-              {...getFieldProps(formik, 'username')}
+              {...getFieldProps(formik, schema, 'username')}
             />
 
             <Input
               label="URL"
               className="col-span-2"
               placeholder="https://twitter.com/KingOKings"
-              {...getFieldProps(formik, 'url')}
+              {...getFieldProps(formik, schema, 'url')}
             />
           </div>
         </DataModal>

src/modals/sections/WorkModal.js

@@ -1,11 +1,10 @@
 import { Field, FieldArray, Formik } from 'formik';
-import { get } from 'lodash';
 import React from 'react';
 import { MdAdd } from 'react-icons/md';
 import * as Yup from 'yup';
 import Input from '../../components/shared/Input';
 import ModalEvents from '../../constants/ModalEvents';
-import { handleKeyDown } from '../../utils';
+import { getFieldProps, handleKeyUp } from '../../utils';
 import DataModal from '../DataModal';
 
 const initialValues = {
@@ -19,16 +18,16 @@ const initialValues = {
   temp: '',
 };
 
-const validationSchema = Yup.object().shape({
+const schema = Yup.object().shape({
   company: Yup.string().required('This is a required field.'),
   position: Yup.string().required('This is a required field.'),
   website: Yup.string().url('Must be a valid URL'),
   startDate: Yup.date().required('This is a required field.'),
   endDate: Yup.date().when(
     'startDate',
-    (startDate, schema) =>
+    (startDate, yupSchema) =>
       startDate &&
-      schema.min(startDate, 'End Date must be later than Start Date'),
+      yupSchema.min(startDate, 'End Date must be later than Start Date'),
   ),
   summary: Yup.string().min(10, 'Please enter at least 10 characters.'),
   highlights: Yup.array().of(
@@ -38,18 +37,11 @@ const validationSchema = Yup.object().shape({
 });
 
 const WorkModal = () => {
-  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}
+      validationSchema={schema}
     >
       {(formik) => (
         <DataModal
@@ -62,40 +54,40 @@ const WorkModal = () => {
               label="Company"
               className="col-span-2"
               placeholder="Postdot Technologies Pvt. Ltd."
-              {...getFieldProps(formik, 'company')}
+              {...getFieldProps(formik, schema, 'company')}
             />
 
             <Input
               label="Position"
               placeholder="Full Stack Web Developer"
-              {...getFieldProps(formik, 'position')}
+              {...getFieldProps(formik, schema, 'position')}
             />
 
             <Input
               label="Website"
               placeholder="https://example.com/"
-              {...getFieldProps(formik, 'website')}
+              {...getFieldProps(formik, schema, 'website')}
             />
 
             <Input
               type="date"
               label="Start Date"
               placeholder="6th August 208"
-              {...getFieldProps(formik, 'startDate')}
+              {...getFieldProps(formik, schema, 'startDate')}
             />
 
             <Input
               type="date"
               label="End Date"
               placeholder="6th August 208"
-              {...getFieldProps(formik, 'endDate')}
+              {...getFieldProps(formik, schema, 'endDate')}
             />
 
             <Input
               type="textarea"
               label="Summary"
               className="col-span-2"
-              {...getFieldProps(formik, 'summary')}
+              {...getFieldProps(formik, schema, 'summary')}
             />
 
             <FieldArray
@@ -129,13 +121,13 @@ const WorkModal = () => {
                       <div className="flex items-center">
                         <Input
                           placeholder="Worked passionately in customer service in a high volume restaurant."
-                          {...getFieldProps(formik, 'temp')}
+                          {...getFieldProps(formik, schema, 'temp')}
                         />
                         <MdAdd
                           size="18px"
                           tabIndex="0"
                           className="mx-4 cursor-pointer opacity-50 hover:opacity-75"
-                          onKeyDown={(e) => handleKeyDown(e, handleClickAdd)}
+                          onKeyUp={(e) => handleKeyUp(e, handleClickAdd)}
                           onClick={handleClickAdd}
                         />
                       </div>