- memoize all components

- implement metadata context

src/components/builder/center/Artboard.js

@@ -1,13 +1,13 @@
-import React, { useContext } from 'react';
+import React, { memo } from 'react';
 import { Helmet } from 'react-helmet';
-import { useSelector } from '../../../contexts/ResumeContext';
-import TemplateContext from '../../../contexts/TemplateContext';
+import { useSelector as useMetadataSelector } from '../../../contexts/MetadataContext';
+import { useSelector as useResumeSelector } from '../../../contexts/ResumeContext';
 import Onyx from '../../../templates/Onyx';
 import styles from './Artboard.module.css';
 
 const Artboard = () => {
-  const { selected, blocks, colors } = useContext(TemplateContext);
-  const state = useSelector((store) => store);
+  const { template, layout, colors } = useMetadataSelector((store) => store);
+  const state = useResumeSelector((store) => store);
   const { id, name } = state;
 
   return (
@@ -18,12 +18,12 @@ const Artboard = () => {
       </Helmet>
 
       <div id="artboard" className={styles.container}>
-        {selected === 'Onyx' && (
-          <Onyx data={state} layout={blocks} colors={colors} />
+        {template === 'Onyx' && (
+          <Onyx data={state} layout={layout} colors={colors} />
         )}
       </div>
     </div>
   );
 };
 
-export default Artboard;
+export default memo(Artboard);

src/components/builder/left/LeftNavbar.js

@@ -1,5 +1,5 @@
 import { Link } from 'gatsby';
-import React from 'react';
+import React, { memo } from 'react';
 import sections from '../../../data/leftSections';
 import Avatar from '../../shared/Avatar';
 import Logo from '../../shared/Logo';
@@ -26,4 +26,4 @@ const LeftNavbar = () => (
   </div>
 );
 
-export default LeftNavbar;
+export default memo(LeftNavbar);

src/components/builder/left/LeftSidebar.js

@@ -1,22 +1,70 @@
-import React from 'react';
+import React, { Fragment, memo } from 'react';
 import { Element } from 'react-scroll';
 import sections from '../../../data/leftSections';
+import Awards from '../sections/Awards';
+import Certifications from '../sections/Certifications';
+import Education from '../sections/Education';
+import Hobbies from '../sections/Hobbies';
+import Languages from '../sections/Languages';
+import Objective from '../sections/Objective';
+import Profile from '../sections/Profile';
+import References from '../sections/References';
+import Skills from '../sections/Skills';
+import Social from '../sections/Social';
+import Work from '../sections/Work';
 import LeftNavbar from './LeftNavbar';
 import styles from './LeftSidebar.module.css';
 
-const LeftSidebar = () => (
-  <div className="flex">
-    <LeftNavbar />
+const getComponent = (id) => {
+  switch (id) {
+    case 'profile':
+      return Profile;
+    case 'social':
+      return Social;
+    case 'objective':
+      return Objective;
+    case 'work':
+      return Work;
+    case 'education':
+      return Education;
+    case 'awards':
+      return Awards;
+    case 'certifications':
+      return Certifications;
+    case 'skills':
+      return Skills;
+    case 'hobbies':
+      return Hobbies;
+    case 'languages':
+      return Languages;
+    case 'references':
+      return References;
+    default:
+      throw new Error();
+  }
+};
 
-    <div id="LeftSidebar" className={styles.container}>
-      {sections.map(({ id, name, event, component: Component }) => (
-        <Element key={id} name={id}>
-          <Component id={id} name={name} event={event} />
-          <hr />
-        </Element>
-      ))}
+const LeftSidebar = () => {
+  return (
+    <div className="flex">
+      <LeftNavbar />
+
+      <div id="LeftSidebar" className={styles.container}>
+        {sections.map(({ id, name, event }) => {
+          const Component = getComponent(id);
+
+          return (
+            <Fragment key={id}>
+              <Element name={id}>
+                <Component id={id} name={name} event={event} />
+              </Element>
+              <hr />
+            </Fragment>
+          );
+        })}
+      </div>
     </div>
-  </div>
-);
+  );
+};
 
-export default LeftSidebar;
+export default memo(LeftSidebar);

src/components/builder/left/LeftSidebar.module.css

@@ -4,7 +4,7 @@
   -ms-overflow-style: none;
   scrollbar-width: none;
   @apply w-full h-screen overflow-scroll p-8;
-  @apply grid gap-6;
+  @apply grid gap-8;
 }
 
 .container::-webkit-scrollbar {

src/components/builder/lists/EmptyList.js

@@ -1,7 +1,7 @@
-import React from 'react';
+import React, { memo } from 'react';
 
 const EmptyList = () => (
   <div className="py-6 opacity-75 text-center">This list is empty.</div>
 );
 
-export default EmptyList;
+export default memo(EmptyList);

src/components/builder/lists/List.js

@@ -1,5 +1,5 @@
 import { get, isEmpty } from 'lodash';
-import React, { useContext } from 'react';
+import React, { memo, useContext } from 'react';
 import { MdAdd } from 'react-icons/md';
 import ModalContext from '../../../contexts/ModalContext';
 import { useSelector } from '../../../contexts/ResumeContext';
@@ -64,4 +64,4 @@ const List = ({
   );
 };
 
-export default List;
+export default memo(List);

src/components/builder/lists/ListItem.js

@@ -1,5 +1,5 @@
 import { Menu, MenuItem } from '@material-ui/core';
-import React, { useState } from 'react';
+import React, { memo, useState } from 'react';
 import { IoIosArrowDown, IoIosArrowUp } from 'react-icons/io';
 import { MdMoreVert } from 'react-icons/md';
 import { useDispatch } from '../../../contexts/ResumeContext';
@@ -108,4 +108,4 @@ const ListItem = ({
   );
 };
 
-export default ListItem;
+export default memo(ListItem);

src/components/builder/right/RightNavbar.js

@@ -1,16 +1,16 @@
-import React from 'react';
-import { MdPerson } from 'react-icons/md';
+import React, { memo } from 'react';
+import sections from '../../../data/rightSections';
+import SectionIcon from '../../shared/SectionIcon';
 import styles from './RightNavbar.module.css';
 import SyncIndicator from './SyncIndicator';
 
 const RightNavbar = () => {
   return (
     <div className={styles.container}>
-      <div className="grid grid-cols-1 gap-6">
-        <MdPerson
-          className="text-secondary-dark hover:text-primary"
-          size="20px"
-        />
+      <div className="grid grid-cols-1 gap-8">
+        {sections.map((x) => (
+          <SectionIcon key={x.id} section={x} containerId="RightSidebar" />
+        ))}
       </div>
 
       <hr className="mt-auto my-6" />
@@ -20,4 +20,4 @@ const RightNavbar = () => {
   );
 };
 
-export default RightNavbar;
+export default memo(RightNavbar);

src/components/builder/right/RightSidebar.js

@@ -1,14 +1,35 @@
-import React from 'react';
+import React, { Fragment, memo } from 'react';
+import { Element } from 'react-scroll';
+import sections from '../../../data/rightSections';
 import Layout from '../sections/Layout';
 import RightNavbar from './RightNavbar';
 import styles from './RightSidebar.module.css';
 
+const getComponent = (id) => {
+  switch (id) {
+    case 'layout':
+      return Layout;
+    default:
+      throw new Error();
+  }
+};
+
 const RightSidebar = () => {
   return (
     <div className="flex">
-      <div className={styles.container}>
-        <Layout />
-        <hr />
+      <div id="RightSidebar" className={styles.container}>
+        {sections.map(({ id, name, event }) => {
+          const Component = getComponent(id);
+
+          return (
+            <Fragment key={id}>
+              <Element name={id}>
+                <Component id={id} name={name} event={event} />
+              </Element>
+              <hr />
+            </Fragment>
+          );
+        })}
       </div>
 
       <RightNavbar />
@@ -16,4 +37,4 @@ const RightSidebar = () => {
   );
 };
 
-export default RightSidebar;
+export default memo(RightSidebar);

src/components/builder/right/SyncIndicator.js

@@ -1,5 +1,5 @@
 import cx from 'classnames';
-import React, { useContext } from 'react';
+import React, { memo, useContext } from 'react';
 import { MdSync, MdSyncDisabled } from 'react-icons/md';
 import DatabaseContext from '../../../contexts/DatabaseContext';
 
@@ -17,4 +17,4 @@ const SyncIndicator = () => {
   );
 };
 
-export default SyncIndicator;
+export default memo(SyncIndicator);

src/components/builder/sections/Awards.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { memo } from 'react';
 import Heading from '../../shared/Heading';
 import List from '../lists/List';
 
@@ -20,4 +20,4 @@ const Awards = ({ id, name, event }) => {
   );
 };
 
-export default Awards;
+export default memo(Awards);

src/components/builder/sections/Certifications.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { memo } from 'react';
 import Heading from '../../shared/Heading';
 import List from '../lists/List';
 
@@ -20,4 +20,4 @@ const Certifications = ({ id, name, event }) => {
   );
 };
 
-export default Certifications;
+export default memo(Certifications);

src/components/builder/sections/Education.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { memo } from 'react';
 import Heading from '../../shared/Heading';
 import List from '../lists/List';
 
@@ -20,4 +20,4 @@ const Education = ({ id, name, event }) => {
   );
 };
 
-export default Education;
+export default memo(Education);

src/components/builder/sections/Hobbies.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { memo } from 'react';
 import Heading from '../../shared/Heading';
 import List from '../lists/List';
 
@@ -14,4 +14,4 @@ const Hobbies = ({ id, name, event }) => {
   );
 };
 
