Rick Mansfield's Push-Pull Req for Custom Hooks Project

.vscode/settings.json

@@ -0,0 +1,7 @@
+{
+    "workbench.colorCustomizations": {
+        "activityBar.background": "#102F4B",
+        "titleBar.activeBackground": "#164269",
+        "titleBar.activeForeground": "#FAFCFE"
+    }
+}

README.md

@@ -2,6 +2,18 @@
 
 This project allows you to practice the concepts and techniques learned in this module and apply them in a concrete project. This module explored Form management in React. You learned what stateful logic is, how to build custom hooks, and how to compose multiple hooks together. In your project you will demonstrate proficiency of these subjects and principles by creating an application using each of these.
 
+- [Module Project: Composing Stateful Logic - Dark Mode](#module-project-composing-stateful-logic---dark-mode)
+  - [Instructions](#instructions)
+    - [Commits](#commits)
+    - [Description](#description)
+  - [Project Set Up](#project-set-up)
+  - [Minimum Viable Product](#minimum-viable-product)
+  - [STEP 1 - useLocalStorage](#step-1---uselocalstorage)
+  - [STEP 2 - useDarkMode](#step-2---usedarkmode)
+  - [STEP 3 - Using the hook in a component](#step-3---using-the-hook-in-a-component)
+  - [Stretch Problems](#stretch-problems)
+  - [Submission Format](#submission-format)
+  - [Rick Mansfield's Pull Req Link](#rick-mansfields-pull-req-link)
 ## Instructions
 
 **Read these instructions carefully. Understand exactly what is expected _before_ starting this project.**
@@ -130,3 +142,7 @@ After finishing your required elements, you can push your work further. These go
 - [ ] Submit a Pull-Request to merge <firstName-lastName> Branch into `main` (student's Repository). **Please don't merge your own pull request**
 - [ ] From the home page of your repo, make sure you have your branch selected
 - [ ] Copy the URL and paste it into Canvas to submit your project
+
+## Rick Mansfield's Pull Req Link
+
+- [Link for Convenience](https://github.com/LambdaSchool/web-module-project-custom-hook/pull/75)

src/components/hooks/useDarkMode.js

@@ -0,0 +1,7 @@
+import { useLocalStorage } from './useLocalStorage';
+
+export const useDarkMode = (key) => {
+    const [value, setValue] = useLocalStorage(key)
+
+    return([value, setValue])
+}

src/components/hooks/useLocalStorage.js

@@ -0,0 +1,34 @@
+// import { useState } from "react";
+
+// const useLocalStorage = (key, initialValue) => {
+
+//     const [value, setValue] = useState(() => {
+//         if (localStorage.getItem(key)) {
+//             return (JSON.parse(localStorage.getItem(key)));
+//         } else {
+//             localStorage.setItem(key, JSON.stringify(initialValue));
+//             return initialValue;
+//         }
+//     });
+//     const setStoredValue = (value) => {
+//         localStorage.setItem(key, JSON.stringify(value));
+//         setValue(value);
+//     }
+
+//     return ([value, setStoredValue]);
+// }
+// export default useLocalStorage;
+
+import { useState } from 'react';
+
+export const useLocalStorage = (key, initialValue) => {
+    const [storedValue, setStoredValue] = useState(() => {
+        const item = window.localStorage.getItem(key);
+        return item ? JSON.parse(item) : initialValue;
+    })
+    const setValue = value => {
+        setStoredValue(value);
+        window.localStorage.setItem(key, JSON.stringify(value))
+    }
+    return([storedValue, setValue])
+}

src/index.js

@@ -1,6 +1,7 @@
 import React, { useState, useEffect } from "react";
 import ReactDOM from "react-dom";
 import axios from "axios";
+import { useDarkMode } from "./hooks/useDarkMode";
 
 import Charts from "./components/Charts";
 import Navbar from "./components/Navbar";
@@ -10,7 +11,7 @@ import "./styles.scss";
 
 const App = () => {
   const [coinData, setCoinData] = useState([]);
-  const [darkMode, setDarkMode] = useState(false);
+  const [darkMode, setDarkMode] = useDarkMode(false);
 
   useEffect(() => {
     axios
@@ -21,7 +22,7 @@ const App = () => {
       .catch(err => console.log(err));
   }, []);
   return (
-    <div className={darkMode ? "dark-mode App" : "App"}>
+    <div className={darkMode? "dark-mode App" : "App"}>
       <Navbar darkMode={darkMode} setDarkMode={setDarkMode} />
       <Charts coinData={coinData} />
     </div>

src/index1.js

@@ -0,0 +1,32 @@
+import React, { useState, useEffect } from "react";
+import ReactDOM from "react-dom";
+import axios from "axios";
+
+import Charts from "./components/Charts";
+import Navbar from "./components/Navbar";
+
+
+import "./styles.scss";
+
+const App = () => {
+  const [coinData, setCoinData] = useState([]);
+  const [darkMode, setDarkMode] = useState(false);
+
+  useEffect(() => {
+    axios
+      .get(
+        "https://api.coingecko.com/api/v3/coins/markets?vs_currency=usd&order=market_cap_desc&per_page=10&page=1&sparkline=true"
+      )
+      .then(res => setCoinData(res.data))
+      .catch(err => console.log(err));
+  }, []);
+  return (
+    <div className={darkMode ? "dark-mode App" : "App"}>
+      <Navbar darkMode={darkMode} setDarkMode={setDarkMode} />
+      <Charts coinData={coinData} />
+    </div>
+  );
+};
+
+const rootElement = document.getElementById("root");
+ReactDOM.render(<App />, rootElement);