From 5b953d87825c0a472b051c362ace4813b7d3e897 Mon Sep 17 00:00:00 2001 From: Rick Date: Tue, 3 Aug 2021 09:16:37 -0500 Subject: [PATCH 1/4] Create TOC --- .vscode/settings.json | 7 +++++++ README.md | 11 +++++++++++ 2 files changed, 18 insertions(+) create mode 100644 .vscode/settings.json diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 00000000..4f6bd6ce --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,7 @@ +{ + "workbench.colorCustomizations": { + "activityBar.background": "#102F4B", + "titleBar.activeBackground": "#164269", + "titleBar.activeForeground": "#FAFCFE" + } +} \ No newline at end of file diff --git a/README.md b/README.md index 462abb74..b31bb5ff 100644 --- a/README.md +++ b/README.md @@ -2,6 +2,17 @@ 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) ## Instructions **Read these instructions carefully. Understand exactly what is expected _before_ starting this project.** From 8ecf70909751601ba2d02a018a63be96505460af Mon Sep 17 00:00:00 2001 From: Rick Date: Tue, 3 Aug 2021 09:18:57 -0500 Subject: [PATCH 2/4] Add Pull Req Link to ReadMe.md --- README.md | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/README.md b/README.md index b31bb5ff..1c3f10d6 100644 --- a/README.md +++ b/README.md @@ -13,6 +13,7 @@ This project allows you to practice the concepts and techniques learned in this - [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.** @@ -141,3 +142,7 @@ After finishing your required elements, you can push your work further. These go - [ ] Submit a Pull-Request to merge 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) \ No newline at end of file From d9d1abe3fbb459286a4838588200b617e95ae1a4 Mon Sep 17 00:00:00 2001 From: Rick Date: Tue, 3 Aug 2021 18:55:40 -0500 Subject: [PATCH 3/4] Added Hooks folder, useDarkMode.js --- src/components/hooks/useDarkMode.js | 7 +++++ src/components/hooks/useLocalStorage.js | 34 +++++++++++++++++++++++++ 2 files changed, 41 insertions(+) create mode 100644 src/components/hooks/useDarkMode.js create mode 100644 src/components/hooks/useLocalStorage.js diff --git a/src/components/hooks/useDarkMode.js b/src/components/hooks/useDarkMode.js new file mode 100644 index 00000000..451e0899 --- /dev/null +++ b/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]) +} \ No newline at end of file diff --git a/src/components/hooks/useLocalStorage.js b/src/components/hooks/useLocalStorage.js new file mode 100644 index 00000000..e887c6c0 --- /dev/null +++ b/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]) +} \ No newline at end of file From 5e0721c24f85c0e79e9b3952094935b7f3364edb Mon Sep 17 00:00:00 2001 From: Rick Date: Tue, 3 Aug 2021 18:58:35 -0500 Subject: [PATCH 4/4] MVP met --- src/index.js | 5 +++-- src/index1.js | 32 ++++++++++++++++++++++++++++++++ 2 files changed, 35 insertions(+), 2 deletions(-) create mode 100644 src/index1.js diff --git a/src/index.js b/src/index.js index 956fe3a7..1f3cf664 100755 --- a/src/index.js +++ b/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 ( -
+
diff --git a/src/index1.js b/src/index1.js new file mode 100644 index 00000000..956fe3a7 --- /dev/null +++ b/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 ( +
+ + +
+ ); +}; + +const rootElement = document.getElementById("root"); +ReactDOM.render(, rootElement);