- recreating onyx template

- profile section complete

src/contexts/ResumeContext.js

@@ -2,11 +2,14 @@ import { set } from "lodash";
 import React, { createContext, useReducer } from "react";
 
 const initialState = {
+  id: "dafa3242-f39a-4755-bab3-be3c3ca3d190",
   profile: {
     photograph: "",
     firstName: "",
     lastName: "",
   },
+  createdAt: "",
+  updatedAt: "",
 };
 
 const ResumeContext = createContext(initialState);
@@ -16,6 +19,8 @@ const ResumeProvider = ({ children }) => {
     switch (type) {
       case "on_input":
         return set({ ...state }, payload.path, payload.value);
+      case "set_data":
+        return payload;
       default:
         throw new Error();
     }

src/contexts/TemplateContext.js

@@ -1,18 +1,17 @@
+import { flatten } from "lodash";
 import React, { createContext, useState } from "react";
 
 const defaultState = {
   selected: "Pikachu",
   setSelected: () => {},
+  colors: {
+    textColor: "#212121",
+    primaryColor: "#f44336",
+    backgroundColor: "#FFFFFF",
+  },
   blocks: [
-    [
-      { id: "1", name: "Profile" },
-      { id: "2", name: "Work" },
-    ],
-    [
-      { id: "3", name: "Education" },
-      { id: "4", name: "Skills" },
-      { id: "5", name: "Hobbies" },
-    ],
+    ["profile", "work"],
+    ["education", "skills", "hobbies"],
   ],
   setBlocks: () => {},
 };
@@ -21,6 +20,7 @@ const TemplateContext = createContext(defaultState);
 
 const TemplateProvider = ({ children }) => {
   const [selected, setSelected] = useState(defaultState.selected);
+  const [colors, setColors] = useState(defaultState.colors);
   const [blocks, setBlocks] = useState(defaultState.blocks);
 
   const reorder = (list, startIndex, endIndex) => {
@@ -68,13 +68,28 @@ const TemplateProvider = ({ children }) => {
     }
   };
 
+  const setSupportedBlocks = (number) => {
+    if (number === blocks.length) return;
+
+    if (number > blocks.length) {
+      setBlocks([...blocks, []]);
+    }
+
+    if (number < blocks.length) {
+      setBlocks([flatten(blocks)]);
+    }
+  };
+
   return (
     <TemplateContext.Provider
       value={{
         selected,
         setSelected,
+        colors,
+        setColors,
         blocks,
         setBlocks,
+        setSupportedBlocks,
         onDragEnd,
       }}
     >

src/contexts/ThemeContext.js

@@ -6,6 +6,7 @@ const COLOR_CONFIG = {
     "--color-primary-dark": "#333",
     "--color-inverse": "#fff",
     "--color-inverse-dark": "#f5f5f5",
+    "--color-secondary-light": "#f7fafc",
     "--color-secondary": "#edf2f7",
     "--color-secondary-dark": "#718096",
   },
@@ -14,6 +15,7 @@ const COLOR_CONFIG = {
     "--color-primary-dark": "#eeeeee",
     "--color-inverse": "#212121",
     "--color-inverse-dark": "#181818",
+    "--color-secondary-light": "#2c2c2c",
     "--color-secondary": "#444",
     "--color-secondary-dark": "#888",
   },