- switched to useSelector

- implemented skills section

src/modals/DataModal.js

@@ -4,7 +4,7 @@ import React, { useContext, useEffect, useRef, useState } from "react";
 import { v4 as uuidv4 } from "uuid";
 import Button from "../components/shared/Button";
 import ModalContext from "../contexts/ModalContext";
-import ResumeContext from "../contexts/ResumeContext";
+import { useDispatch } from "../contexts/ResumeContext";
 import { getModalText } from "../utils";
 import BaseModal from "./BaseModal";
 
@@ -18,13 +18,13 @@ const DataModal = ({
   children,
 }) => {
   const modalRef = useRef(null);
+  const dispatch = useDispatch();
 
   const [data, setData] = useState(null);
   const [open, setOpen] = useState(false);
   const [isEditMode, setEditMode] = useState(false);
 
   const { emitter } = useContext(ModalContext);
-  const { dispatch } = useContext(ResumeContext);
   const { values, setValues, resetForm, validateForm } = useFormikContext();
 
   useEffect(() => {

src/modals/ModalRegistrar.js

@@ -4,6 +4,7 @@ import ResumeModal from "./ResumeModal";
 import AwardModal from "./sections/AwardModal";
 import CertificateModal from "./sections/CertificateModal";
 import EducationModal from "./sections/EducationModal";
+import SkillModal from "./sections/SkillModal";
 import SocialModal from "./sections/SocialModal";
 import WorkModal from "./sections/WorkModal";
 
@@ -17,6 +18,7 @@ const ModalRegistrar = () => {
       <EducationModal />
       <AwardModal />
       <CertificateModal />
+      <SkillModal />
     </Fragment>
   );
 };

src/modals/sections/SkillModal.js

@@ -0,0 +1,58 @@
+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 = {
+  name: "",
+  level: "",
+};
+
+const validationSchema = Yup.object().shape({
+  name: Yup.string().required("This is a required field."),
+  level: Yup.string().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}
+    >
+      {(formik) => (
+        <DataModal
+          name="Skill"
+          path="skills.items"
+          event={ModalEvents.SKILL_MODAL}
+        >
+          <div className="grid grid-cols-2 gap-8">
+            <Input
+              label="Name"
+              placeholder="ReactJS"
+              {...getFieldProps(formik, "name")}
+            />
+
+            <Input
+              type="select"
+              label="Level"
+              {...getFieldProps(formik, "level")}
+            />
+          </div>
+        </DataModal>
+      )}
+    </Formik>
+  );
+};
+
+export default SkillModal;