- switched to useSelector

- implemented skills section

src/contexts/ResumeContext.js

@@ -86,13 +86,23 @@ const ResumeProvider = ({ children }) => {
 
   const [state, dispatch] = useReducer(memoizedReducer, initialState);
 
+  const selectValue = (callback) => callback(state);
+
   return (
-    <ResumeContext.Provider value={{ state, dispatch }}>
+    <ResumeContext.Provider value={{ selectValue, dispatch }}>
       {children}
     </ResumeContext.Provider>
   );
 };
 
-export default ResumeContext;
+const useSelector = (callback) => {
+  const { selectValue } = useContext(ResumeContext);
+  return selectValue(callback);
+};
 
-export { ResumeProvider };
+const useDispatch = () => {
+  const { dispatch } = useContext(ResumeContext);
+  return dispatch;
+};
+
+export { ResumeProvider, useSelector, useDispatch };

src/contexts/StorageContext.js

@@ -2,7 +2,7 @@ import firebase from "gatsby-plugin-firebase";
 import React, { createContext, useContext, useRef } from "react";
 import { toast } from "react-toastify";
 import { isFileImage } from "../utils";
-import ResumeContext from "./ResumeContext";
+import { useDispatch, useSelector } from "./ResumeContext";
 import UserContext from "./UserContext";
 
 const defaultState = {
@@ -15,7 +15,9 @@ const StorageProvider = ({ children }) => {
   const toastId = useRef(null);
 
   const { user } = useContext(UserContext);
-  const { state, dispatch } = useContext(ResumeContext);
+
+  const id = useSelector((state) => state.id);
+  const dispatch = useDispatch();
 
   const uploadPhotograph = async (file) => {
     if (!isFileImage(file)) {
@@ -27,7 +29,7 @@ const StorageProvider = ({ children }) => {
 
     const uploadTask = firebase
       .storage()
-      .ref(`/users/${user.uid}/photographs/${state.id}`)
+      .ref(`/users/${user.uid}/photographs/${id}`)
       .put(file);
 
     let progress = 0;