- refactor sections

- combine resume and metadata contexts

gatsby-browser.js

@@ -1,11 +1,11 @@
 import { createMuiTheme, MuiThemeProvider } from '@material-ui/core';
+import 'animate.css';
 import 'firebase/analytics';
 import 'firebase/auth';
 import 'firebase/database';
 import 'firebase/storage';
 import React from 'react';
 import { DatabaseProvider } from './src/contexts/DatabaseContext';
-import { MetadataProvider } from './src/contexts/MetadataContext';
 import { ModalProvider } from './src/contexts/ModalContext';
 import { ResumeProvider } from './src/contexts/ResumeContext';
 import { StorageProvider } from './src/contexts/StorageContext';
@@ -32,9 +32,7 @@ export const wrapRootElement = ({ element }) => (
         <UserProvider>
           <DatabaseProvider>
             <ResumeProvider>
-              <MetadataProvider>
+              <StorageProvider>{element}</StorageProvider>
-                <StorageProvider>{element}</StorageProvider>
-              </MetadataProvider>
             </ResumeProvider>
           </DatabaseProvider>
         </UserProvider>

package-lock.json

@@ -2700,6 +2700,11 @@
       "resolved": "https://registry.npmjs.org/alphanum-sort/-/alphanum-sort-1.0.2.tgz",
       "integrity": "sha1-l6ERlkmyEa0zaR2fn0hqjsn74KM="
     },
+    "animate.css": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/animate.css/-/animate.css-4.1.0.tgz",
+      "integrity": "sha512-0aVcfWDeU9ykV6vjn1P67ZSs01jxoUQZCGaYbkk0SIIelIG8kUdLrIkua1+VabHfTtsSivDRMMn0ILPvZum2gw=="
+    },
     "ansi-align": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/ansi-align/-/ansi-align-3.0.0.tgz",
@@ -8225,9 +8230,9 @@
       "integrity": "sha1-GwqzvVU7Kg1jmdKcDj6gslIHgyc="
     },
     "gatsby": {
-      "version": "2.24.0",
+      "version": "2.24.1",
-      "resolved": "https://registry.npmjs.org/gatsby/-/gatsby-2.24.0.tgz",
+      "resolved": "https://registry.npmjs.org/gatsby/-/gatsby-2.24.1.tgz",
-      "integrity": "sha512-l/9ueKdnHNB3+nbzZRaj2mYWJMAay7PwMN+M0VfdIgA2K6d/lz3xI8W5BRNmNJyuk8itykB64r7NFNxsnTChRw==",
+      "integrity": "sha512-aqFfx+Vj3kBhS17tgL1LrkMzip2Xctd3lCj+pogCGV9GCkg6wOqW2uOEqWeoiCNq09sPuwv3GNB8sbEFoQ/2DA==",
       "requires": {
         "@babel/code-frame": "^7.10.3",
         "@babel/core": "^7.10.3",
@@ -8543,11 +8548,6 @@
           "resolved": "https://registry.npmjs.org/ignore/-/ignore-4.0.6.tgz",
           "integrity": "sha512-cyFDKrqc/YdcWFniJhzI42+AzS+gNwmUzOSFcRCQYwySuBBBy/KjuxWLZ/FHEH6Moq1NizMOBWyTcv8O4OZIMg=="
         },
-        "is-plain-obj": {
-          "version": "1.1.0",
-          "resolved": "https://registry.npmjs.org/is-plain-obj/-/is-plain-obj-1.1.0.tgz",
-          "integrity": "sha1-caUMhCnfync8kqOQpKA7OfzVHT4="
-        },
         "lru-cache": {
           "version": "5.1.1",
           "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-5.1.1.tgz",
@@ -8556,49 +8556,11 @@
             "yallist": "^3.0.2"
           }
         },