-export default Hobbies;
+export default memo(Hobbies);

src/components/builder/sections/Languages.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { memo } from 'react';
 import Heading from '../../shared/Heading';
 import List from '../lists/List';
 
@@ -14,4 +14,4 @@ const Languages = ({ id, name, event }) => {
   );
 };
 
-export default Languages;
+export default memo(Languages);

src/components/builder/sections/Layout.js

@@ -1,11 +1,36 @@
-import React, { useContext } from 'react';
+import React, { memo } from 'react';
 import { DragDropContext, Draggable, Droppable } from 'react-beautiful-dnd';
-import TemplateContext from '../../../contexts/TemplateContext';
+import { useDispatch, useSelector } from '../../../contexts/MetadataContext';
+import { move, reorder } from '../../../utils';
 import Heading from '../../shared/Heading';
 import styles from './Layout.module.css';
 
 const Layout = () => {
-  const { blocks, onDragEnd } = useContext(TemplateContext);
+  const blocks = useSelector((state) => state.layout);
+  const dispatch = useDispatch();
+
+  const onDragEnd = (result) => {
+    const { source, destination } = result;
+
+    if (!destination) {
+      return;
+    }
+    const sInd = +source.droppableId;
+    const dInd = +destination.droppableId;
+
+    if (sInd === dInd) {
+      const items = reorder(blocks[sInd], source.index, destination.index);
+      const newState = [...blocks];
+      newState[sInd] = items;
+      dispatch({ type: 'set_layout', payload: newState });
+    } else {
+      const newResult = move(blocks[sInd], blocks[dInd], source, destination);
+      const newState = [...blocks];
+      newState[sInd] = newResult[sInd];
+      newState[dInd] = newResult[dInd];
+      dispatch({ type: 'set_layout', payload: newState });
+    }
+  };
 
   return (
     <section>
@@ -60,4 +85,4 @@ const Layout = () => {
   );
 };
 
-export default Layout;
+export default memo(Layout);

src/components/builder/sections/Objective.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { memo } from 'react';
 import Heading from '../../shared/Heading';
 import Input from '../../shared/Input';
 
@@ -12,4 +12,4 @@ const Objective = () => {
   );
 };
 
