Finish Video

Author: WebDevSimplified

package-lock.json

@@ -6,6 +6,8 @@
     "@testing-library/jest-dom": "^5.14.1",
     "@testing-library/react": "^11.2.7",
     "@testing-library/user-event": "^12.8.3",
+    "copy-to-clipboard": "^3.3.1",
+    "js-cookie": "^3.0.1",
     "lodash": "^4.17.21",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",

package.json

@@ -0,0 +1,32 @@
+import { useRef, useState } from "react"
+import useClickOutside from "./useClickOutside"
+
+export default function ClickOutsideComponent() {
+  const [open, setOpen] = useState(false)
+  const modalRef = useRef()
+
+  useClickOutside(modalRef, () => {
+    if (open) setOpen(false)
+  })
+
+  return (
+    <>
+      <button onClick={() => setOpen(true)}>Open</button>
+      <div
+        ref={modalRef}
+        style={{
+          display: open ? "block" : "none",
+          backgroundColor: "blue",
+          color: "white",
+          width: "100px",
+          height: "100px",
+          position: "absolute",
+          top: "calc(50% - 50px)",
+          left: "calc(50% - 50px)",
+        }}
+      >
+        <span>Modal</span>
+      </div>
+    </>
+  )
+}

src/1-useToggle/ToggleComponent.js renamed to src/1-20/1-useToggle/ToggleComponent.js

@@ -0,0 +1,12 @@
+import useEventListener from "../13-useEventListener/useEventListener"
+
+export default function useClickOutside(ref, cb) {
+  useEventListener(
+    "click",
+    e => {
+      if (ref.current == null || ref.current.contains(e.target)) return
+      cb(e)
+    },
+    document
+  )
+}

src/1-useToggle/useToggle.js renamed to src/1-20/1-useToggle/useToggle.js

@@ -0,0 +1,19 @@
+import useDarkMode from "./useDarkMode"
+import "./body.css"
+
+export default function DarkModeComponent() {
+  const [darkMode, setDarkMode] = useDarkMode()
+
+  return (
+    <button
+      onClick={() => setDarkMode(prevDarkMode => !prevDarkMode)}
+      style={{
+        border: `1px solid ${darkMode ? "white" : "black"}`,
+        background: "none",
+        color: darkMode ? "white" : "black",
+      }}
+    >
+      Toggle Dark Mode
+    </button>
+  )
+}

src/10-useFetch/FetchComponent.js renamed to src/1-20/10-useFetch/FetchComponent.js

@@ -0,0 +1,3 @@
+body.dark-mode {
+  background-color: #333;
+}

src/10-useFetch/useFetch.js renamed to src/1-20/10-useFetch/useFetch.js

@@ -0,0 +1,15 @@
+import { useEffect } from "react"
+import useMediaQuery from "../16-useMediaQuery/useMediaQuery"
+import { useLocalStorage } from "../8-useStorage/useStorage"
+
+export default function useDarkMode() {
+  const [darkMode, setDarkMode] = useLocalStorage("useDarkMode")
+  const prefersDarkMode = useMediaQuery("(prefers-color-scheme: dark)")
+  const enabled = darkMode ?? prefersDarkMode
+
+  useEffect(() => {
+    document.body.classList.toggle("dark-mode", enabled)
+  }, [enabled])
+
+  return [enabled, setDarkMode]
+}

src/11-useScript/ScriptComponent.js renamed to src/1-20/11-useScript/ScriptComponent.js

@@ -0,0 +1,14 @@
+import useCopyToClipboard from "./useCopyToClipboard"
+
+export default function CopyToClipboardComponent() {
+  const [copyToClipboard, { success }] = useCopyToClipboard()
+
+  return (
+    <>
+      <button onClick={() => copyToClipboard("This was copied")}>
+        {success ? "Copied" : "Copy Text"}
+      </button>
+      <input type="text" />
+    </>
+  )
+}

src/11-useScript/useScript.js renamed to src/1-20/11-useScript/useScript.js

@@ -0,0 +1,15 @@
+import { useState } from "react"
+import copy from "copy-to-clipboard"
+
+export default function useCopyToClipboard() {
+  const [value, setValue] = useState()
+  const [success, setSuccess] = useState()
+
+  const copyToClipboard = (text, options) => {
+    const result = copy(text, options)
+    if (result) setValue(text)
+    setSuccess(result)
+  }
+
+  return [copyToClipboard, { value, success }]
+}

src/12-useDeepCompareEffect/DeepCompareEffectComponent.js renamed to src/1-20/12-useDeepCompareEffect/DeepCompareEffectComponent.js

@@ -0,0 +1,13 @@
+import useCookie from "./useCookie"
+
+export default function CookieComponent() {
+  const [value, update, remove] = useCookie("name", "John")
+
+  return (
+    <>
+      <div>{value}</div>
+      <button onClick={() => update("Sally")}>Change Name To Sally</button>
+      <button onClick={remove}>Delete Name</button>
+    </>
+  )
+}

