[IMPL] useFetch hook

Author: nDriaDev

apps/react-tools-demo/src/components/hooks/useFetch/UseFetch.tsx

@@ -0,0 +1,28 @@
+import { Suspense } from "react";
+import { useFetch } from "../../../../../../packages/react-tools/src";
+
+/**
+The component uses _useFetch_ hook to call jsonplaceholder API with suspense support and without it.
+ */
+export const Delayed = () => {
+	const [data, callSuspensable] = useFetch("https://jsonplaceholder.typicode.com/comments?id=5", { cache: "no-cache", suspensable: true });
+	const [data1, call, loading, error] = useFetch("https://jsonplaceholder.typicode.com/comments?id=5", { cache: "no-cache" });
+
+	if (loading ) {
+		return <p>Loading...</p>
+	}
+	if (error) {
+		return <p>Error: {JSON.stringify(error)}</p>
+	}
+	return <>
+		<button onClick={() => callSuspensable()}>Call suspensable</button>
+		<button onClick={() => call()}>Call</button>
+		<pre>{JSON.stringify(data??data1, null, 2)}</pre>
+	</>
+}
+
+export const UseFetch = () => {
+	return <Suspense fallback="loading suspense...">
+		<Delayed />
+	</Suspense>
+}

apps/react-tools-demo/src/components/hooks/usePromiseSuspensible/UsePromiseSuspensible.tsx