-export default Objective;
+export default memo(Objective);

src/components/builder/sections/Profile.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { memo } from 'react';
 import Heading from '../../shared/Heading';
 import Input from '../../shared/Input';
 import PhotoUpload from '../../shared/PhotoUpload';
@@ -44,4 +44,4 @@ const Profile = () => {
   );
 };
 
-export default Profile;
+export default memo(Profile);

src/components/builder/sections/References.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { memo } from 'react';
 import Heading from '../../shared/Heading';
 import List from '../lists/List';
 
@@ -20,4 +20,4 @@ const References = ({ id, name, event }) => {
   );
 };
 
-export default References;
+export default memo(References);

src/components/builder/sections/Skills.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { memo } from 'react';
 import Heading from '../../shared/Heading';
 import List from '../lists/List';
 
@@ -14,4 +14,4 @@ const Skills = ({ id, name, event }) => {
   );
 };
 
-export default Skills;
+export default memo(Skills);

src/components/builder/sections/Social.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { memo } from 'react';
 import Heading from '../../shared/Heading';
 import List from '../lists/List';
 
@@ -19,4 +19,4 @@ const Social = ({ id, name, event }) => {
   );
 };
 
-export default Social;
+export default memo(Social);

src/components/builder/sections/Work.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { memo } from 'react';
 import Heading from '../../shared/Heading';
 import List from '../lists/List';
 
