diff --git a/src/components/builder/lists/List.js b/src/components/builder/lists/List.js index a659e8d6..447a5a91 100644 --- a/src/components/builder/lists/List.js +++ b/src/components/builder/lists/List.js @@ -6,6 +6,7 @@ import ModalContext from "../../../contexts/ModalContext"; import Button from "../../shared/Button"; import EmptyList from "./EmptyList"; import styles from "./List.module.css"; +import ListItem from "./ListItem"; const List = ({ path, @@ -17,7 +18,6 @@ const List = ({ text, textPath, event, - listItemComponent: ListItemComponent, }) => { const { emitter } = useContext(ModalContext); @@ -39,7 +39,7 @@ const List = ({ ) : ( items.map((x, i) => ( -
{title} - {subtitle} - {text} + {subtitle && ( + {subtitle} + )} + + {text && ( + {text} + )}
@@ -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} -
- -
- - -
- - - - - - -
- Edit - - Delete - -
-
-
- ); -}; - -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 ( +
+ {name} + + +
+ ); +}; + +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) => (