-        "mini-css-extract-plugin": {
-          "version": "0.8.2",
-          "resolved": "https://registry.npmjs.org/mini-css-extract-plugin/-/mini-css-extract-plugin-0.8.2.tgz",
-          "integrity": "sha512-a3Y4of27Wz+mqK3qrcd3VhYz6cU0iW5x3Sgvqzbj+XmlrSizmvu8QQMl5oMYJjgHOC4iyt+w7l4umP+dQeW3bw==",
-          "requires": {
-            "loader-utils": "^1.1.0",
-            "normalize-url": "1.9.1",
-            "schema-utils": "^1.0.0",
-            "webpack-sources": "^1.1.0"
-          }
-        },
         "node-fetch": {
           "version": "2.6.0",
           "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.6.0.tgz",
           "integrity": "sha512-8dG4H5ujfvFiqDmVu9fQ5bOHUC15JMjMY/Zumv26oOvvVJjM67KF8koCWIabKQ1GJIa9r2mMZscBq/TbdOcmNA=="
         },
-        "normalize-url": {
-          "version": "1.9.1",
-          "resolved": "https://registry.npmjs.org/normalize-url/-/normalize-url-1.9.1.tgz",
-          "integrity": "sha1-LMDWazHqIwNkWENuNiDYWVTGbDw=",
-          "requires": {
-            "object-assign": "^4.0.1",
-            "prepend-http": "^1.0.0",
-            "query-string": "^4.1.0",
-            "sort-keys": "^1.0.0"
-          },
-          "dependencies": {
-            "query-string": {
-              "version": "4.3.4",
-              "resolved": "https://registry.npmjs.org/query-string/-/query-string-4.3.4.tgz",
-              "integrity": "sha1-u7aTucqRXCMlFbIosaArYJBD2+s=",
-              "requires": {
-                "object-assign": "^4.1.0",
-                "strict-uri-encode": "^1.0.0"
-              }
-            }
-          }
-        },
-        "prepend-http": {
-          "version": "1.0.4",
-          "resolved": "https://registry.npmjs.org/prepend-http/-/prepend-http-1.0.4.tgz",
-          "integrity": "sha1-1PRWKwzjaW5BrFLQ4ALlemNdxtw="
-        },
         "regexpp": {
           "version": "2.0.1",
           "resolved": "https://registry.npmjs.org/regexpp/-/regexpp-2.0.1.tgz",
@@ -8612,29 +8574,11 @@
             "glob": "^7.1.3"
           }
         },
-        "schema-utils": {
-          "version": "1.0.0",
-          "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-1.0.0.tgz",
-          "integrity": "sha512-i27Mic4KovM/lnGsy8whRCHhc7VicJajAjTrYg11K9zfZXnYIt4k5F+kZkwjnrhKzLic/HLU4j11mjsz2G/75g==",
-          "requires": {
-            "ajv": "^6.1.0",
-            "ajv-errors": "^1.0.0",
-            "ajv-keywords": "^3.1.0"
-          }
-        },
         "semver": {
           "version": "5.7.1",
           "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz",
           "integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ=="
         },
