Round 2

Author: WebDevSimplified

src/10-useFetch/FetchComponent.js

@@ -0,0 +1,23 @@
+import { useState } from "react"
+import useFetch from "./useFetch"
+
+export default function FetchComponent() {
+ const [id, setId] = useState(1)
+ const { loading, error, value } = useFetch(
+ `https://jsonplaceholder.typicode.com/todos/${id}`,
+ {},
+ [id]
+ )
+
+ return (
+ <div>
+ <div>{id}</div>
+ <button onClick={() => setId(currentId => currentId + 1)}>
+ Increment ID
+ </button>
+ <div>Loading: {loading.toString()}</div>
+ <div>{JSON.stringify(error, null, 2)}</div>
+ <div>{JSON.stringify(value, null, 2)}</div>
+ </div>
+ )
+}

src/10-useFetch/useFetch.js

@@ -0,0 +1,14 @@
+import useAsync from "../9-useAsync/useAsync"
+
+const DEFAULT_OPTIONS = {
+ headers: { "Content-Type": "application/json" },
+}
+
+export default function useFetch(url, options = {}, dependencies = []) {
+ return useAsync(() => {
+ return fetch(url, { ...DEFAULT_OPTIONS, ...options }).then(res => {
+ if (res.ok) return res.json()
+ return res.json().then(json => Promise.reject(json))
+ })
+ }, dependencies)
+}

src/6-usePrevious/PreviousComponent.js

@@ -0,0 +1,21 @@
+import { useState } from "react"
+import usePrevious from "./usePrevious"
+
+export default function PreviousComponent() {
+ const [count, setCount] = useState(0)
+ const [name, setName] = useState("Kyle")
+ const previousCount = usePrevious(count)
+
+ return (
+ <div>
+ <div>
+ {count} - {previousCount}
+ </div>
+ <div>{name}</div>
+ <button onClick={() => setCount(currentCount => currentCount + 1)}>
+ Increment
+ </button>
+ <button onClick={() => setName("John")}>Change Name</button>
+ </div>
+ )
+}

src/6-usePrevious/usePrevious.js

@@ -0,0 +1,13 @@
+import { useRef } from "react"
+
+export default function usePrevious(value) {
+ const currentRef = useRef(value)
+ const previousRef = useRef()
+
+ if (currentRef.current !== value) {
+ previousRef.current = currentRef.current
+ currentRef.current = value
+ }
+
+ return previousRef.current
+}

src/7-useStateWithHistory/StateWithHistoryComponent.js

@@ -0,0 +1,27 @@
+import { useState } from "react"
+import useStateWithHistory from "./useStateWithHistory"
+
+export default function StateWithHistoryComponent() {
+ const [count, setCount, { history, pointer, back, forward, go }] =
+ useStateWithHistory(1)
+ const [name, setName] = useState("Kyle")
+
+ return (
+ <div>
+ <div>{count}</div>
+ <div>{history.join(", ")}</div>
+ <div>Pointer - {pointer}</div>
+ <div>{name}</div>
+ <button onClick={() => setCount(currentCount => currentCount * 2)}>
+ Double
+ </button>
+ <button onClick={() => setCount(currentCount => currentCount + 1)}>
+ Increment
+ </button>
+ <button onClick={back}>Back</button>
+ <button onClick={forward}>Forward</button>
+ <button onClick={() => go(2)}>Go To Index 2</button>
+ <button onClick={() => setName("John")}>Change Name</button>
+ </div>
+ )
+}

src/7-useStateWithHistory/useStateWithHistory.js

