@@ -103,4 +108,4 @@ const TripleFieldListItem = ({
);
};
-export default TripleFieldListItem;
+export default ListItem;
diff --git a/src/components/builder/lists/double/DoubleFieldListItem.module.css b/src/components/builder/lists/ListItem.module.css
similarity index 100%
rename from src/components/builder/lists/double/DoubleFieldListItem.module.css
rename to src/components/builder/lists/ListItem.module.css
diff --git a/src/components/builder/lists/double/DoubleFieldListItem.js b/src/components/builder/lists/double/DoubleFieldListItem.js
deleted file mode 100644
index 6ffa2d9d..00000000
--- a/src/components/builder/lists/double/DoubleFieldListItem.js
+++ /dev/null
@@ -1,103 +0,0 @@
-import { Menu, MenuItem } from "@material-ui/core";
-import React, { useContext, useState } from "react";
-import { IoIosArrowDown, IoIosArrowUp } from "react-icons/io";
-import { MdMoreVert } from "react-icons/md";
-import ResumeContext from "../../../../contexts/ResumeContext";
-import styles from "./DoubleFieldListItem.module.css";
-
-const DoubleFieldListItem = ({
- title,
- subtitle,
- path,
- data,
- isFirst,
- isLast,
- onEdit,
-}) => {
- const [anchorEl, setAnchorEl] = useState(null);
- const { dispatch } = useContext(ResumeContext);
-
- const handleClick = (event) => setAnchorEl(event.currentTarget);
-
- const handleClose = () => setAnchorEl(null);
-
- const handleEdit = () => {
- onEdit();
- handleClose();
- };
-
- const handleMoveUp = () => {
- dispatch({
- type: "on_move_item_up",
- payload: {
- path,
- value: data,
- },
- });
-
- handleClose();
- };
-
- const handleMoveDown = () => {
- dispatch({
- type: "on_move_item_down",
- payload: {
- path,
- value: data,
- },
- });
-
- handleClose();
- };
-
- const handleDelete = () => {
- dispatch({
- type: "on_delete_item",
- payload: {
- path,
- value: data,
- },
- });
-
- handleClose();
- };
-
- return (
-
-
- {title}
- {subtitle}
-
-
-
-
-
-
-
- );
-};
-
-export default DoubleFieldListItem;
diff --git a/src/components/builder/lists/triple/TripleFieldListItem.module.css b/src/components/builder/lists/triple/TripleFieldListItem.module.css
deleted file mode 100644
index 85034a75..00000000
--- a/src/components/builder/lists/triple/TripleFieldListItem.module.css
+++ /dev/null
@@ -1,17 +0,0 @@
-.container {
- @apply flex items-center justify-between border-t border-secondary px-6 py-5;
-}
-
-.container:first-child {
- @apply border-t-0;
-}
-
-.menu {
- @apply opacity-0;
- @apply transition-opacity duration-200 ease-in-out;
-}
-
-.container:hover .menu {
- @apply opacity-100;
- @apply transition-opacity duration-200 ease-in-out;
-}
diff --git a/src/components/builder/sections/Awards.js b/src/components/builder/sections/Awards.js
index 45f8efe3..49b5100e 100644
--- a/src/components/builder/sections/Awards.js
+++ b/src/components/builder/sections/Awards.js
@@ -2,7 +2,6 @@ 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`;
@@ -19,7 +18,6 @@ const Awards = ({ id, name, event, state }) => {
titlePath="title"
subtitlePath="awarder"
textPath="summary"
- listItemComponent={TripleFieldListItem}
/>
);
diff --git a/src/components/builder/sections/Certifications.js b/src/components/builder/sections/Certifications.js
new file mode 100644
index 00000000..e11557b6
--- /dev/null
+++ b/src/components/builder/sections/Certifications.js
@@ -0,0 +1,26 @@
+import { get } from "lodash";
+import React from "react";
+import Heading from "../../shared/Heading";
+import List from "../lists/List";
+
+const Certifications = ({ id, name, event, state }) => {
+ const path = `${id}.items`;
+ const items = get(state, path, []);
+
+ return (
+
+ );
+};
+
+export default Certifications;
diff --git a/src/components/builder/sections/Education.js b/src/components/builder/sections/Education.js
index 23a906dc..3ddd7cf8 100644
--- a/src/components/builder/sections/Education.js
+++ b/src/components/builder/sections/Education.js
@@ -2,7 +2,6 @@ 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 Education = ({ id, name, event, state }) => {
const path = `${id}.items`;
@@ -18,7 +17,6 @@ const Education = ({ id, name, event, state }) => {
event={event}
titlePath="institution"
textPath="field"
- listItemComponent={TripleFieldListItem}
/>
);
diff --git a/src/components/builder/sections/Social.js b/src/components/builder/sections/Social.js
index a734e8c0..dd5c7839 100644
--- a/src/components/builder/sections/Social.js
+++ b/src/components/builder/sections/Social.js
@@ -1,7 +1,6 @@
import { get } from "lodash";
import React from "react";
import Heading from "../../shared/Heading";
-import DoubleFieldListItem from "../lists/double/DoubleFieldListItem";
import List from "../lists/List";
const Social = ({ id, name, event, state }) => {
@@ -18,7 +17,6 @@ const Social = ({ id, name, event, state }) => {
event={event}
titlePath="network"
subtitlePath="username"
- listItemComponent={DoubleFieldListItem}
/>
);
diff --git a/src/components/builder/sections/Work.js b/src/components/builder/sections/Work.js
index cbbfc99e..e6e5ba75 100644
--- a/src/components/builder/sections/Work.js
+++ b/src/components/builder/sections/Work.js
@@ -2,7 +2,6 @@ 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 Work = ({ id, name, event, state }) => {
const path = `${id}.items`;
@@ -18,7 +17,6 @@ const Work = ({ id, name, event, state }) => {
event={event}
titlePath="company"
textPath="summary"
- listItemComponent={TripleFieldListItem}
/>
);
diff --git a/src/constants/ModalEvents.js b/src/constants/ModalEvents.js
index a9411ef0..43623145 100644
--- a/src/constants/ModalEvents.js
+++ b/src/constants/ModalEvents.js
@@ -5,6 +5,7 @@ const ModalEvents = {
WORK_MODAL: "work_modal",
EDUCATION_MODAL: "education_modal",
AWARD_MODAL: "award_modal",
+ CERTIFICATION_MODAL: "certification_modal",
};
export default ModalEvents;
diff --git a/src/data/leftSections.js b/src/data/leftSections.js
index 86cd046f..b31d63ba 100644
--- a/src/data/leftSections.js
+++ b/src/data/leftSections.js
@@ -1,8 +1,9 @@
-import { AiOutlineTwitter } from "react-icons/ai";
+import { AiFillSafetyCertificate, 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 Certifications from "../components/builder/sections/Certifications";
import Education from "../components/builder/sections/Education";
import Objective from "../components/builder/sections/Objective";
import Profile from "../components/builder/sections/Profile";
@@ -51,4 +52,11 @@ export default [
component: Awards,
event: ModalEvents.AWARD_MODAL,
},
+ {
+ id: "certifications",
+ name: "Certifications",
+ icon: AiFillSafetyCertificate,
+ component: Certifications,
+ event: ModalEvents.CERTIFICATION_MODAL,
+ },
];
diff --git a/src/modals/ModalRegistrar.js b/src/modals/ModalRegistrar.js
index 4033aab8..85c78b31 100644
--- a/src/modals/ModalRegistrar.js
+++ b/src/modals/ModalRegistrar.js
@@ -2,6 +2,7 @@ import React, { Fragment } from "react";
import AuthModal from "./AuthModal";
import ResumeModal from "./ResumeModal";
import AwardModal from "./sections/AwardModal";
+import CertificateModal from "./sections/CertificateModal";
import EducationModal from "./sections/EducationModal";
import SocialModal from "./sections/SocialModal";
import WorkModal from "./sections/WorkModal";
@@ -15,6 +16,7 @@ const ModalRegistrar = () => {
+
);
};
diff --git a/src/modals/sections/AwardModal.js b/src/modals/sections/AwardModal.js
index 059aeef1..6b4f6555 100644
--- a/src/modals/sections/AwardModal.js
+++ b/src/modals/sections/AwardModal.js
@@ -36,8 +36,8 @@ const AwardModal = () => {
>
{(formik) => (
diff --git a/src/modals/sections/CertificateModal.js b/src/modals/sections/CertificateModal.js
new file mode 100644
index 00000000..70720ec4
--- /dev/null
+++ b/src/modals/sections/CertificateModal.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: "",
+ issuer: "",
+ date: "",
+ summary: "",
+};
+
+const validationSchema = 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()),
+ summary: Yup.string(),
+});
+
+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) => (
+
+
+
+
+
+
+
+
+
+
+
+ )}
+
+ );
+};
+
+export default CertificateModal;
diff --git a/src/modals/sections/EducationModal.js b/src/modals/sections/EducationModal.js
index b9d419d0..40910e7c 100644
--- a/src/modals/sections/EducationModal.js
+++ b/src/modals/sections/EducationModal.js
@@ -51,8 +51,8 @@ const EducationModal = () => {
>
{(formik) => (