- complete onyx design template

- implement public sharable urls
- implement more actions

src/modals/AuthModal.js

@@ -60,7 +60,7 @@ const AuthModal = () => {
       state={[open, setOpen]}
       action={user ? loggedInAction : loggedOutAction}
     >
-      <p>{getMessage()}</p>
+      <p className="leading-loose">{getMessage()}</p>
     </BaseModal>
   );
 };

src/modals/ModalRegistrar.js

@@ -7,6 +7,7 @@ import EducationModal from './sections/EducationModal';
 import HobbyModal from './sections/HobbyModal';
 import ImportModal from './sections/ImportModal';
 import LanguageModal from './sections/LanguageModal';
+import ProjectModal from './sections/ProjectModal';
 import ReferenceModal from './sections/ReferenceModal';
 import SkillModal from './sections/SkillModal';
 import SocialModal from './sections/SocialModal';
@@ -20,6 +21,7 @@ const ModalRegistrar = () => {
       <SocialModal />
       <WorkModal />
       <EducationModal />
+      <ProjectModal />
       <AwardModal />
       <CertificateModal />
       <SkillModal />

src/modals/ResumeModal.js

@@ -55,7 +55,7 @@ const ResumeModal = () => {
             {...getFieldProps(formik, schema, 'name')}
           />
 
-          <p>
+          <p className="leading-loose">
             You are going to be creating a new resume from scratch, but first,
             let&apos;s give it a name. This can be the name of the role you want
             to apply for, or if you&apos;re making a resume for a friend, you

src/modals/sections/EducationModal.js

@@ -1,8 +1,7 @@
-import { FieldArray, Formik } from 'formik';
+import { Formik } from 'formik';
 import React, { memo } from 'react';
 import * as Yup from 'yup';
 import Input from '../../components/shared/Input';
-import InputArray from '../../components/shared/InputArray';
 import ModalEvents from '../../constants/ModalEvents';
 import { getFieldProps } from '../../utils';
 import DataModal from '../DataModal';
@@ -14,8 +13,7 @@ const initialValues = {
   gpa: '',
   startDate: '',
   endDate: '',
-  courses: [],
-  temp: '',
+  summary: '',
 };
 
 const schema = Yup.object().shape({
@@ -30,8 +28,7 @@ const schema = Yup.object().shape({
       startDate &&
       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(),
+  summary: Yup.string().min(10, 'Please enter at least 10 characters.'),
 });
 
 const EducationModal = () => {
@@ -88,18 +85,11 @@ const EducationModal = () => {
               {...getFieldProps(formik, schema, 'endDate')}
             />
 
-            <FieldArray
-              name="courses"
-              render={(helpers) => (
-                <InputArray
-                  formik={formik}
-                  schema={schema}
-                  helpers={helpers}
-                  label="Courses"
-                  path="courses"
-                  placeholder="Data Structures &amp; Algortihms"
-                />
-              )}
+            <Input
+              type="textarea"
+              label="Summary"
+              className="col-span-2"
+              {...getFieldProps(formik, schema, 'summary')}
             />
           </div>
         </DataModal>

src/modals/sections/ProjectModal.js

@@ -0,0 +1,69 @@
+import { Formik } from 'formik';
+import React, { memo } 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 = {
+  title: '',
+  link: '',
+  date: '',
+  summary: '',
+};
+
+const schema = Yup.object().shape({
+  title: Yup.string().required('This is a required field.'),
+  link: Yup.string().url('Must be a valid URL'),
+  date: Yup.date().max(new Date()),
+  summary: Yup.string(),
+});
+
+const ProjectModal = () => {
+  return (
+    <Formik
+      validateOnBlur
+      initialValues={initialValues}
+      validationSchema={schema}
+    >
+      {(formik) => (
+        <DataModal
+          name="Project"
+          path="projects.items"
+          event={ModalEvents.PROJECT_MODAL}
+        >
+          <div className="grid grid-cols-2 gap-8">
+            <Input
+              label="Title"
+              className="col-span-2"
+              placeholder="Reactive Resume"
+              {...getFieldProps(formik, schema, 'title')}
+            />
+
+            <Input
+              label="Link"
+              placeholder="https://github.com/AmruthPillai/Reactive-Resume"
+              {...getFieldProps(formik, schema, 'link')}
+            />
+
+            <Input
+              type="date"
+              label="Date"
+              {...getFieldProps(formik, schema, 'date')}
+            />
+
+            <Input
+              type="textarea"
+              label="Summary"
+              className="col-span-2"
+              {...getFieldProps(formik, schema, 'summary')}
+            />
+          </div>
+        </DataModal>
+      )}
+    </Formik>
+  );
+};
+
+export default memo(ProjectModal);

src/modals/sections/WorkModal.js

@@ -1,8 +1,7 @@
-import { FieldArray, Formik } from 'formik';
+import { Formik } from 'formik';
 import React, { memo } from 'react';
 import * as Yup from 'yup';
 import Input from '../../components/shared/Input';
-import InputArray from '../../components/shared/InputArray';
 import ModalEvents from '../../constants/ModalEvents';
 import { getFieldProps } from '../../utils';
 import DataModal from '../DataModal';
@@ -14,8 +13,6 @@ const initialValues = {
   startDate: '',
   endDate: '',
   summary: '',
-  highlights: [],
-  temp: '',
 };
 
 const schema = Yup.object().shape({
@@ -30,10 +27,6 @@ const schema = Yup.object().shape({
       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(
-    Yup.string().required('This is a required field.'),
-  ),
-  temp: Yup.string().ensure(),
 });
 
 const WorkModal = () => {
@@ -89,20 +82,6 @@ const WorkModal = () => {
               className="col-span-2"
               {...getFieldProps(formik, schema, 'summary')}
             />
-
-            <FieldArray
-              name="highlights"
-              render={(helpers) => (
-                <InputArray
-                  formik={formik}
-                  schema={schema}
-                  helpers={helpers}
-                  label="Highlights"
-                  path="highlights"
-                  placeholder="Worked passionately in customer service in a high volume restaurant."
-                />
-              )}
-            />
           </div>
         </DataModal>
       )}