@@ -0,0 +1,59 @@
+import { useCallback, useRef, useState } from "react"
+
+export default function useStateWithHistory(
+ defaultValue,
+ { capacity = 10 } = {}
+) {
+ const [value, setValue] = useState(defaultValue)
+ const historyRef = useRef([value])
+ const pointerRef = useRef(0)
+
+ const set = useCallback(
+ v => {
+ const resolvedValue = typeof v === "function" ? v(value) : v
+ if (historyRef.current[pointerRef.current] !== resolvedValue) {
+ if (pointerRef.current < historyRef.current.length - 1) {
+ historyRef.current.splice(pointerRef.current + 1)
+ }
+ historyRef.current.push(resolvedValue)
+
+ while (historyRef.current.length > capacity) {
+ historyRef.current.shift()
+ }
+ pointerRef.current = historyRef.current.length - 1
+ }
+ setValue(resolvedValue)
+ },
+ [capacity, value]
+ )
+
+ const back = useCallback(() => {
+ if (pointerRef.current <= 0) return
+ pointerRef.current--
+ setValue(historyRef.current[pointerRef.current])
+ }, [])
+
+ const forward = useCallback(() => {
+ if (pointerRef.current >= historyRef.current.length - 1) return
+ pointerRef.current++
+ setValue(historyRef.current[pointerRef.current])
+ }, [])
+
+ const go = useCallback(index => {
+ if (index < 0 || index >= historyRef.current.length - 1) return
+ pointerRef.current = index
+ setValue(historyRef.current[pointerRef.current])
+ }, [])
+
+ return [
+ value,
+ set,
+ {
+ history: historyRef.current,
+ pointer: pointerRef.current,
+ back,
+ forward,
+ go,
+ },
+ ]
+}

src/8-useStorage/StorageComponent.js

@@ -0,0 +1,18 @@
+import { useSessionStorage, useLocalStorage } from "./useStorage"
+
+export default function StorageComponent() {
+ const [name, setName, removeName] = useSessionStorage("name", "Kyle")
+ const [age, setAge, removeAge] = useLocalStorage("age", 26)
+
+ return (
+ <div>
+ <div>
+ {name} - {age}
+ </div>
+ <button onClick={() => setName("John")}>Set Name</button>
+ <button onClick={() => setAge(40)}>Set Age</button>
+ <button onClick={removeName}>Remove Name</button>
+ <button onClick={removeAge}>Remove Age</button>
+ </div>
+ )
+}

src/8-useStorage/useStorage.js

@@ -0,0 +1,33 @@
+import { useCallback, useState, useEffect } from "react"
+
+export function useLocalStorage(key, defaultValue) {
+ return useStorage(key, defaultValue, window.localStorage)
+}
+
+export function useSessionStorage(key, defaultValue) {
+ return useStorage(key, defaultValue, window.sessionStorage)
+}
+
+function useStorage(key, defaultValue, storageObject) {
+ const [value, setValue] = useState(() => {
+ const jsonValue = storageObject.getItem(key)
+ if (jsonValue != null) return JSON.parse(jsonValue)
+
+ if (typeof initialValue === "function") {
+ return defaultValue()
+ } else {
+ return defaultValue
+ }
+ })
+
+ useEffect(() => {
+ if (value === undefined) return storageObject.removeItem(key)
+ storageObject.setItem(key, JSON.stringify(value))
+ }, [key, value, storageObject])
+
+ const remove = useCallback(() => {
+ setValue(undefined)
+ }, [])
+
+ return [value, setValue, remove]
+}

src/9-useAsync/AsyncComponent.js

@@ -0,0 +1,20 @@
+import useAsync from "./useAsync"
+
+export default function AsyncComponent() {
+ const { loading, error, value } = useAsync(() => {
+ return new Promise((resolve, reject) => {
+ const success = false
+ setTimeout(() => {
+ success ? resolve("Hi") : reject("Error")
+ }, 1000)
+ })
+ })
+
+ return (
+ <div>
+ <div>Loading: {loading.toString()}</div>
+ <div>{error}</div>
+ <div>{value}</div>
+ </div>
+ )
+}

src/9-useAsync/useAsync.js

@@ -0,0 +1,23 @@
+import { useCallback, useEffect, useState } from "react"
+
+export default function useAsync(callback, dependencies = []) {
+ const [loading, setLoading] = useState(true)
+ const [error, setError] = useState()
+ const [value, setValue] = useState()
+
+ const callbackMemoized = useCallback(() => {
+ setLoading(true)
+ setError(undefined)
+ setValue(undefined)
+ callback()
+ .then(setValue)
+ .catch(setError)
+ .finally(() => setLoading(false))
+ }, dependencies)
+
+ useEffect(() => {
+ callbackMemoized()
+ }, [callbackMemoized])
+
+ return { loading, error, value }
+}