@@ -2,7 +2,7 @@ import { Suspense } from "react"
 import { usePromiseSuspensible } from "../../../../../../packages/react-tools/src";
 
 /**
-The _Delayed_ component uses _usePromiseSuspensible_ to call a promise that resolves with an array of number or reject: if promise has been resolved, array number is rendered, otherwise an alert is invocked. Delayed component is returned from _UsePromiseSuspensible_ component.
+The _Delayed_ component uses _usePromiseSuspensible_ hook to call a promise that resolves with an array of number or reject: if promise has been resolved, array number is rendered, otherwise an alert is invocked. Delayed component is returned from _UsePromiseSuspensible_ component.
  */
 const Delayed = () => {
 	const data = usePromiseSuspensible(() => {

apps/react-tools-demo/src/constants/components.ts

@@ -118,7 +118,8 @@ export const COMPONENTS = [
 			"useDisplayMedia",
 			"useWebWorker",
 			"useWebWorkerFn",
-			"usePromiseSuspensible"
+			"usePromiseSuspensible",
+			"useFetch"
 		]
 	],
 	//UTILS

apps/react-tools-demo/src/markdown/useFetch.md

@@ -0,0 +1,68 @@
+# useFetch
+Hook to use [Fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API) with more control and the possibility to execute request with suspense support.
+
+## Usage
+
+```tsx
+export const Delayed = () => {
+	const [data, callSuspensable] = useFetch("https://jsonplaceholder.typicode.com/comments?id=5", { cache: "no-cache", suspensable: true });
+	const [data1, call, loading, error] = useFetch("https://jsonplaceholder.typicode.com/comments?id=5", { cache: "no-cache" });
+
+	if (loading ) {
+		return <p>Loading...</p>
+	}
+	if (error) {
+		return <p>Error: {JSON.stringify(error)}</p>
+	}
+	return <>
+		<button onClick={() => callSuspensable()}>Call suspensable</button>
+		<button onClick={() => call()}>Call</button>
+		<pre>{JSON.stringify(data??data1, null, 2)}</pre>
+	</>
+}
+
+export const UseFetch = () => {
+	return <Suspense fallback="loading suspense...">
+		<Delayed />
+	</Suspense>
+}
+```
+
+> The component uses _useFetch_ hook to call jsonplaceholder API with suspense support and without it.
+
+
+## API
+
+```tsx
+useFetch<T>(url: RequestInfo | URL, { suspensable, onError, onLoading, ...rest }: RequestInit & { suspensable?: boolean, onLoading?: (loading: boolean) => void, onError?: (err: unknown) => void } = {}): [T|undefined, (conf?: RequestInit) => Promise<void>, boolean, unknown]
+```
+
+> ### Params
+>
+> - __url__: _RequestInfo|URL_  
+The resource that you wish to fetch. This can either be a string, a Request object or an URL object.
+> - __options?__: _Object_  
+An object containing any custom settings you want to apply to the fetch invokation.
+> - __...options.rest?__: _RequestInit_  
+properties to customize fetch settings.
+> - __options.onLoading?__: _(loading: boolean)=>void_  
+function that will be executed when loading state changes.
+> - __options.onError?__: _(error:unknown)=>void_  
+function that will be executed when error occurred.
+> - __options.suspensable?__: _boolean_  
+boolean that indicates if fetch request need to be suspends or not.
+>
+
+> ### Returns
+>
+> :  __Array__:  
+    - _T|undefined_  
+    - _(conf?: RequestInit) => Promise<void>_  
+    - _boolean_  
+    - _unknown_  
+> Array with:
+> - __data__: data returned from fetch.
+> - __call__: function to fetch request.
+> - __loading__: value that handle loading state.
+> - __error__: value that handle error state.
+>

apps/react-tools-demo/src/markdown/usePromiseSuspensible.md

@@ -26,13 +26,13 @@ export const UsePromiseSuspensible = () => {
 }
 ```
 
-> The _Delayed_ component uses _usePromiseSuspensible_ to call a promise that resolves with an array of number or reject: if promise has been resolved, array number is rendered, otherwise an alert is invocked. Delayed component is returned from _UsePromiseSuspensible_ component.
+> The _Delayed_ component uses _usePromiseSuspensible_ hook to call a promise that resolves with an array of number or reject: if promise has been resolved, array number is rendered, otherwise an alert is invocked. Delayed component is returned from _UsePromiseSuspensible_ component.
 
 
 ## API
 
 ```tsx
-usePromiseSuspensible<T extends (...args: unknown[]) => Promise<unknown>>(promise: T, deps: DependencyList)
+usePromiseSuspensible<T extends (...args: unknown[]) => Promise<unknown>>(promise: T, deps: DependencyList): Awaited<ReturnType<T>>
 ```
 
 > ### Params

packages/react-tools/README.md

@@ -118,8 +118,8 @@
 	- [x] useDisplayMedia
 	- [x] useWebWorker
 	- [x] useWebWorkerFn
-	- [ ] usePromiseSuspensible
-	- [ ] useFetch (with suspense ???)
+	- [x] usePromiseSuspensible
+	- [x] useFetch
 	- [ ] useLock - (https://developer.mozilla.org/en-US/docs/Web/API/LockManager/request)
 	- [ ] useIndexedDB (TODO)
 	- [ ] useIdleDetection (not work yet. https://developer.mozilla.org/en-US/docs/Web/API/Idle_Detection_API)

packages/react-tools/src/hooks/index.ts

@@ -99,4 +99,5 @@ export { useDisplayMedia } from './useDisplayMedia';
 export { useSwipe } from './useSwipe';
 export { useWebWorker } from './useWebWorker';
 export { useWebWorkerFn } from './useWebWorkerFn';
-export { usePromiseSuspensible } from './usePromiseSuspensible';
+export { usePromiseSuspensible } from './usePromiseSuspensible';
+export { useFetch } from './useFetch';

packages/react-tools/src/hooks/useFetch.ts

@@ -0,0 +1,117 @@
+import { useCallback, useRef, useState } from "react"
+
+/**
+ * **`useFetch`**: Hook to use [Fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API) with more control and the possibility to execute request with suspense support.
+ * @param {RequestInfo|URL} url - The resource that you wish to fetch. This can either be a string, a Request object or an URL object.
+ * @param {Object} [options] - An object containing any custom settings you want to apply to the fetch invokation.
+ * @param {RequestInit} [...options.rest] - properties to customize fetch settings.
+ * @param {(loading: boolean)=>void} [options.onLoading] - function that will be executed when loading state changes.
+ * @param {(error:unknown)=>void} [options.onError] - function that will be executed when error occurred.
+ * @param {boolean} [options.suspensable] - boolean that indicates if fetch request need to be suspends or not.
+ * @returns {[T|undefined, (conf?: RequestInit) => Promise<void>, boolean, unknown]}
+ * Array with:
+ * - __data__: data returned from fetch.
+ * - __call__: function to fetch request.
+ * - __loading__: value that handle loading state.
+ * - __error__: value that handle error state.
+ */
+export const useFetch = <T>(url: RequestInfo | URL, { suspensable, onError, onLoading, ...rest }: RequestInit & { suspensable?: boolean, onLoading?: (loading: boolean) => void, onError?: (err: unknown) => void } = {}): [T|undefined, (conf?: RequestInit) => Promise<void>, boolean, unknown] => {
+	const [status, setStatus] = useState<{ loading: boolean, error: unknown, data?: T, suspended: boolean }>({
+		loading: false,
+		error: undefined,
+		data: undefined,
+		suspended: false
+	});
+	const promise = useRef<Promise<void>>();
+
+	if (status.suspended) {
+		throw promise.current;
+	}
+
+	const call = useCallback((conf?: RequestInit) => {
+		if (suspensable) {
+			let response: Response;
+			promise.current = fetch(url, { ...rest, ...conf })
+				.then(resp => {
+					response = resp;
+					return (!response.headers.get("Content-Type") || response.headers.get("Content-Type")?.startsWith("text")
+						? response.text()
+						: response.headers.get("Content-Type")?.includes("json")
+							? response.json()
+							: response.blob()) as T;
+				})
+				.then(data => {
+					if (response.ok) {
+						setStatus({ error: undefined, loading: false, data, suspended: false });
+						promise.current = undefined;
+						!!onLoading && onLoading(false);
+					} else {
+						const error = data
+							? data
+							: response.status + " - " + response.statusText;
+						setStatus({
+							loading: false,
+							data: undefined,
+							error,
+							suspended: false
+						});
+						promise.current = undefined;
+						!!onLoading && onLoading(false);
+						!!onError && onError(error);
+					}
+				})
+				.catch(err => {
+					const error = typeof err === "string"
+						? err
+						: (err as Error).message;
+					setStatus({ error, data: undefined, loading: false, suspended: false });
+					promise.current = undefined;
+					!!onLoading && onLoading(false);
+					!!onError && onError(error);
+				});
+			setStatus({loading: true, data: undefined, error: undefined, suspended: true});
+			return promise.current;
+		} else {
+			let response: Response;
+			!!onLoading && onLoading(true);
+			setStatus({ loading: true, error: undefined, data: undefined, suspended: false });
+			return fetch(url, { ...rest, ...conf })
+				.then(resp => {
+					response = resp;
+					return (!response.headers.get("Content-Type") || response.headers.get("Content-Type")?.startsWith("text")
+						? response.text()
+						: response.headers.get("Content-Type")?.includes("json")
+							? response.json()
+							: response.blob()) as T;
+				})
+				.then(data => {
+					if (response.ok) {
+						setStatus({ error: undefined, loading: false, data, suspended: false });
+						!!onLoading && onLoading(false);
+					} else {
+						const error = data
+							? data
+							: response.status + " - " + response.statusText;
+						setStatus({
+							loading: false,
+							data: undefined,
+							error,
+							suspended: false
+						});
+						!!onLoading && onLoading(false);
+						!!onError && onError(error);
+					}
+				})
+				.catch(err => {
+					const error = typeof err === "string"
+						? err
+						: (err as Error).message;
+					setStatus({ error, data: undefined, loading: false, suspended: false });
+					!!onLoading && onLoading(false);
+					!!onError && onError(error);
+				});
+		}
+	}, [rest, url, onError, onLoading, suspensable]);
+
+	return [status.data, call, status.loading, status.error];
+}

packages/react-tools/src/hooks/usePromiseSuspensible.ts

@@ -9,7 +9,7 @@ const promiseCache: { deps: DependencyList, promise: Promise<void>, error?: unkn
  * @param {DependencyList} deps - DependencyList for promise to suspense.
  * @returns {Awaited<ReturnType<T>>} result - resolve promise value.
  */
-export const usePromiseSuspensible = <T extends (...args: unknown[]) => Promise<unknown>>(promise: T, deps: DependencyList) => {
+export const usePromiseSuspensible = <T extends (...args: unknown[]) => Promise<unknown>>(promise: T, deps: DependencyList): Awaited<ReturnType<T>> => {
 	const index = useRef(-1);
 	useEffectOnce(() => () => {
 		index.current !== -1 && promiseCache.splice(index.current, 1);
@@ -18,10 +18,10 @@ export const usePromiseSuspensible = <T extends (...args: unknown[]) => Promise<
 	for (const cached of promiseCache) {
 		index.current = index.current+1;
 		if (isDeepEqual([...deps, promise.toString()], cached.deps)) {
-			if (Object.prototype.hasOwnProperty.call(cached, "error")) {
+			if ("error" in cached) {
 				throw cached.error;
 			}
-			if (Object.prototype.hasOwnProperty.call(cached, "response")) {
+			if ("response" in cached) {
 				return cached.response as Awaited<ReturnType<T>>;
 			}
 			throw cached.promise;

packages/react-tools/src/index.ts

@@ -196,7 +196,8 @@ export {
 	useSwipe,
 	useWebWorker,
 	useWebWorkerFn,
-	usePromiseSuspensible
+	usePromiseSuspensible,
+	useFetch
 } from './hooks'
 
 export {