Finish Video

Author: WebDevSimplified

src/26-useOnlineStatus/OnlineStatusComponent.js

@@ -0,0 +1,7 @@
+import useOnlineStatus from "./useOnlineStatus"
+
+export default function OnlineStatusComponent() {
+  const online = useOnlineStatus()
+
+  return <div>{online.toString()}</div>
+}

src/26-useOnlineStatus/useOnlineStatus.js

@@ -0,0 +1,11 @@
+import { useState } from "react"
+import useEventListener from "../13-useEventListener/useEventListener"
+
+export default function useOnlineStatus() {
+  const [online, setOnline] = useState(navigator.onLine)
+
+  useEventListener("online", () => setOnline(navigator.onLine))
+  useEventListener("offline", () => setOnline(navigator.onLine))
+
+  return online
+}

src/27-useRenderCount/RenderCountComponent.js

@@ -0,0 +1,16 @@
+import useRenderCount from "./useRenderCount"
+import useToggle from "../1-useToggle/useToggle"
+
+export default function RenderCountComponent() {
+  const [boolean, toggle] = useToggle(false)
+
+  const renderCount = useRenderCount()
+
+  return (
+    <>
+      <div>{boolean.toString()}</div>
+      <div>{renderCount}</div>
+      <button onClick={toggle}>Toggle</button>
+    </>
+  )
+}

src/27-useRenderCount/useRenderCount.js

@@ -0,0 +1,7 @@
+import { useEffect, useRef } from "react"
+
+export default function useRenderCount() {
+  const count = useRef(1)
+  useEffect(() => count.current++)
+  return count.current
+}

src/28-useDebugInformation/DebugInformationComponent.js

@@ -0,0 +1,30 @@
+import useDebugInformation from "./useDebugInformation"
+import useToggle from "../1-useToggle/useToggle"
+import { useState } from "react"
+
+export default function DebugInformationComponent() {
+  const [boolean, toggle] = useToggle(false)
+  const [count, setCount] = useState(0)
+
+  return (
+    <>
+      <ChildComponent boolean={boolean} count={count} />
+      <button onClick={toggle}>Toggle</button>
+      <button onClick={() => setCount(prevCount => prevCount + 1)}>
+        Increment
+      </button>
+    </>
+  )
+}
+
+function ChildComponent(props) {
+  const info = useDebugInformation("ChildComponent", props)
+
+  return (
+    <>
+      <div>{props.boolean.toString()}</div>
+      <div>{props.count}</div>
+      <div>{JSON.stringify(info, null, 2)}</div>
+    </>
+  )
+}

src/28-useDebugInformation/useDebugInformation.js

@@ -0,0 +1,32 @@
+import { useEffect, useRef } from "react"
+import useRenderCount from "../27-useRenderCount/useRenderCount"
+
+export default function useDebugInformation(componentName, props) {
+  const count = useRenderCount()
+  const changedProps = useRef({})
+  const previousProps = useRef(props)
+  const lastRenderTimestamp = useRef(Date.now())
+
+  const propKeys = Object.keys({ ...props, ...previousProps })
+  changedProps.current = propKeys.reduce((obj, key) => {
+    if (props[key] === previousProps.current[key]) return obj
+    return {
+      ...obj,
+      [key]: { previous: previousProps.current[key], current: props[key] },
+    }
+  }, {})
+  const info = {
+    count,
+    changedProps: changedProps.current,
+    timeSinceLastRender: Date.now() - lastRenderTimestamp.current,
+    lastRenderTimestamp: lastRenderTimestamp.current,
+  }
+
+  useEffect(() => {
+    previousProps.current = props
+    lastRenderTimestamp.current = Date.now()
+    console.log("[debug-info]", componentName, info)
+  })
+
+  return info
+}

src/29-useHover/HoverComponent.js

@@ -0,0 +1,21 @@
+import { useRef } from "react"
+import useHover from "./useHover"
+
+export default function HoverComponent() {
+  const elementRef = useRef()
+  const hovered = useHover(elementRef)
+
+  return (
+    <div
+      ref={elementRef}
+      style={{
+        backgroundColor: hovered ? "blue" : "red",
+        width: "100px",
+        height: "100px",
+        position: "absolute",
+        top: "calc(50% - 50px)",
+        left: "calc(50% - 50px)",
+      }}
+    />
+  )
+}

src/29-useHover/useHover.js

@@ -0,0 +1,11 @@
+import { useState } from "react"
+import useEventListener from "../13-useEventListener/useEventListener"
+
+export default function useHover(ref) {
+  const [hovered, setHovered] = useState(false)
+
+  useEventListener("mouseover", () => setHovered(true), ref.current)
+  useEventListener("mouseout", () => setHovered(false), ref.current)
+
+  return hovered
+}

src/30-useLongPress.js/LongPressComponent.js

@@ -0,0 +1,21 @@
+import { useRef } from "react"
+import useLongPress from "./useLongPress"
+
+export default function LongPressComponent() {
+  const elementRef = useRef()
+  useLongPress(elementRef, () => alert("Long Press"))
+
+  return (
+    <div
+      ref={elementRef}
+      style={{
+        backgroundColor: "red",
+        width: "100px",
+        height: "100px",
+        position: "absolute",
+        top: "calc(50% - 50px)",
+        left: "calc(50% - 50px)",
+      }}
+    />
+  )
+}

src/30-useLongPress.js/useLongPress.js

@@ -0,0 +1,15 @@
+import useEventListener from "../13-useEventListener/useEventListener"
+import useTimeout from "../2-useTimeout/useTimeout"
+import useEffectOnce from "../20-useEffectOnce/useEffectOnce"
+
+export default function useLongPress(ref, cb, { delay = 250 } = {}) {
+  const { reset, clear } = useTimeout(cb, delay)
+  useEffectOnce(clear)
+
+  useEventListener("mousedown", reset, ref.current)
+  useEventListener("touchstart", reset, ref.current)
+
+  useEventListener("mouseup", clear, ref.current)
+  useEventListener("mouseleave", clear, ref.current)
+  useEventListener("touchend", clear, ref.current)
+}

src/App.js

@@ -23,6 +23,11 @@ import DarkModeComponent from "./22-useDarkMode/DarkModeComponent"
 import CopyToClipboardComponent from "./23-useCopyToClipboard/CopyToClipboardComponent"
 import CookieComponent from "./24-useCookie/CookieComponent"
 import TranslationComponent from "./25-useTranslation/TranslationComponent"
+import OnlineStatusComponent from "./26-useOnlineStatus/OnlineStatusComponent"
+import RenderCountComponent from "./27-useRenderCount/RenderCountComponent"
+import DebugInformationComponent from "./28-useDebugInformation/DebugInformationComponent"
+import HoverComponent from "./29-useHover/HoverComponent"
+import LongPressComponent from "./30-useLongPress.js/LongPressComponent"
 
 function App() {
   // return <ToggleComponent />
@@ -49,7 +54,12 @@ function App() {
   // return <DarkModeComponent />
   // return <CopyToClipboardComponent />
   // return <CookieComponent />
-  return <TranslationComponent />
+  // return <TranslationComponent />
+  // return <OnlineStatusComponent />
+  // return <RenderCountComponent />
+  // return <DebugInformationComponent />
+  // return <HoverComponent />
+  return <LongPressComponent />
 }
 
 export default App