From fb7fce3a87fbe8a98dd25978bcad1dee341de8ba Mon Sep 17 00:00:00 2001 From: Anthony Climer Date: Mon, 13 Feb 2023 22:00:30 -0500 Subject: [PATCH] Completed the p for mod 3 --- frontend/App.js | 4 +++- frontend/hooks/useDarkMode.js | 8 ++++++++ frontend/hooks/useLocalStorage.js | 19 +++++++++++++++++++ 3 files changed, 30 insertions(+), 1 deletion(-) create mode 100644 frontend/hooks/useDarkMode.js create mode 100644 frontend/hooks/useLocalStorage.js diff --git a/frontend/App.js b/frontend/App.js index 93ae8648..b4780cf7 100644 --- a/frontend/App.js +++ b/frontend/App.js @@ -4,9 +4,11 @@ import axios from "axios"; import Charts from "./components/Charts"; import Navbar from "./components/Navbar"; +import useDarkMode from './hooks/useDarkMode' + const App = () => { const [coinData, setCoinData] = useState([]); - const [darkMode, setDarkMode] = useState(false); + const [darkMode, setDarkMode] = useDarkMode(false); useEffect(() => { axios diff --git a/frontend/hooks/useDarkMode.js b/frontend/hooks/useDarkMode.js new file mode 100644 index 00000000..ced505a6 --- /dev/null +++ b/frontend/hooks/useDarkMode.js @@ -0,0 +1,8 @@ +import {useState} from 'react' +import useLocalStorage from './useLocalStorage'; + const useDarkMode = (initialValue) => { + const [darkMode, setDarkMode] = useLocalStorage('darkmode',initialValue); + return [darkMode, setDarkMode] + } + + export default useDarkMode; \ No newline at end of file diff --git a/frontend/hooks/useLocalStorage.js b/frontend/hooks/useLocalStorage.js new file mode 100644 index 00000000..d43b604d --- /dev/null +++ b/frontend/hooks/useLocalStorage.js @@ -0,0 +1,19 @@ +import React, {useState} from 'react' + +const useLocalStorage = (key, initialValue) => { + const [state, setState] = useState(()=>{ + if(localStorage.getItem(key)) { + return JSON.parse(localStorage.getItem(key)); + } + localStorage.setItem(key, JSON.stringify(initialValue)) + return initialValue + }); + + const setStoredState = (value) => { + localStorage.setItem(key, JSON.stringify(value)); + setState(value); + } + return ([state, setStoredState]); +} + +export default useLocalStorage; \ No newline at end of file