@@ -20,4 +20,4 @@ const Work = ({ id, name, event }) => {
   );
 };
 
-export default Work;
+export default memo(Work);

src/components/dashboard/CreateResume.js

@@ -1,4 +1,4 @@
-import React, { useContext } from 'react';
+import React, { memo, useContext } from 'react';
 import { MdAdd } from 'react-icons/md';
 import ModalContext from '../../contexts/ModalContext';
 import { handleKeyUp } from '../../utils';
@@ -30,4 +30,4 @@ const CreateResume = () => {
   );
 };
 
-export default CreateResume;
+export default memo(CreateResume);

src/components/dashboard/ResumePreview.js

@@ -1,7 +1,7 @@
 import { Menu, MenuItem } from '@material-ui/core';
 import { navigate } from 'gatsby';
 import moment from 'moment';
-import React, { useContext, useState } from 'react';
+import React, { memo, useContext, useState } from 'react';
 import { MdMoreHoriz, MdOpenInNew } from 'react-icons/md';
 import { toast } from 'react-toastify';
 import DatabaseContext from '../../contexts/DatabaseContext';
@@ -78,4 +78,4 @@ const ResumePreview = ({ resume }) => {
   );
 };
 
-export default ResumePreview;
+export default memo(ResumePreview);

src/components/dashboard/TopNavbar.js

@@ -1,5 +1,5 @@
 import { Link, navigate } from 'gatsby';
-import React, { useContext } from 'react';
+import React, { memo, useContext } from 'react';
 import UserContext from '../../contexts/UserContext';
 import Avatar from '../shared/Avatar';
 import Logo from '../shared/Logo';
@@ -35,4 +35,4 @@ const TopNavbar = () => {
   );
 };
 
-export default TopNavbar;
+export default memo(TopNavbar);

src/components/landing/Hero.js

@@ -1,5 +1,5 @@
 import { navigate } from 'gatsby';
-import React, { useContext } from 'react';
+import React, { memo, useContext } from 'react';
 import { FaGithub } from 'react-icons/fa';
 import ModalContext from '../../contexts/ModalContext';
 import ThemeContext from '../../contexts/ThemeContext';
@@ -49,4 +49,4 @@ const Hero = () => {
   );
 };
 
-export default Hero;
+export default memo(Hero);

src/components/router/LoadingScreen.js

@@ -1,5 +1,5 @@
 import { Fade, Modal } from '@material-ui/core';
-import React from 'react';
+import React, { memo } from 'react';
 import { getRandomTip } from '../../data/tips';
 import Logo from '../shared/Logo';
 
@@ -18,4 +18,4 @@ const LoadingScreen = () => {
   );
 };
 
-export default LoadingScreen;
+export default memo(LoadingScreen);

src/components/router/PrivateRoute.js

@@ -1,5 +1,5 @@
 import { navigate } from 'gatsby';
-import React, { useContext } from 'react';
+import React, { memo, useContext } from 'react';
 import UserContext from '../../contexts/UserContext';
 import LoadingScreen from './LoadingScreen';
 
@@ -18,4 +18,4 @@ const PrivateRoute = ({ component: Component, location, ...props }) => {
   return <Component user={user} {...props} />;
 };
 
-export default PrivateRoute;
+export default memo(PrivateRoute);

src/components/shared/Avatar.js

@@ -1,6 +1,6 @@
 import cx from 'classnames';
 import { toUrl } from 'gatsby-source-gravatar';
-import React, { useContext, useMemo } from 'react';
+import React, { memo, useContext, useMemo } from 'react';
 import UserContext from '../../contexts/UserContext';
 import styles from './Avatar.module.css';
 
@@ -18,4 +18,4 @@ const Avatar = ({ className }) => {
   );
 };
 
-export default Avatar;
+export default memo(Avatar);

src/components/shared/Button.js

@@ -1,5 +1,5 @@
 import classNames from 'classnames';
-import React from 'react';
+import React, { memo } from 'react';
 import { handleKeyUp } from '../../utils';
 import styles from './Button.module.css';
 
@@ -21,4 +21,4 @@ const Button = ({ icon, title, onClick, outline, className, isLoading }) => {
   );
 };
 
