From 5cab62fd7e7c5e553874512df8bd26798b5f8607 Mon Sep 17 00:00:00 2001
From: Bradley Shellnut <bradleyshellnut@protonmail.com>
Date: Fri, 24 Sep 2021 14:56:48 -0700
Subject: [PATCH] Creating custom hook to set cookies, measure component size
 with ref, scroll freeze on component, get window width.

---
 src/App.js                    | 69 +++++++++++++++++++----------------
 src/Menu.js                   | 39 +++++++++++---------
 src/components/Cookie.js      | 22 +++++++++++
 src/components/Hover.js       | 14 +++++--
 src/components/Nav.js         | 30 +++++++++++++++
 src/components/PageWrapper.js | 14 -------
 src/hooks/index.js            |  6 ++-
 src/hooks/useCookie.js        | 13 +++++++
 src/hooks/useMeasure.js       | 23 ++++++++++++
 src/hooks/useScrollFreeze.js  | 12 ++++++
 src/hooks/useWindowWidth.js   | 17 +++++++++
 src/state/PageWrapper.js      | 17 +++++++++
 src/state/index.js            |  1 +
 13 files changed, 211 insertions(+), 66 deletions(-)
 create mode 100644 src/components/Cookie.js
 create mode 100644 src/components/Nav.js
 delete mode 100644 src/components/PageWrapper.js
 create mode 100644 src/hooks/useCookie.js
 create mode 100644 src/hooks/useMeasure.js
 create mode 100644 src/hooks/useScrollFreeze.js
 create mode 100644 src/hooks/useWindowWidth.js
 create mode 100644 src/state/PageWrapper.js
 create mode 100644 src/state/index.js

diff --git a/src/App.js b/src/App.js
index 16c40fe..49ac630 100644
--- a/src/App.js
+++ b/src/App.js
@@ -5,6 +5,9 @@ import Toggle from './components/Toggle';
 import Inc from './components/Inc';
 import Mount from './components/Mount';
 import Hover from './components/Hover';
+import Cookie from "./components/Cookie";
+import { PageWrapper } from "./state";
+import Nav from "./components/Nav";
 import Menu from "./Menu";
 import blue from "./blue.png";
 import purp from "./purp.png";
@@ -13,38 +16,42 @@ import green from "./green.png";
 
 function App() {
   return (
-    <div>
-      <Header>
-        <Menu />
-        <h1>Header</h1>
-      </Header>
-      <Container>
-        <h2>Super Cool</h2>
-        <Toggle />
-        <Inc />
-        <Mount />
-        <Hover />
+    <PageWrapper>
+      <div>
+        <Header>
+          <Menu />
+          <h1>Header</h1>
+        </Header>
+        <Nav />
+        <Container>
+          <h2>Super Cool</h2>
+          <Toggle />
+          <Inc />
+          <Mount />
+          <Cookie />
+          <Hover />
 
-        <CardGrid>
-          <Card style={{ background: "var(--purp)" }}>
-            <h3>Some card</h3>
-            <img src={purp} />
-          </Card>
-          <Card style={{ background: "var(--blue)" }}>
-            <h3>Some card</h3>
-            <img src={blue} />
-          </Card>
-          <Card style={{ background: "var(--black)" }}>
-            <h3>Some card</h3>
-            <img src={black} />
-          </Card>
-          <Card style={{ background: "var(--green)" }}>
-            <h3>Some card</h3>
-            <img src={green} />
-          </Card>
-        </CardGrid>
-      </Container>
-    </div>
+          <CardGrid>
+            <Card style={{ background: "var(--purp)" }}>
+              <h3>Some card</h3>
+              <img src={purp} />
+            </Card>
+            <Card style={{ background: "var(--blue)" }}>
+              <h3>Some card</h3>
+              <img src={blue} />
+            </Card>
+            <Card style={{ background: "var(--black)" }}>
+              <h3>Some card</h3>
+              <img src={black} />
+            </Card>
+            <Card style={{ background: "var(--green)" }}>
+              <h3>Some card</h3>
+              <img src={green} />
+            </Card>
+          </CardGrid>
+        </Container>
+      </div>
+    </PageWrapper>
   );
 }
 
diff --git a/src/Menu.js b/src/Menu.js
index 0e8b98c..26c2465 100644
--- a/src/Menu.js
+++ b/src/Menu.js
@@ -1,20 +1,25 @@
-import React from "react";
+import { useAppState } from "./state";
 
