From 43a73aae8a91ea6dc8a0de6ac4262ce2453db1bc Mon Sep 17 00:00:00 2001
From: Bradley Shellnut <bradleyshellnut@protonmail.com>
Date: Mon, 27 Sep 2021 20:14:16 -0700
Subject: [PATCH] Added local storage, script, and theme hooks.

---
 src/App.css                  |  2 ++
 src/App.js                   |  6 ++++
 src/Elements.js              |  1 +
 src/components/Hover.js      |  7 ++---
 src/components/Local.js      | 14 +++++++++
 src/components/Script.js     | 15 +++++++++
 src/components/Theme.js      | 16 ++++++++++
 src/hooks/index.js           |  3 ++
 src/hooks/useLocalStorage.js | 12 ++++++++
 src/hooks/useScript.js       | 59 ++++++++++++++++++++++++++++++++++++
 src/hooks/useTheme.js        | 14 +++++++++
 src/index.css                | 15 +++++++--
 12 files changed, 157 insertions(+), 7 deletions(-)
 create mode 100644 src/components/Local.js
 create mode 100644 src/components/Script.js
 create mode 100644 src/components/Theme.js
 create mode 100644 src/hooks/useLocalStorage.js
 create mode 100644 src/hooks/useScript.js
 create mode 100644 src/hooks/useTheme.js

diff --git a/src/App.css b/src/App.css
index ae50583..7d0865b 100644
--- a/src/App.css
+++ b/src/App.css
@@ -4,4 +4,6 @@
   --blue: #4f8cdd;
   --black: #3b2c41;
   --green: #a3ffc1;
+  --bg: #fff;
+  --text: #333;
 }
diff --git a/src/App.js b/src/App.js
index 49ac630..3ef5321 100644
--- a/src/App.js
+++ b/src/App.js
@@ -6,6 +6,9 @@ import Inc from './components/Inc';
 import Mount from './components/Mount';
 import Hover from './components/Hover';
 import Cookie from "./components/Cookie";
+import Script from './components/Script';
+import Local from './components/Local';
+import Theme from './components/Theme';
 import { PageWrapper } from "./state";
 import Nav from "./components/Nav";
 import Menu from "./Menu";