-export default Button;
+export default memo(Button);

src/components/shared/Heading.js

@@ -1,7 +1,7 @@
-import React from 'react';
+import React, { memo } from 'react';
 
 const Heading = ({ children }) => {
   return <h2 className="text-4xl">{children}</h2>;
 };
 
-export default Heading;
+export default memo(Heading);

src/components/shared/Input.js

@@ -1,6 +1,6 @@
 import cx from 'classnames';
 import { get, isFunction } from 'lodash';
-import React, { useEffect, useState } from 'react';
+import React, { memo, useEffect, useState } from 'react';
 import { FaAngleDown } from 'react-icons/fa';
 import { MdClose } from 'react-icons/md';
 import { v4 as uuidv4 } from 'uuid';
@@ -133,4 +133,4 @@ const Input = ({
   );
 };
 
-export default Input;
+export default memo(Input);

src/components/shared/InputArray.js

@@ -0,0 +1,51 @@
+import { Field } from 'formik';
+import React, { memo } from 'react';
+import { MdAdd } from 'react-icons/md';
+import { getFieldProps, handleKeyUp } from '../../utils';
+import Input from './Input';
+
+const InputArray = ({ formik, schema, helpers, label, path, placeholder }) => {
+  const handleClickAdd = () => {
+    formik.values.temp && helpers.push(formik.values.temp);
+    formik.setFieldValue('temp', '');
+  };
+
+  return (
+    <div className="col-span-2">
+      <label>
+        <span>{label}</span>
+
+        {formik.values[path] &&
+          formik.values[path].map((x, i) => (
+            <Field key={i} name={`${path}.${i}`}>
+              {({ field, meta }) => (
+                <Input
+                  className="my-1"
+                  showDeleteItemButton
+                  onDeleteItem={() => helpers.remove(i)}
+                  {...field}
+                  {...meta}
+                />
+              )}
+            </Field>
+          ))}
+
+        <div className="flex items-center">
+          <Input
+            placeholder={placeholder}
+            {...getFieldProps(formik, schema, 'temp')}
+          />
+          <MdAdd
+            size="18px"
+            tabIndex="0"
+            className="mx-4 cursor-pointer opacity-50 hover:opacity-75"
+            onKeyUp={(e) => handleKeyUp(e, handleClickAdd)}
+            onClick={handleClickAdd}
+          />
+        </div>
+      </label>
+    </div>
+  );
+};
+
+export default memo(InputArray);

src/components/shared/Logo.js

@@ -1,7 +1,7 @@
 import cx from 'classnames';
 import { graphql, useStaticQuery } from 'gatsby';
 import GatsbyImage from 'gatsby-image';
-import React from 'react';
+import React, { memo } from 'react';
 import styles from './Logo.module.css';
 
 const Logo = ({ size = '256px', className }) => {
@@ -27,4 +27,4 @@ const Logo = ({ size = '256px', className }) => {
   );
 };
 
-export default Logo;
+export default memo(Logo);

src/components/shared/PhotoUpload.js

@@ -1,4 +1,4 @@
-import React, { useContext, useRef } from 'react';
+import React, { memo, useContext, useRef } from 'react';
 import { MdFileUpload } from 'react-icons/md';
 import StorageContext from '../../contexts/StorageContext';
 import { handleKeyUp } from '../../utils';
@@ -47,4 +47,4 @@ const PhotoUpload = () => {
   );
 };
 
-export default PhotoUpload;
+export default memo(PhotoUpload);

src/components/shared/SectionIcon.js

@@ -1,5 +1,5 @@
 import { Tooltip } from '@material-ui/core';
-import React from 'react';
+import React, { memo } from 'react';
 import { scroller } from 'react-scroll';
 import { handleKeyUp } from '../../utils';
 
@@ -30,4 +30,4 @@ const SectionIcon = ({ section, containerId, placement = 'right' }) => {
   );
 };
 
-export default SectionIcon;
+export default memo(SectionIcon);

src/components/shared/Wrapper.js

@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react';
+import React, { memo, useEffect } from 'react';
 import { Slide, toast } from 'react-toastify';
 import ModalRegistrar from '../../modals/ModalRegistrar';
 
@@ -23,4 +23,4 @@ const Wrapper = ({ children }) => {
   );
 };
 
-export default Wrapper;
+export default memo(Wrapper);