-const Menu = () => (
-  <svg viewBox="0 0 18 15" width="20">
-    <path
-      fill="#fff"
-      d="M18,1.484c0,0.82-0.665,1.484-1.484,1.484H1.484C0.665,2.969,0,2.304,0,1.484l0,0C0,0.665,0.665,0,1.484,0 h15.031C17.335,0,18,0.665,18,1.484L18,1.484z"
-    />
-    <path
-      fill="#fff"
-      d="M18,7.516C18,8.335,17.335,9,16.516,9H1.484C0.665,9,0,8.335,0,7.516l0,0c0-0.82,0.665-1.484,1.484-1.484 h15.031C17.335,6.031,18,6.696,18,7.516L18,7.516z"
-    />
-    <path
-      fill="#fff"
-      d="M18,13.516C18,14.335,17.335,15,16.516,15H1.484C0.665,15,0,14.335,0,13.516l0,0 c0-0.82,0.665-1.484,1.484-1.484h15.031C17.335,12.031,18,12.696,18,13.516L18,13.516z"
-    />
-  </svg>
-);
+const Menu = () => {
+  const { toggleMenu } = useAppState();
+
+  return (
+    <button onClick={toggleMenu}>
+      <svg viewBox="0 0 18 15" width="20">
+        <path
+          fill="#fff"
+          d="M18,1.484c0,0.82-0.665,1.484-1.484,1.484H1.484C0.665,2.969,0,2.304,0,1.484l0,0C0,0.665,0.665,0,1.484,0 h15.031C17.335,0,18,0.665,18,1.484L18,1.484z"
+        />
+        <path
+          fill="#fff"
+          d="M18,7.516C18,8.335,17.335,9,16.516,9H1.484C0.665,9,0,8.335,0,7.516l0,0c0-0.82,0.665-1.484,1.484-1.484 h15.031C17.335,6.031,18,6.696,18,7.516L18,7.516z"
+        />
+        <path
+          fill="#fff"
+          d="M18,13.516C18,14.335,17.335,15,16.516,15H1.484C0.665,15,0,14.335,0,13.516l0,0 c0-0.82,0.665-1.484,1.484-1.484h15.031C17.335,12.031,18,12.696,18,13.516L18,13.516z"
+        />
+      </svg>
+  </button>
+)};
 
 export default Menu;
diff --git a/src/components/Cookie.js b/src/components/Cookie.js
new file mode 100644
index 0000000..00b838e
--- /dev/null
+++ b/src/components/Cookie.js
@@ -0,0 +1,22 @@
+import { useCookies } from "../hooks";
+
+const Cookie = () => {
+  const [ cookie, setCookie ] = useCookies({ key: "tester" });
+
+  return (
+    <div>
+      <h1>{cookie || ''}</h1>
+      <input type="text" value={cookie} onChange={(e) => setCookie(e.target.value)} />
+    </div>
+  )
+}
+
+export default Cookie;
+
+// Different types of api
+// const { value, get, set } = useCookie({key, value})
+// value
+// const { value, get, set } = useCookie({key: anotherKey, value})
+
+// const { get, set } = useCookie()
+// get("theme")
\ No newline at end of file
diff --git a/src/components/Hover.js b/src/components/Hover.js
index a117259..019a210 100644
--- a/src/components/Hover.js
+++ b/src/components/Hover.js
@@ -1,15 +1,23 @@
 import React from 'react';
 import { Card } from '../Elements';
 import black from "../black.png"
