- switched to useSelector

- implemented skills section

src/components/builder/center/Artboard.js

@@ -1,22 +1,20 @@
 import React, { useContext } from "react";
 import { Helmet } from "react-helmet";
-import ResumeContext from "../../../contexts/ResumeContext";
+import { useSelector } from "../../../contexts/ResumeContext";
 import TemplateContext from "../../../contexts/TemplateContext";
 import Onyx from "../../../templates/Onyx";
 import styles from "./Artboard.module.css";
 
 const Artboard = () => {
   const { blocks, colors } = useContext(TemplateContext);
-  const { state } = useContext(ResumeContext);
+  const state = useSelector((state) => state),
+    { id, name } = state;
 
   return (
     <div>
       <Helmet>
-        <title>{state.name} | Reactive Resume</title>
+        <title>{name} | Reactive Resume</title>
-        <link
+        <link rel="canonical" href={`https://rxresu.me/app/builder/${id}`} />
-          rel="canonical"
-          href={`https://rxresu.me/app/builder/${state.id}`}
-        />
       </Helmet>
 
       <div id="artboard" className={styles.container}>

src/components/builder/left/LeftSidebar.js

@@ -1,12 +1,9 @@
-import React, { Fragment, useContext } from "react";
+import React, { Fragment } from "react";
-import ResumeContext from "../../../contexts/ResumeContext";
 import sections from "../../../data/leftSections";
 import LeftNavbar from "./LeftNavbar";
 import styles from "./LeftSidebar.module.css";
 
 const LeftSidebar = () => {
-  const { state } = useContext(ResumeContext);
-
   return (
     <div className="flex">
       <LeftNavbar />
@@ -14,7 +11,7 @@ const LeftSidebar = () => {
       <div className={styles.container}>
         {sections.map(({ id, name, event, component: Component }) => (
           <Fragment key={id}>
-            <Component id={id} name={name} event={event} state={state} />
+            <Component id={id} name={name} event={event} />
             <hr />
           </Fragment>
         ))}

src/components/builder/lists/List.js

@@ -3,6 +3,7 @@ import moment from "moment";
 import React, { useContext } from "react";
 import { MdAdd } from "react-icons/md";
 import ModalContext from "../../../contexts/ModalContext";
+import { useSelector } from "../../../contexts/ResumeContext";
 import Button from "../../shared/Button";
 import EmptyList from "./EmptyList";
 import styles from "./List.module.css";
@@ -10,7 +11,6 @@ import ListItem from "./ListItem";
 
 const List = ({
   path,
-  items,
   title,
   titlePath,
   subtitle,
@@ -19,6 +19,7 @@ const List = ({
   textPath,
   event,
 }) => {
+  const items = useSelector((state) => get(state, path, []));
   const { emitter } = useContext(ModalContext);
 
   const handleAdd = () => emitter.emit(event);

src/components/builder/lists/ListItem.js

@@ -1,8 +1,8 @@
 import { Menu, MenuItem } from "@material-ui/core";
-import React, { useContext, useState } from "react";
+import React, { useState } from "react";
 import { IoIosArrowDown, IoIosArrowUp } from "react-icons/io";
 import { MdMoreVert } from "react-icons/md";
-import ResumeContext from "../../../contexts/ResumeContext";
+import { useDispatch } from "../../../contexts/ResumeContext";
 import styles from "./ListItem.module.css";
 
 const ListItem = ({
@@ -16,7 +16,7 @@ const ListItem = ({
   onEdit,
 }) => {
   const [anchorEl, setAnchorEl] = useState(null);
-  const { dispatch } = useContext(ResumeContext);
+  const dispatch = useDispatch();
 
   const handleClick = (event) => setAnchorEl(event.currentTarget);
 

src/components/builder/sections/Awards.js

@@ -1,11 +1,9 @@
-import { get } from "lodash";
 import React from "react";
 import Heading from "../../shared/Heading";
 import List from "../lists/List";
 
 const Awards = ({ id, name, event, state }) => {
   const path = `${id}.items`;
-  const items = get(state, path, []);
 
   return (
     <section>
@@ -13,7 +11,6 @@ const Awards = ({ id, name, event, state }) => {
 
       <List
         path={path}
-        items={items}
         event={event}
         titlePath="title"
         subtitlePath="awarder"

src/components/builder/sections/Certifications.js

@@ -1,11 +1,9 @@
-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 (
     <section>
@@ -13,7 +11,6 @@ const Certifications = ({ id, name, event, state }) => {
 
       <List
         path={path}
-        items={items}
         event={event}
         titlePath="title"
         subtitlePath="issuer"

src/components/builder/sections/Education.js

@@ -1,11 +1,9 @@
-import { get } from "lodash";
 import React from "react";
 import Heading from "../../shared/Heading";
 import List from "../lists/List";
 
 const Education = ({ id, name, event, state }) => {
   const path = `${id}.items`;
-  const items = get(state, path, []);
 
   return (
     <section>
@@ -13,7 +11,6 @@ const Education = ({ id, name, event, state }) => {
 
       <List
         path={path}
-        items={items}
         event={event}
         titlePath="institution"
         textPath="field"

src/components/builder/sections/Profile.js

@@ -1,69 +1,45 @@
-import React, { useContext, useRef } from "react";
+import React from "react";
-import { MdFileUpload } from "react-icons/md";
-import StorageContext from "../../../contexts/StorageContext";
-import { handleKeyDown } from "../../../utils";
 import Heading from "../../shared/Heading";
 import Input from "../../shared/Input";
-import styles from "./Profile.module.css";
+import PhotoUpload from "../../shared/PhotoUpload";
 
 const Profile = () => {
-  const fileInputRef = useRef(null);
-  const { uploadPhotograph } = useContext(StorageContext);
-
-  const handleIconClick = () => {
-    fileInputRef.current.click();
-  };
-
-  const handleImageUpload = (e) => {
-    const file = e.target.files[0];
-    uploadPhotograph(file);
-  };
-
   return (
     <section>
       <Heading>Profile</Heading>
-      <div className="flex items-center">
+
-        <div
+      <PhotoUpload />
-          role="button"
+
-          tabIndex="0"
+      <div className="grid grid-cols-2 gap-6">
-          className={styles.circle}
+        <Input name="firstName" label="First Name" path="profile.firstName" />
-          onClick={handleIconClick}
+        <Input name="lastName" label="Last Name" path="profile.lastName" />
-          onKeyDown={(e) => handleKeyDown(e, handleIconClick)}
+      </div>
-        >
+
-          <MdFileUpload size="22px" />
+      <Input name="subtitle" label="Subtitle" path="profile.subtitle" />
-          <input
+
-            type="file"
+      <hr />
-            ref={fileInputRef}
+
-            className="hidden"
+      <Input
-            onChange={handleImageUpload}
+        name="addressLine1"
+        label="Address Line 1"
+        path="profile.address.line1"
+      />
+      <Input
+        name="addressLine2"
+        label="Address Line 2"
+        path="profile.address.line2"
       />
-        </div>
-
-        <Input label="Photograph" className="pl-6" path="profile.photograph" />
-      </div>
 
       <div className="grid grid-cols-2 gap-6">
-        <Input label="First Name" path="profile.firstName" />
+        <Input name="city" label="City" path="profile.address.city" />
-        <Input label="Last Name" path="profile.lastName" />
+        <Input name="pincode" label="Pincode" path="profile.address.pincode" />
-      </div>
-
-      <Input label="Subtitle" path="profile.subtitle" />
-
-      <hr />
-
-      <Input label="Address Line 1" path="profile.address.line1" />
-      <Input label="Address Line 2" path="profile.address.line2" />
-
-      <div className="grid grid-cols-2 gap-6">
-        <Input label="City" path="profile.address.city" />
-        <Input label="Pincode" path="profile.address.pincode" />
       </div>
 
       <hr />
 
-      <Input label="Phone Number" path="profile.phone" />
+      <Input name="phone" label="Phone Number" path="profile.phone" />
-      <Input label="Website" path="profile.website" />
+      <Input name="website" label="Website" path="profile.website" />
-      <Input label="Email Address" path="profile.email" />
+      <Input name="email" label="Email Address" path="profile.email" />
     </section>
   );
 };

src/components/builder/sections/Skills.js

@@ -0,0 +1,17 @@
+import React from "react";
+import Heading from "../../shared/Heading";
+import List from "../lists/List";
+
+const Skills = ({ id, name, event }) => {
+  const path = `${id}.items`;
+
+  return (
+    <section>
+      <Heading>{name}</Heading>
+
+      <List path={path} event={event} titlePath="name" subtitlePath="level" />
+    </section>
+  );
+};
+
+export default Skills;

src/components/builder/sections/Social.js

@@ -1,11 +1,9 @@
-import { get } from "lodash";
 import React from "react";
 import Heading from "../../shared/Heading";
 import List from "../lists/List";
 
-const Social = ({ id, name, event, state }) => {
+const Social = ({ id, name, event }) => {
   const path = `${id}.items`;
-  const items = get(state, path, []);
 
   return (
     <section>
@@ -13,7 +11,6 @@ const Social = ({ id, name, event, state }) => {
 
       <List
         path={path}
-        items={items}
         event={event}
         titlePath="network"
         subtitlePath="username"

src/components/builder/sections/Work.js

@@ -1,23 +1,15 @@
-import { get } from "lodash";
 import React from "react";
 import Heading from "../../shared/Heading";
 import List from "../lists/List";
 
 const Work = ({ id, name, event, state }) => {
   const path = `${id}.items`;
-  const items = get(state, path, []);
 
   return (
     <section>
       <Heading>{name}</Heading>
 
-      <List
+      <List path={path} event={event} titlePath="company" textPath="summary" />
-        path={path}
-        items={items}
-        event={event}
-        titlePath="company"
-        textPath="summary"
-      />
     </section>
   );
 };

src/components/shared/Input.js

@@ -1,9 +1,9 @@
 import cx from "classnames";
 import { get, isFunction } from "lodash";
-import React, { useContext } from "react";
+import React, { useMemo } from "react";
 import { MdClose } from "react-icons/md";
 import { v4 as uuidv4 } from "uuid";
-import ResumeContext from "../../contexts/ResumeContext";
+import { useDispatch, useSelector } from "../../contexts/ResumeContext";
 import { handleKeyDown } from "../../utils";
 import styles from "./Input.module.css";
 
@@ -11,8 +11,8 @@ const Input = ({
   name,
   path,
   label,
-  value,
   error,
+  value,
   onBlur,
   touched,
   checked,
@@ -25,11 +25,13 @@ const Input = ({
   type = "text",
 }) => {
   const uuid = uuidv4();
-  const { state, dispatch } = useContext(ResumeContext);
+  const stateValue = useSelector((state) => get(state, path));
+  const dispatch = useDispatch();
 
-  const inputProps = (path) => ({
+  value = value || stateValue;
-    value: get(state, path) || "",
+  onChange = isFunction(onChange)
-    onChange: (e) => {
+    ? onChange
+    : (e) => {
         dispatch({
           type: "on_input",
           payload: {
@@ -37,20 +39,47 @@ const Input = ({
             value: e.target.value,
           },
         });
-    },
+      };
-  });
 
-  return (
+  return useMemo(
+    () => (
       <div className={cx(styles.container, className)}>
         <label htmlFor={uuid}>
           <span>
             {label}{" "}
             {isRequired && (
-            <span className="opacity-75 font-normal lowercase">(Required)</span>
+              <span className="opacity-75 font-normal lowercase">
+                (Required)
+              </span>
             )}
           </span>
 
-        {type === "textarea" ? (
+          {type === "text" && (
+            <div className="relative grid items-center">
+              <input
+                id={uuid}
+                name={name}
+                type={type}
+                value={value}
+                onBlur={onBlur}
+                checked={checked}
+                onChange={onChange}
+                placeholder={placeholder}
+              />
+
+              {showDeleteItemButton && isFunction(onDeleteItem) && (
+                <MdClose
+                  size="16px"
+                  tabIndex="0"
+                  onClick={onDeleteItem}
+                  onKeyDown={(e) => handleKeyDown(e, onDeleteItem)}
+                  className="absolute right-0 cursor-pointer opacity-50 hover:opacity-75 mx-4"
+                />
+              )}
+            </div>
+          )}
+
+          {type === "textarea" && (
             <div className="flex flex-col">
               <textarea
                 id={uuid}
@@ -62,7 +91,6 @@ const Input = ({
                 checked={checked}
                 onChange={onChange}
                 placeholder={placeholder}
-              {...(path && inputProps(path))}
               />
 
               <p className="mt-2 text-sm opacity-75">
@@ -77,34 +105,29 @@ const Input = ({
                 .
               </p>
             </div>
-        ) : (
+          )}
-          <div className="relative grid items-center">
-            <input
-              id={uuid}
-              name={name}
-              type={type}
-              value={value}
-              onBlur={onBlur}
-              checked={checked}
-              onChange={onChange}
-              placeholder={placeholder}
-              {...(path && inputProps(path))}
-            />
 
-            {showDeleteItemButton && isFunction(onDeleteItem) && (
-              <MdClose
-                size="16px"
-                tabIndex="0"
-                onClick={onDeleteItem}
-                onKeyDown={(e) => handleKeyDown(e, onDeleteItem)}
-                className="absolute right-0 cursor-pointer opacity-50 hover:opacity-75 mx-4"
-              />
-            )}
-          </div>
-        )}
           {error && touched && <p>{error}</p>}
         </label>
       </div>
+    ),
+    [
+      checked,
+      className,
+      error,
+      isRequired,
+      label,
+      name,
+      onBlur,
+      onChange,
+      onDeleteItem,
+      placeholder,
+      showDeleteItemButton,
+      touched,
+      type,
+      uuid,
+      value,
+    ]
   );
 };
 

src/components/shared/PhotoUpload.js

@@ -0,0 +1,50 @@
+import React, { useContext, useRef } from "react";
+import { MdFileUpload } from "react-icons/md";
+import StorageContext from "../../contexts/StorageContext";
+import { handleKeyDown } from "../../utils";
+import Input from "./Input";
+import styles from "./PhotoUpload.module.css";
+
+const PhotoUpload = () => {
+  const fileInputRef = useRef(null);
+  const { uploadPhotograph } = useContext(StorageContext);
+
+  const handleIconClick = () => {
+    fileInputRef.current.click();
+  };
+
+  const handleImageUpload = (e) => {
+    const file = e.target.files[0];
+    uploadPhotograph(file);
+  };
+
+  return (
+    <div className="flex items-center">
+      <div
+        role="button"
+        tabIndex="0"
+        className={styles.circle}
+        onClick={handleIconClick}
+        onKeyDown={(e) => handleKeyDown(e, handleIconClick)}
+      >
+        <MdFileUpload size="22px" />
+        <input
+          name="file"
+          type="file"
+          ref={fileInputRef}
+          className="hidden"
+          onChange={handleImageUpload}
+        />
+      </div>
+
+      <Input
+        name="photograph"
+        label="Photograph"
+        className="pl-6"
+        path="profile.photograph"
+      />
+    </div>
+  );
+};
+
+export default PhotoUpload;

src/constants/ModalEvents.js

@@ -6,6 +6,7 @@ const ModalEvents = {
   EDUCATION_MODAL: "education_modal",
   AWARD_MODAL: "award_modal",
   CERTIFICATION_MODAL: "certification_modal",
+  SKILL_MODAL: "skill_modal",
 };
 
 export default ModalEvents;

src/contexts/ResumeContext.js

@@ -86,13 +86,23 @@ const ResumeProvider = ({ children }) => {
 
   const [state, dispatch] = useReducer(memoizedReducer, initialState);
 
+  const selectValue = (callback) => callback(state);
+
   return (
-    <ResumeContext.Provider value={{ state, dispatch }}>
+    <ResumeContext.Provider value={{ selectValue, dispatch }}>
       {children}
     </ResumeContext.Provider>
   );
 };
 
-export default ResumeContext;
+const useSelector = (callback) => {
+  const { selectValue } = useContext(ResumeContext);
+  return selectValue(callback);
+};
 
-export { ResumeProvider };
+const useDispatch = () => {
+  const { dispatch } = useContext(ResumeContext);
+  return dispatch;
+};
+
+export { ResumeProvider, useSelector, useDispatch };

src/contexts/StorageContext.js

@@ -2,7 +2,7 @@ import firebase from "gatsby-plugin-firebase";
 import React, { createContext, useContext, useRef } from "react";
 import { toast } from "react-toastify";
 import { isFileImage } from "../utils";
-import ResumeContext from "./ResumeContext";
+import { useDispatch, useSelector } from "./ResumeContext";
 import UserContext from "./UserContext";
 
 const defaultState = {
@@ -15,7 +15,9 @@ const StorageProvider = ({ children }) => {
   const toastId = useRef(null);
 
   const { user } = useContext(UserContext);
-  const { state, dispatch } = useContext(ResumeContext);
+
+  const id = useSelector((state) => state.id);
+  const dispatch = useDispatch();
 
   const uploadPhotograph = async (file) => {
     if (!isFileImage(file)) {
@@ -27,7 +29,7 @@ const StorageProvider = ({ children }) => {
 
     const uploadTask = firebase
       .storage()
-      .ref(`/users/${user.uid}/photographs/${state.id}`)
+      .ref(`/users/${user.uid}/photographs/${id}`)
       .put(file);
 
     let progress = 0;

src/data/leftSections.js

@@ -1,5 +1,5 @@
 import { AiFillSafetyCertificate, AiOutlineTwitter } from "react-icons/ai";
-import { FaAward } from "react-icons/fa";
+import { FaAward, FaTools } 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";
@@ -7,6 +7,7 @@ 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";
+import Skills from "../components/builder/sections/Skills";
 import Social from "../components/builder/sections/Social";
 import Work from "../components/builder/sections/Work";
 import ModalEvents from "../constants/ModalEvents";
@@ -59,4 +60,11 @@ export default [
     component: Certifications,
     event: ModalEvents.CERTIFICATION_MODAL,
   },
+  {
+    id: "skills",
+    name: "Skills",
+    icon: FaTools,
+    component: Skills,
+    event: ModalEvents.SKILL_MODAL,
+  },
 ];

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;

src/pages/app/builder.js

@@ -1,17 +1,17 @@
 import { navigate } from "gatsby";
-import React, { useContext, useEffect, useState } from "react";
+import React, { useContext, useEffect, useMemo, useState } from "react";
 import { toast } from "react-toastify";
 import Artboard from "../../components/builder/center/Artboard";
 import LeftSidebar from "../../components/builder/left/LeftSidebar";
 import RightSidebar from "../../components/builder/right/RightSidebar";
 import LoadingScreen from "../../components/router/LoadingScreen";
 import DatabaseContext from "../../contexts/DatabaseContext";
-import ResumeContext from "../../contexts/ResumeContext";
+import { useDispatch } from "../../contexts/ResumeContext";
 
 const Builder = ({ id }) => {
+  const dispatch = useDispatch();
   const [loading, setLoading] = useState(true);
   const { getResume } = useContext(DatabaseContext);
-  const { dispatch } = useContext(ResumeContext);
 
   useEffect(() => {
     (async () => {
@@ -31,6 +31,7 @@ const Builder = ({ id }) => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [id]);
 
+  return useMemo(() => {
     if (loading) {
       return <LoadingScreen />;
     }
@@ -48,6 +49,7 @@ const Builder = ({ id }) => {
         </div>
       </div>
     );
+  }, [loading]);
 };
 
 export default Builder;

src/templates/Onyx.js

@@ -21,7 +21,7 @@ const Onyx = ({ data, layout, colors }) => {
           className="text-4xl font-bold"
           style={{ color: colors.primaryColor }}
         >
-          Nancy Jackson
+          {data.profile.firstName} {data.profile.lastName}
         </h2>
         <span className="font-medium">Customer Sales Representative</span>