- completed design of Onyx template

src/contexts/DatabaseContext.js

@@ -8,6 +8,7 @@ import React, {
   useState,
 } from 'react';
 import UserContext from './UserContext';
+import initialState from '../data/initialState';
 
 const DEBOUNCE_WAIT_TIME = 4000;
 
@@ -46,8 +47,7 @@ const DatabaseProvider = ({ children }) => {
     return snapshot.val();
   };
 
-  const createResume = (resume) => {
-    const { id } = resume;
+  const createResume = ({ id, name }) => {
     const createdAt = firebase.database.ServerValue.TIMESTAMP;
 
     let firstName;
@@ -61,11 +61,14 @@ const DatabaseProvider = ({ children }) => {
       .database()
       .ref(`users/${user.uid}/resumes/${id}`)
       .set({
+        ...initialState,
+        id,
+        name,
         profile: {
+          ...initialState.profile,
           firstName: firstName || '',
           lastName: lastName || '',
         },
-        ...resume,
         createdAt,
         updatedAt: createdAt,
       });

src/contexts/PageContext.js

@@ -0,0 +1,7 @@
+import { createContext } from 'react';
+
+const defaultState = {};
+
+const PageContext = createContext(defaultState);
+
+export default PageContext;

src/contexts/ResumeContext.js

@@ -1,5 +1,14 @@
 import arrayMove from 'array-move';
-import { clone, findIndex, get, isUndefined, setWith } from 'lodash';
+import {
+  clone,
+  findIndex,
+  get,
+  isUndefined,
+  setWith,
+  flatten,
+  concat,
+  times,
+} from 'lodash';
 import React, {
   createContext,
   memo,
@@ -7,22 +16,8 @@ import React, {
   useContext,
   useReducer,
 } from 'react';
-import leftSections from '../data/leftSections';
 import DatabaseContext from './DatabaseContext';
-
-const initialState = {
-  name: '',
-  metadata: {
-    template: 'onyx',
-    font: 'Montserrat',
-    layout: [leftSections.map(({ id, name }) => ({ id, name }))],
-    colors: {
-      text: '#444444',
-      primary: '#5875DB',
-      background: '#FFFFFF',
-    },
-  },
-};
+import initialState from '../data/initialState';
 
 const ResumeContext = createContext({});
 
@@ -34,6 +29,8 @@ const ResumeProvider = ({ children }) => {
       let newState;
       let index;
       let items;
+      let diff;
+      let temp;
 
       switch (type) {
         case 'on_add_item':
@@ -85,6 +82,30 @@ const ResumeProvider = ({ children }) => {
           debouncedUpdateResume(newState);
           return newState;
 
+        case 'set_block_count':
+          items = get(state, 'metadata.layout');
+
+          if (items.length === payload) return state;
+
+          if (payload === 1) {
+            items = flatten(items);
+          }
+
+          if (items.length > payload) {
+            diff = items.length - payload;
+            temp = items.splice(Math.max(items.length - diff, 1));
+            items[0] = concat(items[0], flatten(temp));
+          }
+
+          if (items.length < payload) {
+            diff = payload - items.length;
+            times(diff, () => items.push([]));
+          }
+
+          newState = setWith(clone(state), 'metadata.layout', items, clone);
+          debouncedUpdateResume(newState);
+          return newState;
+
         case 'on_input':
           newState = setWith(clone(state), payload.path, payload.value, clone);
           debouncedUpdateResume(newState);
@@ -132,4 +153,9 @@ const useDispatch = () => {
 
 const memoizedProvider = memo(ResumeProvider);
 
-export { memoizedProvider as ResumeProvider, useSelector, useDispatch };
+export {
+  ResumeContext,
+  memoizedProvider as ResumeProvider,
+  useSelector,
+  useDispatch,
+};

src/contexts/StorageContext.js

@@ -62,11 +62,9 @@ const StorageProvider = ({ children }) => {
           render:
             'Your photograph was uploaded successfully... and you look great!',
           progress,
-          autoClose: 5000,
+          autoClose: 2000,
           hideProgressBar: true,
         });
-
-        toastId.current = null;
       },
     );
   };