-import { useHover } from '../hooks';
+import { useHover, useWindowWidth, useMeasure } from '../hooks';
 
 export const Hover = () => {
   const [ isHovered, bind ] = useHover();
-  console.log('isHovered', isHovered);
+  const width = useWindowWidth();
+  const [{ref}, bounds] = useMeasure();
+  console.log('bounds', bounds);
+
+  if (width < 500) return null;
 
   return (
     <div>
-        <Card {...bind} style={{ background: isHovered ? "var(--purp)" : "var(--black)" }}>
+        <Card 
+          ref={ref}
+          {...bind}
+          style={{ background: isHovered ? "var(--purp)" : "var(--black)" }}
+        >
           <h3>Some card</h3>
           <img src={black} />
         </Card>
diff --git a/src/components/Nav.js b/src/components/Nav.js
new file mode 100644
index 0000000..a56ff7c
--- /dev/null
+++ b/src/components/Nav.js
@@ -0,0 +1,30 @@
+import { useAppState } from "../state";
+import { useScrollFreeze } from "../hooks";
+
+const NavWrapper = () => {
+  const { isMenuOpen } = useAppState();
+  if (!isMenuOpen) return null;
+  return <Nav />
+}
+
+export const Nav = () => {
+  const { toggleMenu } = useAppState();
+  useScrollFreeze ();
+
+  return (
+    <nav style={{
+      background: 'var(--black)',
+      color: 'white',
+      position: 'fixed',
+      width: '100vw',
+      height: '100vh',
+      left: 0,
+      right: 0
+    }}>
+      <h1>Hello</h1>
+      <button onClick={toggleMenu}>Close</button>
+    </nav>
+  )
+}
+
+export default NavWrapper;
\ No newline at end of file
diff --git a/src/components/PageWrapper.js b/src/components/PageWrapper.js
deleted file mode 100644
index 20de228..0000000
--- a/src/components/PageWrapper.js
+++ /dev/null
@@ -1,14 +0,0 @@
-import React, { createConext, useState } from 'react';
-import { useToggle } from '../hooks';
-
-const AppContext = createConext({
-  isMenuOpen: false,
-});
-
-const PageWrapper = ({children}) => {
-  const {isToggled, toggle} = useToggle();
-  return <AppContext.Provider
-    value={{ isMenuOpen: false}}>
-    {children}
-    </AppContext.Provider>
-};
\ No newline at end of file
diff --git a/src/hooks/index.js b/src/hooks/index.js
index 08006d7..0966ee1 100644
--- a/src/hooks/index.js
+++ b/src/hooks/index.js
@@ -1,4 +1,8 @@
+export * from './useCookie';
 export * from './useHover';
 export * from './useInc';
+export * from './useMeasure';
 export * from './useMount';
-export * from './useToggle';
\ No newline at end of file
+export * from './useScrollFreeze';
+export * from './useToggle';
+export * from './useWindowWidth';
diff --git a/src/hooks/useCookie.js b/src/hooks/useCookie.js
new file mode 100644
index 0000000..a13fb1a
--- /dev/null
+++ b/src/hooks/useCookie.js
@@ -0,0 +1,13 @@
+import { useState, useEffect } from 'react';
+import Cookies from 'js-cookie';
+
+export const useCookies = ({ key }) => {
+  const initial = Cookies.get(key);
+  const [ cookie, setStateCookie ] = useState(initial);
+
+  useEffect(() => {
+    Cookies.set(key, cookie)
+  }, [cookie, key]);
+
+  return [ cookie, setStateCookie ];
+};
\ No newline at end of file
diff --git a/src/hooks/useMeasure.js b/src/hooks/useMeasure.js
new file mode 100644
index 0000000..7df3a78
--- /dev/null
+++ b/src/hooks/useMeasure.js
@@ -0,0 +1,23 @@
+import { useState, useRef, useEffect } from 'react';
+
+export const useMeasure = () => {
+  const ref = useRef();
+
+  const [bounds, setBounds] = useState({ left: 0, top: 0, width: 0, height: 0 });
+
+  const [ resizeO ] = useState(() => {
+    return new ResizeObserver(([entry]) => setBounds(entry.contentRect))
+  });
+
+  useEffect(() => {
+    if (ref.current) {
+      resizeO.observe(ref.current);
+    }
+
+    return () => {
+      return resizeO.disconnect();
+    };
+  }, [resizeO]);
+
+  return [{ ref }, bounds];
+}
\ No newline at end of file
diff --git a/src/hooks/useScrollFreeze.js b/src/hooks/useScrollFreeze.js
new file mode 100644
index 0000000..230c02d
--- /dev/null
+++ b/src/hooks/useScrollFreeze.js
@@ -0,0 +1,12 @@
+import { useLayoutEffect } from 'react';
+
+export const useScrollFreeze = () => {
+  useLayoutEffect(() => {
+    const original = window.getComputedStyle(document.body).overflow;
+    document.body.style.overflow = 'hidden';
+
+    return () => {
+      document.body.style.overflow = original;
+    };
+  }, [])
+};
\ No newline at end of file
diff --git a/src/hooks/useWindowWidth.js b/src/hooks/useWindowWidth.js
new file mode 100644
index 0000000..ae82cd4
--- /dev/null
+++ b/src/hooks/useWindowWidth.js
@@ -0,0 +1,17 @@
+import { useState, useEffect } from "react";
+
+export const useWindowWidth = () => {
+  const [width, setWidth] = useState(window.innerWidth);
+
+  useEffect(() => {
+    const handleResize = () => {
+      setWidth(window.innerWidth);
+    }
+    window.addEventListener('resize', handleResize);
+    return () => {
+      window.removeEventListener('resize', handleResize);
+    };
+  });
+
+  return width;
+}
\ No newline at end of file
diff --git a/src/state/PageWrapper.js b/src/state/PageWrapper.js
new file mode 100644
index 0000000..c9d3958
--- /dev/null
+++ b/src/state/PageWrapper.js
@@ -0,0 +1,17 @@
+import { createContext, useContext } from 'react';
+import { useToggle } from '../hooks';
+
+export const AppContext = createContext({
+  isMenuOpen: false,
+});
+
+export const PageWrapper = ({children}) => {
+  const { isToggled, toggle } = useToggle(false);
+  return (
+    <AppContext.Provider value={{ isMenuOpen: isToggled, toggleMenu: toggle }}>
+      {children}
+    </AppContext.Provider>
+  );
+};
+
+export const useAppState = () => useContext(AppContext);
\ No newline at end of file
diff --git a/src/state/index.js b/src/state/index.js
new file mode 100644
index 0000000..4919d41
--- /dev/null
+++ b/src/state/index.js
@@ -0,0 +1 @@
+export * from './PageWrapper';