Gregory brewton

README.md

@@ -16,14 +16,14 @@ In this project you'll take this crypto currency tracker app and build two custo
 
 ## Project Set Up
 
-- [ ] Create a forked copy of this project.
-- [ ] Clone your OWN version of the repository in your terminal
-- [ ] CD into the project base directory `cd dark-mode`
-- [ ] Download project dependencies by running `npm install`
-- [ ] Start up the app using `npm start`
-- [ ] Create a new branch: git checkout -b `<firstName-lastName>`.
-- [ ] Implement the project on your newly created `<firstName-lastName>` branch, committing changes regularly.
-- [ ] Push commits: git push origin `<firstName-lastName>`.
+- [X] Create a forked copy of this project.
+- [X] Clone your OWN version of the repository in your terminal
+- [-] CD into the project base directory `cd dark-mode`
+- [X] Download project dependencies by running `npm install`
+- [X] Start up the app using `npm start`
+- [X] Create a new branch: git checkout -b `<firstName-lastName>`.
+- [X] Implement the project on your newly created `<firstName-lastName>` branch, committing changes regularly.
+- [X] Push commits: git push origin `<firstName-lastName>`.
 
 Follow these steps for completing your project.
 
@@ -33,7 +33,7 @@ Follow these steps for completing your project.
 
 ## Minimum Viable Product
 
-- [ ] Build a custom hook that let's you save data to localStorage
+- [X] Build a custom hook that lets you save data to localStorage
 - [ ] Build a second custom hook that sets the `dark-mode` class on the body element
 - [ ] Compose your two new hooks together to be able to set and persist your user's dark mode preference in your app
 

src/hooks/useDarkMode.jsx

@@ -0,0 +1,8 @@
+import useLocalStorage from "./useLocalStorage";
+
+const useDarkMode = (value) => {
+  const [darkMode, setDarkMode] = useLocalStorage("darkMode", value);
+  return [darkMode, setDarkMode];
+};
+
+export default useDarkMode;

src/hooks/useLocalStorage.jsx

@@ -0,0 +1,19 @@
+import { useState, useEffect } from "react";
+const localStorage = window.localStorage;
+
+const useLocalStorage = (key, initialValue) => {
+  // take in new data object
+  // create slice of state to hold data
+  const [storedValue, setStoredValue] = useState(() => {
+    const item = localStorage.getItem(key);
+    return item ? JSON.parse(item) : initialValue;
+  });
+  // on component mount or change in data value hold data passed to useLocalStorage in state then update local storage and return new data
+  useEffect(() => {
+    localStorage.setItem(key, JSON.stringify(storedValue));
+  }, [key, initialValue, storedValue]);
+
+  return [storedValue, setStoredValue];
+};
+
+export default useLocalStorage;

src/index.js

@@ -5,12 +5,13 @@ import axios from "axios";
 import Charts from "./components/Charts";
 import Navbar from "./components/Navbar";
 
-
 import "./styles.scss";
 
+import useDarkMode from "./hooks/useDarkMode";
+
 const App = () => {
   const [coinData, setCoinData] = useState([]);
-  const [darkMode, setDarkMode] = useState(false);
+  const [darkMode, setDarkMode] = useDarkMode(false)
 
   useEffect(() => {
     axios