Finish Video

Author: WebDevSimplified

src/13-useEventListener/useEventListener.js

@@ -12,6 +12,7 @@ export default function useEventListener(
   }, [callback])
 
   useEffect(() => {
+    if (element == null) return
     const handler = e => callbackRef.current(e)
     element.addEventListener(eventType, handler)
 

src/14-useOnScreen/useOnScreen.js

@@ -4,7 +4,6 @@ export default function useOnScreen(ref, rootMargin = "0px") {
   const [isVisible, setIsVisible] = useState(false)
 
   useEffect(() => {
-    console.log(ref.current)
     if (ref.current == null) return
     const observer = new IntersectionObserver(
       ([entry]) => setIsVisible(entry.isIntersecting),

src/16-useMediaQuery/MediaQueryComponent.js

@@ -0,0 +1,7 @@
+import useMediaQuery from "./useMediaQuery"
+
+export default function MediaQueryComponent() {
+  const isLarge = useMediaQuery("(min-width: 200px)")
+
+  return <div>Large: {isLarge.toString()}</div>
+}

src/16-useMediaQuery/useMediaQuery.js

@@ -0,0 +1,17 @@
+import { useState, useEffect } from "react"
+import useEventListener from "../13-useEventListener/useEventListener"
+
+export default function useMediaQuery(mediaQuery) {
+  const [isMatch, setIsMatch] = useState(false)
+  const [mediaQueryList, setMediaQueryList] = useState(null)
+
+  useEffect(() => {
+    const list = window.matchMedia(mediaQuery)
+    setMediaQueryList(list)
+    setIsMatch(list.matches)
+  }, [mediaQuery])
+
+  useEventListener("change", e => setIsMatch(e.matches), mediaQueryList)
+
+  return isMatch
+}

src/17-useGeolocation/GeolocationComponent.js

@@ -0,0 +1,21 @@
+import { useRef } from "react"
+import useGeolocation from "./useGeolocation"
+
+export default function GeolocationComponent() {
+  const ref = useRef()
+  const {
+    loading,
+    error,
+    data: { latitude, longitude },
+  } = useGeolocation(ref)
+
+  return (
+    <>
+      <div>Loading: {loading.toString()}</div>
+      <div>Error: {error?.message}</div>
+      <div>
+        {latitude} x {longitude}
+      </div>
+    </>
+  )
+}

src/17-useGeolocation/useGeolocation.js

@@ -0,0 +1,32 @@
+import { useState, useEffect } from "react"
+
+export default function useGeolocation(options) {
+  const [loading, setLoading] = useState(true)
+  const [error, setError] = useState()
+  const [data, setData] = useState({})
+
+  useEffect(() => {
+    const successHandler = e => {
+      setLoading(false)
+      setError(null)
+      setData(e.coords)
+    }
+    const errorHandler = e => {
+      setError(e)
+      setLoading(false)
+    }
+    navigator.geolocation.getCurrentPosition(
+      successHandler,
+      errorHandler,
+      options
+    )
+    const id = navigator.geolocation.watchPosition(
+      successHandler,
+      errorHandler,
+      options
+    )
+    return () => navigator.geolocation.clearWatch(id)
+  }, [options])
+
+  return { loading, error, data }
+}

src/18-useStateWithValidation/StateWithValidationComponent.js

@@ -0,0 +1,19 @@
+import useStateWithValidation from "./useStateWithValidation"
+
+export default function StateWithValidationComponent() {
+  const [username, setUsername, isValid] = useStateWithValidation(
+    name => name.length > 5,
+    ""
+  )
+
+  return (
+    <>
+      <div>Valid: {isValid.toString()}</div>
+      <input
+        type="text"
+        value={username}
+        onChange={e => setUsername(e.target.value)}
+      />
+    </>
+  )
+}

src/18-useStateWithValidation/useStateWithValidation.js

@@ -0,0 +1,18 @@
+import { useState, useCallback } from "react"
+
+export default function useStateWithValidation(validationFunc, initialValue) {
+  const [state, setState] = useState(initialValue)
+  const [isValid, setIsValid] = useState(() => validationFunc(state))
+
+  const onChange = useCallback(
+    nextState => {
+      const value =
+        typeof nextState === "function" ? nextState(state) : nextState
+      setState(value)
+      setIsValid(validationFunc(value))
+    },
+    [validationFunc]
+  )
+
+  return [state, onChange, isValid]
+}

src/19-useSize/SizeComponent.js

@@ -0,0 +1,14 @@
+import { useRef } from "react"
+import useSize from "./useSize"
+
+export default function SizeComponent() {
+  const ref = useRef()
+  const size = useSize(ref)
+
+  return (
+    <>
+      <div>{JSON.stringify(size)}</div>
+      <textarea ref={ref}></textarea>
+    </>
+  )
+}

src/19-useSize/useSize.js

@@ -0,0 +1,15 @@
+import { useState } from "react"
+import { useEffect } from "react/cjs/react.development"
+
+export default function useSize(ref) {
+  const [size, setSize] = useState({})
+
+  useEffect(() => {
+    if (ref.current == null) return
+    const observer = new ResizeObserver(([entry]) => setSize(entry.contentRect))
+    observer.observe(ref.current)
+    return () => observer.disconnect()
+  }, [])
+
+  return size
+}

src/20-useEffectOnce/EffectOnceComponent.js

@@ -0,0 +1,15 @@
+import { useState } from "react"
+import useEffectOnce from "./useEffectOnce"
+
+export default function EffectOnceComponent() {
+  const [count, setCount] = useState(0)
+
+  useEffectOnce(() => alert("Hi"))
+
+  return (
+    <>
+      <div>{count}</div>
+      <button onClick={() => setCount(c => c + 1)}>Increment</button>
+    </>
+  )
+}

src/20-useEffectOnce/useEffectOnce.js

@@ -0,0 +1,5 @@
+import { useEffect } from "react"
+
+export default function useEffectOnce(cb) {
+  useEffect(cb, [])
+}

src/App.js

@@ -13,6 +13,11 @@ import DeepCompareEffectComponent from "./12-useDeepCompareEffect/DeepCompareEff
 import EventListenerComponent from "./13-useEventListener/EventListenerComponent"
 import OnScreenComponentComponent from "./14-useOnScreen/OnScreenComponent"
 import WindowSizeComponent from "./15-useWindowSize/WindowSizeComponent"
+import MediaQueryComponent from "./16-useMediaQuery/MediaQueryComponent"
+import GeolocationComponent from "./17-useGeolocation/GeolocationComponent"
+import StateWithValidationComponent from "./18-useStateWithValidation/StateWithValidationComponent"
+import SizeComponent from "./19-useSize/SizeComponent"
+import EffectOnceComponent from "./20-useEffectOnce/EffectOnceComponent"
 
 function App() {
   // return <ToggleComponent />
@@ -28,8 +33,13 @@ function App() {
   // return <ScriptComponent />
   // return <DeepCompareEffectComponent />
   // return <EventListenerComponent />
-  // return <OnScreenComponentComponent />
-  return <WindowSizeComponent />
+  return <OnScreenComponentComponent />
+  // return <WindowSizeComponent />
+  // return <MediaQueryComponent />
+  // return <GeolocationComponent />
+  // return <StateWithValidationComponent />
+  // return <SizeComponent />
+  // return <EffectOnceComponent />
 }
 
 export default App