-        "sort-keys": {
-          "version": "1.1.2",
-          "resolved": "https://registry.npmjs.org/sort-keys/-/sort-keys-1.1.2.tgz",
-          "integrity": "sha1-RBttTTRnmPG05J6JIK37oOVD+a0=",
-          "requires": {
-            "is-plain-obj": "^1.0.0"
-          }
-        },
         "source-map": {
           "version": "0.7.3",
           "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.7.3.tgz",
@@ -12667,10 +12611,9 @@
       }
     },
     "mini-css-extract-plugin": {
-      "version": "0.9.0",
+      "version": "0.8.2",
-      "resolved": "https://registry.npmjs.org/mini-css-extract-plugin/-/mini-css-extract-plugin-0.9.0.tgz",
+      "resolved": "https://registry.npmjs.org/mini-css-extract-plugin/-/mini-css-extract-plugin-0.8.2.tgz",
-      "integrity": "sha512-lp3GeY7ygcgAmVIcRPBVhIkf8Us7FZjA+ILpal44qLdSu11wmjKQ3d9k15lfD7pO4esu9eUIAW7qiYIBppv40A==",
+      "integrity": "sha512-a3Y4of27Wz+mqK3qrcd3VhYz6cU0iW5x3Sgvqzbj+XmlrSizmvu8QQMl5oMYJjgHOC4iyt+w7l4umP+dQeW3bw==",
-      "dev": true,
       "requires": {
         "loader-utils": "^1.1.0",
         "normalize-url": "1.9.1",
@@ -12681,14 +12624,12 @@
         "is-plain-obj": {
           "version": "1.1.0",
           "resolved": "https://registry.npmjs.org/is-plain-obj/-/is-plain-obj-1.1.0.tgz",
-          "integrity": "sha1-caUMhCnfync8kqOQpKA7OfzVHT4=",
+          "integrity": "sha1-caUMhCnfync8kqOQpKA7OfzVHT4="
-          "dev": true
         },
         "normalize-url": {
           "version": "1.9.1",
           "resolved": "https://registry.npmjs.org/normalize-url/-/normalize-url-1.9.1.tgz",
           "integrity": "sha1-LMDWazHqIwNkWENuNiDYWVTGbDw=",
-          "dev": true,
           "requires": {
             "object-assign": "^4.0.1",
             "prepend-http": "^1.0.0",
@@ -12699,14 +12640,12 @@
         "prepend-http": {
           "version": "1.0.4",
           "resolved": "https://registry.npmjs.org/prepend-http/-/prepend-http-1.0.4.tgz",
-          "integrity": "sha1-1PRWKwzjaW5BrFLQ4ALlemNdxtw=",
+          "integrity": "sha1-1PRWKwzjaW5BrFLQ4ALlemNdxtw="
-          "dev": true
         },
         "query-string": {
           "version": "4.3.4",
           "resolved": "https://registry.npmjs.org/query-string/-/query-string-4.3.4.tgz",
           "integrity": "sha1-u7aTucqRXCMlFbIosaArYJBD2+s=",
-          "dev": true,
           "requires": {
             "object-assign": "^4.1.0",
             "strict-uri-encode": "^1.0.0"
@@ -12716,7 +12655,6 @@
           "version": "1.0.0",
           "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-1.0.0.tgz",
           "integrity": "sha512-i27Mic4KovM/lnGsy8whRCHhc7VicJajAjTrYg11K9zfZXnYIt4k5F+kZkwjnrhKzLic/HLU4j11mjsz2G/75g==",
-          "dev": true,
           "requires": {
             "ajv": "^6.1.0",
             "ajv-errors": "^1.0.0",
@@ -12727,7 +12665,6 @@
           "version": "1.1.2",
           "resolved": "https://registry.npmjs.org/sort-keys/-/sort-keys-1.1.2.tgz",
           "integrity": "sha1-RBttTTRnmPG05J6JIK37oOVD+a0=",
-          "dev": true,
           "requires": {
             "is-plain-obj": "^1.0.0"
           }

package.json

@@ -18,12 +18,13 @@
   "dependencies": {
     "@material-ui/core": "^4.11.0",
     "@reach/router": "^1.3.4",
+    "animate.css": "^4.1.0",
     "array-move": "^2.2.2",
     "classnames": "^2.2.6",
     "dotenv": "^8.2.0",
     "firebase": "^7.15.5",
     "formik": "^2.1.4",
-    "gatsby": "^2.24.0",
+    "gatsby": "^2.24.1",
     "gatsby-image": "^2.4.13",
     "gatsby-plugin-create-client-paths": "^2.3.10",
     "gatsby-plugin-firebase": "^0.2.0-beta.4",

src/components/builder/center/Artboard.js

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

src/components/builder/left/LeftNavbar.js

@@ -14,7 +14,7 @@ const LeftNavbar = () => (
 
     <hr className="my-6" />
 
-    <div className="grid grid-cols-1 gap-5 text-secondary-dark">
+    <div className="grid grid-cols-1 gap-4 text-secondary-dark">
       {sections.map((x) => (
         <SectionIcon
           key={x.id}

src/components/builder/left/LeftSidebar.js

@@ -1,17 +1,17 @@
 import React, { Fragment, memo } from 'react';
 import { Element } from 'react-scroll';
 import sections from '../../../data/leftSections';
-import Awards from '../sections/Awards';
+import Awards from './sections/Awards';
-import Certifications from '../sections/Certifications';
+import Certifications from './sections/Certifications';
-import Education from '../sections/Education';
+import Education from './sections/Education';
-import Hobbies from '../sections/Hobbies';
+import Hobbies from './sections/Hobbies';
-import Languages from '../sections/Languages';
+import Languages from './sections/Languages';
-import Objective from '../sections/Objective';
+import Objective from './sections/Objective';
-import Profile from '../sections/Profile';
+import Profile from './sections/Profile';
-import References from '../sections/References';
+import References from './sections/References';
-import Skills from '../sections/Skills';
+import Skills from './sections/Skills';
-import Social from '../sections/Social';
+import Social from './sections/Social';
-import Work from '../sections/Work';
+import Work from './sections/Work';
 import LeftNavbar from './LeftNavbar';
 import styles from './LeftSidebar.module.css';
 

src/components/builder/left/sections/Awards.js

@@ -1,6 +1,6 @@
 import React, { memo } from 'react';
-import Heading from '../../shared/Heading';
+import Heading from '../../../shared/Heading';
-import List from '../lists/List';
+import List from '../../lists/List';
 
 const Awards = ({ id, name, event }) => {
   const path = `${id}.items`;

src/components/builder/left/sections/Certifications.js

@@ -1,6 +1,6 @@
 import React, { memo } from 'react';
-import Heading from '../../shared/Heading';
+import Heading from '../../../shared/Heading';
-import List from '../lists/List';
+import List from '../../lists/List';
 
 const Certifications = ({ id, name, event }) => {
   const path = `${id}.items`;

src/components/builder/left/sections/Education.js

@@ -1,6 +1,6 @@
 import React, { memo } from 'react';
-import Heading from '../../shared/Heading';
+import Heading from '../../../shared/Heading';
-import List from '../lists/List';
+import List from '../../lists/List';
 
 const Education = ({ id, name, event }) => {
   const path = `${id}.items`;

src/components/builder/left/sections/Hobbies.js

@@ -1,6 +1,6 @@
 import React, { memo } from 'react';
-import Heading from '../../shared/Heading';
+import Heading from '../../../shared/Heading';
-import List from '../lists/List';
+import List from '../../lists/List';
 
 const Hobbies = ({ id, name, event }) => {
   const path = `${id}.items`;

src/components/builder/left/sections/Languages.js

@@ -1,6 +1,6 @@
 import React, { memo } from 'react';
-import Heading from '../../shared/Heading';
+import Heading from '../../../shared/Heading';
-import List from '../lists/List';
+import List from '../../lists/List';
 
 const Languages = ({ id, name, event }) => {
   const path = `${id}.items`;

src/components/builder/left/sections/Objective.js

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

src/components/builder/left/sections/Profile.js

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

src/components/builder/left/sections/References.js

@@ -1,6 +1,6 @@
 import React, { memo } from 'react';
-import Heading from '../../shared/Heading';
+import Heading from '../../../shared/Heading';
-import List from '../lists/List';
+import List from '../../lists/List';
 
 const References = ({ id, name, event }) => {
   const path = `${id}.items`;

src/components/builder/left/sections/Skills.js

@@ -1,6 +1,6 @@
 import React, { memo } from 'react';
-import Heading from '../../shared/Heading';
+import Heading from '../../../shared/Heading';
-import List from '../lists/List';
+import List from '../../lists/List';
 
 const Skills = ({ id, name, event }) => {
   const path = `${id}.items`;

src/components/builder/left/sections/Social.js

@@ -1,6 +1,6 @@
 import React, { memo } from 'react';
-import Heading from '../../shared/Heading';
+import Heading from '../../../shared/Heading';
-import List from '../lists/List';
+import List from '../../lists/List';
 
 const Social = ({ id, name, event }) => {
   const path = `${id}.items`;

src/components/builder/left/sections/Work.js

@@ -1,6 +1,6 @@
 import React, { memo } from 'react';
-import Heading from '../../shared/Heading';
+import Heading from '../../../shared/Heading';
-import List from '../lists/List';
+import List from '../../lists/List';
 
 const Work = ({ id, name, event }) => {
   const path = `${id}.items`;

src/components/builder/lists/List.js

@@ -20,7 +20,7 @@ const List = ({
   hasDate,
   event,
 }) => {
-  const items = useSelector((state) => get(state, path, []));
+  const items = useSelector(path, []);
   const { emitter } = useContext(ModalContext);
 
   const handleAdd = () => emitter.emit(event);

src/components/builder/lists/ListItem.js

@@ -82,7 +82,7 @@ const ListItem = ({
           size="18px"
           aria-haspopup="true"
           onClick={handleClick}
-          className="cursor-pointer"
+          className="cursor-context-menu"
         />
         <Menu
           keepMounted

src/components/builder/right/RightNavbar.js

@@ -7,7 +7,7 @@ import SyncIndicator from './SyncIndicator';
 const RightNavbar = () => {
   return (
     <div className={styles.container}>
-      <div className="grid grid-cols-1 gap-6 text-secondary-dark">
+      <div className="grid grid-cols-1 gap-4 text-secondary-dark">
         {sections.map((x) => (
           <SectionIcon
             key={x.id}

src/components/builder/right/RightSidebar.js

@@ -1,12 +1,15 @@
 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';
+import Layout from './sections/Layout';
+import Templates from './sections/Templates';
 
 const getComponent = (id) => {
   switch (id) {
+    case 'templates':
+      return Templates;
     case 'layout':
       return Layout;
     default:

src/components/builder/right/RightSidebar.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/right/sections/Colors.js

@@ -0,0 +1,47 @@
+import React, { memo } from 'react';
+import { useDispatch } from '../../../../contexts/ResumeContext';
+import Heading from '../../../shared/Heading';
+import Input from '../../../shared/Input';
+
+const Colors = () => {
+  const dispatch = useDispatch();
+
+  const handleClick = (value) => {
+    dispatch({
+      type: 'on_input',
+      payload: {
+        path: 'metadata.colors.primary',
+        value,
+      },
+    });
+  };
+
+  return (
+    <section>
+      <Heading>Colors</Heading>
+
+      <Input
+        name="primary"
+        label="Primary Color"
+        placeholder="#FF4081"
+        path="metadata.colors.primary"
+      />
+
+      <Input
+        name="text"
+        label="Text Color"
+        placeholder="#444444"
+        path="metadata.colors.text"
+      />
+
+      <Input
+        name="background"
+        label="Background Color"
+        placeholder="#FFFFFF"
+        path="metadata.colors.background"
+      />
+    </section>
+  );
+};
+
+export default memo(Colors);

src/components/builder/right/sections/Layout.js

@@ -1,12 +1,12 @@
 import React, { memo } from 'react';
 import { DragDropContext, Draggable, Droppable } from 'react-beautiful-dnd';
-import { useDispatch, useSelector } from '../../../contexts/MetadataContext';
+import { useDispatch, useSelector } from '../../../../contexts/ResumeContext';
-import { move, reorder } from '../../../utils';
+import { move, reorder } from '../../../../utils';
-import Heading from '../../shared/Heading';
+import Heading from '../../../shared/Heading';
 import styles from './Layout.module.css';
 
 const Layout = () => {
-  const blocks = useSelector((state) => state.layout);
+  const blocks = useSelector('metadata.layout');
   const dispatch = useDispatch();
 
   const onDragEnd = (result) => {
@@ -22,13 +22,25 @@ const Layout = () => {
       const items = reorder(blocks[sInd], source.index, destination.index);
       const newState = [...blocks];
       newState[sInd] = items;
-      dispatch({ type: 'set_layout', payload: newState });
+      dispatch({
+        type: 'on_input',
+        payload: {
+          path: 'metadata.layout',
+          value: 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 });
+      dispatch({
+        type: 'on_input',
+        payload: {
+          path: 'layout',
+          value: newState,
+        },
+      });
     }
   };
 
@@ -58,8 +70,8 @@ const Layout = () => {
                     {el.map((item, index) => (
                       <Draggable
                         key={item.id}
-                        draggableId={item.id}
                         index={index}
+                        draggableId={item.id}
                       >
                         {(dragProvided) => (
                           <div

src/components/builder/right/sections/Templates.js

@@ -0,0 +1,48 @@
+import cx from 'classnames';
+import React, { memo } from 'react';
+import { useDispatch, useSelector } from '../../../../contexts/ResumeContext';
+import templates from '../../../../data/templates';
+import { handleKeyUp } from '../../../../utils';
+import Heading from '../../../shared/Heading';
+import styles from './Templates.module.css';
+
+const Templates = () => {
+  const dispatch = useDispatch();
+  const template = useSelector('metadata.template');
+
+  const handleClick = (value) => {
+    dispatch({
+      type: 'on_input',
+      payload: {
+        path: 'metadata.template',
+        value,
+      },
+    });
+  };
+
+  return (
+    <section>
+      <Heading>Templates</Heading>
+
+      <div className="grid grid-cols-2 gap-8">
+        {templates.map((x) => (
+          <div
+            key={x.id}
+            tabIndex="0"
+            role="button"
+            onKeyUp={(e) => handleKeyUp(e, () => handleClick(x.id))}
+            onClick={() => handleClick(x.id)}
+            className={cx(styles.template, {
+              [styles.selected]: template === x.id,
+            })}
+          >
+            <img loading="lazy" height="240px" src={x.preview} alt={x.name} />
+            <span>{x.name}</span>
+          </div>
+        ))}
+      </div>
+    </section>
+  );
+};
+
+export default memo(Templates);

src/components/builder/right/sections/Templates.module.css

@@ -0,0 +1,26 @@
+.template {
+  @apply w-full rounded flex flex-col items-center;
+}
+
+.template:focus {
+  @apply outline-none;
+}
+
+.template img {
+  height: 240px;
+  @apply w-full object-cover border-2 border-transparent rounded;
+  @apply transition-opacity duration-200 ease-in-out;
+}
+
+.template.selected img {
+  @apply border-2 border-primary;
+}
+
+.template:hover img {
+  @apply cursor-pointer opacity-75;
+  @apply transition-opacity duration-200 ease-in-out;
+}
+
+.template span {
+  @apply mt-1 text-center text-sm font-semibold;
+}

src/components/shared/Input.js

@@ -1,5 +1,5 @@
 import cx from 'classnames';
-import { get, isFunction } from 'lodash';
+import { isFunction } from 'lodash';
 import React, { memo, useEffect, useState } from 'react';
 import { FaAngleDown } from 'react-icons/fa';
 import { MdClose } from 'react-icons/md';
@@ -26,14 +26,14 @@ const Input = ({
   type = 'text',
 }) => {
   const [uuid, setUuid] = useState(null);
-  const stateValue = useSelector((state) => get(state, path));
+  const stateValue = useSelector(path, '');
   const dispatch = useDispatch();
 
   useEffect(() => {
     setUuid(uuidv4());
   }, []);
 
-  value = isFunction(onChange) ? value : stateValue;
+  value = path ? stateValue : value;
   onChange = isFunction(onChange)
     ? onChange
     : (e) => {

src/components/shared/Input.module.css

@@ -14,10 +14,16 @@
   @apply text-primary opacity-50;
 }
 
+.container label input:hover,
+.container label textarea:hover,
+.container label select:hover {
+  @apply outline-none border-secondary-dark;
+}
+
 .container label input:focus,
 .container label textarea:focus,
 .container label select:focus {
-  @apply outline-none border-gray-500;
+  @apply outline-none border-primary;
 }
 
 .container label > p {

src/components/shared/PhotoUpload.module.css

@@ -3,4 +3,14 @@
   height: 60px;
   flex: 0 0 60px;
   @apply flex items-center justify-center cursor-pointer bg-secondary text-secondary-dark rounded-full;
+  @apply transition-opacity duration-200 ease-in-out;
+}
+
+.circle:focus {
+  @apply outline-none;
+}
+
+.circle:hover {
+  @apply opacity-75;
+  @apply transition-opacity duration-200 ease-in-out;
 }

src/components/shared/SectionIcon.js

@@ -19,9 +19,9 @@ const SectionIcon = ({ section, containerId, tooltipPlacement }) => {
         duration={500}
         containerId={containerId}
         activeClass="text-primary"
-        className="py-2 cursor-pointer focus:outline-none focus:text-primary hover:text-primary"
+        className="py-2 cursor-pointer focus:outline-none focus:text-primary hover:text-primary animate__animated animate__fadeIn"
       >
-        <Icon size="16px" />
+        <Icon size="18px" />
       </Link>
     </Tooltip>
   );

src/contexts/MetadataContext.js

@@ -1,70 +0,0 @@
-import { clone, setWith } from 'lodash';
-import React, {
-  createContext,
-  memo,
-  useCallback,
-  useContext,
-  useReducer,
-} from 'react';
-import leftSections from '../data/leftSections';
-import DatabaseContext from './DatabaseContext';
-import { useSelector as useResumeSelector } from './ResumeContext';
-
-const initialState = {
-  template: 'Onyx',
-  font: 'Montserrat',
-  layout: [leftSections.map(({ id, name }) => ({ id, name }))],
-  colors: {
-    textColor: '#444444',
-    primaryColor: '#5875DB',
-    backgroundColor: '#FFFFFF',
-  },
-};
-
-const MetadataContext = createContext({});
-
-const MetadataProvider = ({ children }) => {
-  const id = useResumeSelector((state) => state.id);
-  const { debouncedUpdateMetadata } = useContext(DatabaseContext);
-
-  const memoizedReducer = useCallback(
-    (state, { type, payload }) => {
-      let newState;
-
-      switch (type) {
-        case 'set_layout':
-          newState = setWith(clone(state), 'layout', payload, clone);
-          debouncedUpdateMetadata(id, newState);
-          return newState;
-
-        default:
-          throw new Error();
-      }
-    },
-    [id, debouncedUpdateMetadata],
-  );
-
-  const [state, dispatch] = useReducer(memoizedReducer, initialState);
-
-  const selectValue = (callback) => callback(state);
-
-  return (
-    <MetadataContext.Provider value={{ selectValue, dispatch }}>
-      {children}
-    </MetadataContext.Provider>
-  );
-};
-
-const useSelector = (callback) => {
-  const { selectValue } = useContext(MetadataContext);
-  return selectValue(callback);
-};
-
-const useDispatch = () => {
-  const { dispatch } = useContext(MetadataContext);
-  return dispatch;
-};
-
-const memoizedProvider = memo(MetadataProvider);
-
-export { memoizedProvider as MetadataProvider, useSelector, useDispatch };

src/contexts/ResumeContext.js

@@ -1,5 +1,5 @@
 import arrayMove from 'array-move';
-import { clone, findIndex, get, setWith } from 'lodash';
+import { clone, findIndex, get, isUndefined, setWith } from 'lodash';
 import React, {
   createContext,
   memo,
@@ -7,9 +7,22 @@ import React, {
   useContext,
   useReducer,
 } from 'react';
+import leftSections from '../data/leftSections';
 import DatabaseContext from './DatabaseContext';
 
-const initialState = {};
+const initialState = {
+  name: '',
+  metadata: {
+    template: 'onyx',
+    font: 'Montserrat',
+    layout: [leftSections.map(({ id, name }) => ({ id, name }))],
+    colors: {
+      text: '#444444',
+      primary: '#5875DB',
+      background: '#FFFFFF',
+    },
+  },
+};
 
 const ResumeContext = createContext({});
 
@@ -89,18 +102,22 @@ const ResumeProvider = ({ children }) => {
 
   const [state, dispatch] = useReducer(memoizedReducer, initialState);
 
-  const selectValue = (callback) => callback(state);
-
   return (
-    <ResumeContext.Provider value={{ selectValue, dispatch }}>
+    <ResumeContext.Provider value={{ state, dispatch }}>
       {children}
     </ResumeContext.Provider>
   );
 };
 
-const useSelector = (callback) => {
+const useSelector = (path, fallback) => {
-  const { selectValue } = useContext(ResumeContext);
+  const { state } = useContext(ResumeContext);
-  return selectValue(callback);
+  let value = get(state, path);
+
+  if (isUndefined(value)) {
+    value = isUndefined(fallback) ? state : fallback;
+  }
+
+  return value;
 };
 
 const useDispatch = () => {

src/contexts/StorageContext.js

@@ -16,7 +16,7 @@ const StorageProvider = ({ children }) => {
 
   const { user } = useContext(UserContext);
 
-  const id = useSelector((state) => state.id);
+  const id = useSelector('id');
   const dispatch = useDispatch();
 
   const uploadPhotograph = async (file) => {

src/data/rightSections.js

@@ -1,6 +1,11 @@
-import { MdDashboard } from 'react-icons/md';
+import { MdDashboard, MdStyle } from 'react-icons/md';
 
 export default [
+  {
+    id: 'templates',
+    name: 'Templates',
+    icon: MdStyle,
+  },
   {
     id: 'layout',
     name: 'Layout',

src/data/templates.js

@@ -0,0 +1,14 @@
+const templates = [
+  {
+    id: 'onyx',
+    name: 'Onyx',
+    preview: 'https://source.unsplash.com/random/300x500',
+  },
+  {
+    id: 'pikachu',
+    name: 'Pikachu',
+    preview: 'https://source.unsplash.com/random/301x501',
+  },
+];
+
+export default templates;

src/modals/ResumeModal.js

@@ -6,9 +6,20 @@ import ModalEvents from '../constants/ModalEvents';
 import DatabaseContext from '../contexts/DatabaseContext';
 import { getFieldProps } from '../utils';
 import DataModal from './DataModal';
+import leftSections from '../data/leftSections';
 
 const initialValues = {
   name: '',
+  metadata: {
+    template: 'onyx',
+    font: 'Montserrat',
+    layout: [leftSections.map(({ id, name }) => ({ id, name }))],
+    colors: {
+      text: '#444444',
+      primary: '#5875DB',
+      background: '#FFFFFF',
+    },
+  },
 };
 
 const schema = Yup.object().shape({

src/pages/app/dashboard.js

@@ -1,5 +1,5 @@
 import firebase from 'gatsby-plugin-firebase';
-import React, { memo, useEffect, useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import { Helmet } from 'react-helmet';
 import CreateResume from '../../components/dashboard/CreateResume';
 import ResumePreview from '../../components/dashboard/ResumePreview';
@@ -27,6 +27,15 @@ const Dashboard = ({ user }) => {
         setLoading(false);
       });
 
+    firebase
+      .database()
+      .ref(ref)
+      .on('child_removed', (snapshot) => {
+        if (snapshot.val()) {
+          setResumes(resumes.filter((x) => x.id === snapshot.val().id));
+        }
+      });
+
     return () => {
       firebase.database().ref(ref).off();
     };
@@ -58,4 +67,4 @@ const Dashboard = ({ user }) => {
   );
 };
 
-export default memo(Dashboard);
+export default Dashboard;

src/templates/Onyx.js

@@ -2,13 +2,16 @@ import React, { memo } from 'react';
 import { FaGlobeAmericas, FaPhone } from 'react-icons/fa';
 import { MdEmail } from 'react-icons/md';
 
-const Onyx = ({ data, layout, colors }) => {
+const Onyx = ({ data }) => {
+  const { profile, metadata } = data;
+  const { colors, layout } = metadata;
+
   return (
     <div
       className="p-8 grid grid-cols-10 gap-4 items-center"
       style={{
-        color: colors.textColor,
+        color: colors.text,
-        backgroundColor: colors.backgroundColor,
+        backgroundColor: colors.background,
       }}
     >
       <img
@@ -17,11 +20,8 @@ const Onyx = ({ data, layout, colors }) => {
         alt="Photograph"
       />
       <div className="col-span-5">
-        <h2
+        <h2 className="text-4xl font-bold" style={{ color: colors.primary }}>
-          className="text-4xl font-bold"
+          {profile.firstName} {profile.lastName}
-          style={{ color: colors.primaryColor }}
-        >
-          {data.profile.firstName} {data.profile.lastName}
         </h2>
         <span className="font-medium">Customer Sales Representative</span>
 
@@ -33,17 +33,17 @@ const Onyx = ({ data, layout, colors }) => {
       </div>
       <div className="col-span-3 grid gap-4">
         <div className="flex items-center">
-          <FaPhone size="14" style={{ color: colors.primaryColor }} />
+          <FaPhone size="14" style={{ color: colors.primary }} />
           <span className="ml-4 text-sm font-medium">+1 661-808-4188</span>
         </div>
 
         <div className="flex items-center">
-          <FaGlobeAmericas size="14" style={{ color: colors.primaryColor }} />
+          <FaGlobeAmericas size="14" style={{ color: colors.primary }} />
           <span className="ml-4 text-sm font-medium">nancyontheweb.com</span>
         </div>
 
         <div className="flex items-center">
-          <MdEmail size="14" style={{ color: colors.primaryColor }} />
+          <MdEmail size="14" style={{ color: colors.primary }} />
           <span className="ml-4 text-sm font-medium">
             nancyjack43@gmail.com
           </span>

tailwind.config.js

@@ -5,6 +5,9 @@ module.exports = {
       center: true,
     },
     extend: {
+      cursor: {
+        'context-menu': 'context-menu',
+      },
       colors: {
         primary: 'var(--color-primary)',
         'primary-dark': 'var(--color-primary-dark)',