- refactor sections

- combine resume and metadata contexts

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 { selectValue } = useContext(ResumeContext);
-  return selectValue(callback);
+const useSelector = (path, fallback) => {
+  const { state } = useContext(ResumeContext);
+  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) => {