@@ -25,10 +28,13 @@ function App() {
         <Nav />
         <Container>
           <h2>Super Cool</h2>
+          <Theme />
+          <Script />
           <Toggle />
           <Inc />
           <Mount />
           <Cookie />
+          <Local />
           <Hover />
 
           <CardGrid>
diff --git a/src/Elements.js b/src/Elements.js
index 073c2d3..14603e7 100644
--- a/src/Elements.js
+++ b/src/Elements.js
@@ -21,6 +21,7 @@ export const Container = styled.div`
   max-width: 600px;
   margin: 0 auto;
   padding-bottom: 60px;
+  color: var(--text);
 `;
 
 export const CardGrid = styled.div`
diff --git a/src/components/Hover.js b/src/components/Hover.js
index 019a210..1c4d53d 100644
--- a/src/components/Hover.js
+++ b/src/components/Hover.js
@@ -1,4 +1,3 @@
-import React from 'react';
 import { Card } from '../Elements';
 import black from "../black.png"
 import { useHover, useWindowWidth, useMeasure } from '../hooks';
@@ -6,15 +5,15 @@ import { useHover, useWindowWidth, useMeasure } from '../hooks';
 export const Hover = () => {
   const [ isHovered, bind ] = useHover();
   const width = useWindowWidth();
-  const [{ref}, bounds] = useMeasure();
-  console.log('bounds', bounds);
+  // const [{ref}, bounds] = useMeasure();
+  // console.log('bounds', bounds);
 
   if (width < 500) return null;
 
   return (
     <div>
         <Card 
-          ref={ref}
+          // ref={ref}
           {...bind}
           style={{ background: isHovered ? "var(--purp)" : "var(--black)" }}
         >
diff --git a/src/components/Local.js b/src/components/Local.js
new file mode 100644
index 0000000..93689d7
--- /dev/null
+++ b/src/components/Local.js
@@ -0,0 +1,14 @@
+import { useLocalStorage } from "../hooks";
+
+const Local = () => {
+  const [ value, setValue ] = useLocalStorage("tester", "I am initial");
+
+  return (
+    <div>
+      <h1>{value || ''}</h1>
+      <input type="text" value={value} onChange={(e) => setValue(e.target.value)} />
+    </div>
+  )
+}
+
+export default Local;
\ No newline at end of file
diff --git a/src/components/Script.js b/src/components/Script.js
new file mode 100644
index 0000000..1f12a7b
--- /dev/null
+++ b/src/components/Script.js
@@ -0,0 +1,15 @@
+import { useScript } from "../hooks"
+
+const Script = () => {
+  const [ isLoaded, isError ]  = useScript('https://www.google.com/recaptcha/api.js');
+  console.log('isLoaded, isError', isLoaded, isError);
+  if (!isLoaded) return null;
+
+  return (
+    <div>
+      <h3>Script</h3>
+    </div>
+  )
+}
+
+export default Script;
\ No newline at end of file
diff --git a/src/components/Theme.js b/src/components/Theme.js
new file mode 100644
index 0000000..56d4e3b
--- /dev/null
+++ b/src/components/Theme.js
@@ -0,0 +1,16 @@
+import { useTheme } from "../hooks";
+
+const Theme = () => {
+  const [theme, setTheme] = useTheme();
+  return (
+    <div>
+      <select name="" id="" defaultValue={theme}
+      onChange={(e) => setTheme(e.target.value)}>
+        <option value="light">Light</option>
+        <option value="dark">Dark</option>
+      </select>
+    </div>
+  )
+}
+
+export default Theme;
\ No newline at end of file
diff --git a/src/hooks/index.js b/src/hooks/index.js
index 0966ee1..8562d97 100644
--- a/src/hooks/index.js
+++ b/src/hooks/index.js
@@ -1,8 +1,11 @@
 export * from './useCookie';
 export * from './useHover';
 export * from './useInc';
+export * from './useLocalStorage';
 export * from './useMeasure';
 export * from './useMount';
 export * from './useScrollFreeze';
+export * from './useScript';
+export * from './useTheme';
 export * from './useToggle';
 export * from './useWindowWidth';
diff --git a/src/hooks/useLocalStorage.js b/src/hooks/useLocalStorage.js
new file mode 100644
index 0000000..4255d35
--- /dev/null
+++ b/src/hooks/useLocalStorage.js
@@ -0,0 +1,12 @@
+import { useState, useEffect } from 'react';
+
+export const useLocalStorage = (key, initial) => {
+  const item = window.localStorage.getItem(key);
+  const [ value, setValue ] = useState(item || initial);
+
+  useEffect(() => {
+    window.localStorage.setItem(key, value);
+  }, [value, key, initial]);
+
+  return [ value, setValue ];
+};
\ No newline at end of file
diff --git a/src/hooks/useScript.js b/src/hooks/useScript.js
new file mode 100644
index 0000000..81471fd
--- /dev/null
+++ b/src/hooks/useScript.js
@@ -0,0 +1,59 @@
+import { useState, useEffect } from 'react';
+
+let cached = [];
+
+export const useScript = (src) => {
+  const [ status, setStatus ] = useState({
+    loaded: false,
+    error: false,
+  });
+
+  useEffect(() => {
+    if (cached.includes(src)) {
+      setStatus({
+        loaded: true,
+        error: false,
+      });
+    } else {
+      cached.push(src);
+
+      const script = document.createElement('script');
+      script.src = src;
+      script.async = true;
+
+      const onLoad = () => {
+        setStatus({
+          loaded: true,
+          error: false,
+        });
+      }
+
+      const onError = () => {
+        const i = cached.indexOf(src);
+        if (i >= 0) {
+          cached.splice(i, 1);
+        }
+        // cached = cached.filter(item => item !== src); 
+
+        script.remove();
+        
+        setStatus({
+          loaded: true,
+          error: true,
+        });
+      }
+
+      script.addEventListener('load', onLoad);
+      script.addEventListener('error', onError);
+
+      document.body.appendChild(script);
+      
+      return () => {
+        script.removeEventListener('load', onLoad);
+        script.removeEventListener('error', onError);
+      }
+    }
+  }, [src]);
+
+  return [ status.loaded, status.error ];
+}
\ No newline at end of file
diff --git a/src/hooks/useTheme.js b/src/hooks/useTheme.js
new file mode 100644
index 0000000..2e5c1ee
--- /dev/null
+++ b/src/hooks/useTheme.js
@@ -0,0 +1,14 @@
+import { useEffect } from 'react';
+import { useLocalStorage } from './useLocalStorage';
+
+export const useTheme = () => {
+  const [theme, setTheme] = useLocalStorage('theme', 'light');
+
+  useEffect(() => {
+    // Removing all class names on body before setting, could keep and only remove what we want
+    document.body.className = "";
+    document.body.classList.add(theme);
+  }, [theme]);
+
+  return [theme, setTheme];
+}
\ No newline at end of file
diff --git a/src/index.css b/src/index.css
index ec2585e..d51119f 100644
--- a/src/index.css
+++ b/src/index.css
@@ -1,13 +1,22 @@
 body {
   margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
-    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
+    "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
     sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
 
 code {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
+  font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
     monospace;
 }
+
+body {
+  background: var(--bg);
+}
+
+body.dark {
+  --bg: #333;
+  --text: #fff;
+}