src/12-useDeepCompareEffect/useDeepCompareEffect.js renamed to src/1-20/12-useDeepCompareEffect/useDeepCompareEffect.js

@@ -0,0 +1,26 @@
+import { useState, useCallback } from "react"
+import Cookies from "js-cookie"
+
+export default function useCookie(name, defaultValue) {
+  const [value, setValue] = useState(() => {
+    const cookie = Cookies.get(name)
+    if (cookie) return cookie
+    Cookies.set(name, defaultValue)
+    return defaultValue
+  })
+
+  const updateCookie = useCallback(
+    (newValue, options) => {
+      Cookies.set(name, newValue, options)
+      setValue(newValue)
+    },
+    [name]
+  )
+
+  const deleteCookie = useCallback(() => {
+    Cookies.remove(name)
+    setValue(null)
+  }, [name])
+
+  return [value, updateCookie, deleteCookie]
+}

src/13-useEventListener/EventListenerComponent.js renamed to src/1-20/13-useEventListener/EventListenerComponent.js

@@ -0,0 +1,16 @@
+import useTranslation from "./useTranslation"
+
+export default function TranslationComponent() {
+  const { language, setLanguage, setFallbackLanguage, t } = useTranslation()
+
+  return (
+    <>
+      <div>{language}</div>
+      <div>{t("hi")}</div>
+      <div>{t("bye")}</div>
+      <div>{t("nested.value")}</div>
+      <button onClick={() => setLanguage("sp")}>Change To Spanish</button>
+      <button onClick={() => setLanguage("en")}>Change To English</button>
+    </>
+  )
+}

src/13-useEventListener/useEventListener.js renamed to src/1-20/13-useEventListener/useEventListener.js

@@ -0,0 +1,5 @@
+{
+  "hi": "Hello",
+  "bye": "Goodbye",
+  "nested": { "value": "Test" }
+}

src/14-useOnScreen/OnScreenComponent.js renamed to src/1-20/14-useOnScreen/OnScreenComponent.js

@@ -0,0 +1,2 @@
+export * as en from "./en.json"
+export * as sp from "./sp.json"

src/14-useOnScreen/useOnScreen.js renamed to src/1-20/14-useOnScreen/useOnScreen.js

@@ -0,0 +1,3 @@
+{
+  "hi": "Hola"
+}

src/15-useWindowSize/WindowSizeComponent.js renamed to src/1-20/15-useWindowSize/WindowSizeComponent.js

@@ -0,0 +1,34 @@
+import { useLocalStorage } from "../8-useStorage/useStorage"
+import * as translations from "./translations"
+
+export default function useTranslation() {
+  const [language, setLanguage] = useLocalStorage("language", "en")
+  const [fallbackLanguage, setFallbackLanguage] = useLocalStorage(
+    "fallbackLanguage",
+    "en"
+  )
+
+  const translate = key => {
+    const keys = key.split(".")
+
+    return (
+      getNestedTranslation(language, keys) ??
+      getNestedTranslation(fallbackLanguage, keys) ??
+      key
+    )
+  }
+
+  return {
+    language,
+    setLanguage,
+    fallbackLanguage,
+    setFallbackLanguage,
+    t: translate,
+  }
+}
+
+function getNestedTranslation(language, keys) {
+  return keys.reduce((obj, key) => {
+    return obj?.[key]
+  }, translations[language])
+}

src/15-useWindowSize/useWindowSize.js renamed to src/1-20/15-useWindowSize/useWindowSize.js

@@ -18,6 +18,11 @@ import GeolocationComponent from "./17-useGeolocation/GeolocationComponent"
 import StateWithValidationComponent from "./18-useStateWithValidation/StateWithValidationComponent"
 import SizeComponent from "./19-useSize/SizeComponent"
 import EffectOnceComponent from "./20-useEffectOnce/EffectOnceComponent"
+import ClickOutsideComponent from "./21-useClickOutside/ClickOutsideComponent"
+import DarkModeComponent from "./22-useDarkMode/DarkModeComponent"
+import CopyToClipboardComponent from "./23-useCopyToClipboard/CopyToClipboardComponent"
+import CookieComponent from "./24-useCookie/CookieComponent"
+import TranslationComponent from "./25-useTranslation/TranslationComponent"
 
 function App() {
   // return <ToggleComponent />
@@ -33,13 +38,18 @@ function App() {
   // return <ScriptComponent />
   // return <DeepCompareEffectComponent />
   // return <EventListenerComponent />
-  return <OnScreenComponentComponent />
+  // return <OnScreenComponentComponent />
   // return <WindowSizeComponent />
   // return <MediaQueryComponent />
   // return <GeolocationComponent />
   // return <StateWithValidationComponent />
   // return <SizeComponent />
   // return <EffectOnceComponent />
+  // return <ClickOutsideComponent />
+  // return <DarkModeComponent />
+  // return <CopyToClipboardComponent />
+  // return <CookieComponent />
+  return <TranslationComponent />
 }
 
 export default App