[IMPL] useIsOnline hook

nDriaDev · nDriaDev · commit 06be59fa02af · 2023-11-24T15:27:25.000+01:00
diff --git a/apps/react-tools-demo/scripts/generateMarkdown.js b/apps/react-tools-demo/scripts/generateMarkdown.js
@@ -251,7 +251,7 @@ function buildHooksUtilsMarkdownObject(file) {
 			obj.description = titleDescription.join(":").trim();
 			obj.description = obj.description.charAt(0).toUpperCase() + obj.description.substring(1);
 			let lastDescriptionIndex = index+1;
-			while([" * @param", " * @returns", "//", " */", "*/"].filter(key => lines[lastDescriptionIndex].startsWith(key)).length === 0) {
+			while([" * @", "//", " */", "*/"].filter(key => lines[lastDescriptionIndex].startsWith(key)).length === 0) {
 				lastDescriptionIndex++;
 			}
 			if(lastDescriptionIndex !== (index+1)) {
diff --git a/apps/react-tools-demo/src/components/hooks/useIsOnline/UseIsOnline.tsx b/apps/react-tools-demo/src/components/hooks/useIsOnline/UseIsOnline.tsx
@@ -0,0 +1,12 @@
+import { useIsOnline } from "../../../../../../packages/react-tools/src"
+
+/**
+The component display the network connection informations. Try to change connection type from console to see changes.
+ */
+export const UseIsOnline = () => {
+	const connectionState = useIsOnline();
+
+	return (<div style={{ textAlign: "center" }}>
+		<p>Online: {JSON.stringify(connectionState)}</p>
+	</div>)
+}
diff --git a/apps/react-tools-demo/src/components/hooks/useNetwork/UseNetwork.tsx b/apps/react-tools-demo/src/components/hooks/useNetwork/UseNetwork.tsx
@@ -0,0 +1,16 @@
+import { useNetwork } from "../../../../../../packages/react-tools/src"
+
+/**
+The component display the network connection informations. Try to change connection type from console to see changes.
+ */
+export const UseNetwork = () => {
+	const connectionState = useNetwork();
+
+	return (<div style={{ textAlign: "center" }}>
+		{
+			Object.keys(connectionState).map(el => (
+				<p key={el}>{el}: {JSON.stringify(connectionState[el as keyof typeof connectionState])}</p>
+			))
+		}
+	</div>)
+}
diff --git a/apps/react-tools-demo/src/constants/components.ts b/apps/react-tools-demo/src/constants/components.ts
@@ -49,7 +49,9 @@ export const COMPONENTS = [
 			"useDocumentVisibility",
 			"useHover",
 			"useResponsive",
-			"useClickOutside"
+			"useClickOutside",
+			"useNetwork",
+			"useIsOnline"
 		],
 		//API DOM
 		[
diff --git a/apps/react-tools-demo/src/markdown/useIsOnline.md b/apps/react-tools-demo/src/markdown/useIsOnline.md
@@ -0,0 +1,34 @@
+# useIsOnline
+Hook to detect network connection status.
+
+## Usage
+
+```tsx
+export const UseIsOnline = () => {
+	const connectionState = useIsOnline();
+
+	return (<div style={{ textAlign: "center" }}>
+		<p>Online: {JSON.stringify(connectionState)}</p>
+	</div>)
+}
+```
+
+> The component display the network connection informations. Try to change connection type from console to see changes.
+
+
+## API
+
+```tsx
+useIsOnline (): boolean 
+```
+
+> ### Params
+>
+>
+>
+
+> ### Returns
+>
+> __isOnline__
+> - _boolean_  
+>
diff --git a/apps/react-tools-demo/src/markdown/useNetwork.md b/apps/react-tools-demo/src/markdown/useNetwork.md
@@ -0,0 +1,39 @@
+# useNetwork
+Hook to detect network connection infos, refer to [Network Information API](https://developer.mozilla.org/en-US/docs/Web/API/NetworkInformation). It takes optinally a parameter __selectedInfo__ to specify a subset of connection status property.
+
+## Usage
+
+```tsx
+export const UseNetwork = () => {
+	const connectionState = useNetwork();
+
+	return (<div style={{ textAlign: "center" }}>
+		{
+			Object.keys(connectionState).map(el => (
+				<p key={el}>{el}: {JSON.stringify(connectionState[el as keyof typeof connectionState])}</p>
+			))
+		}
+	</div>)
+}
+```
+
+> The component display the network connection informations. Try to change connection type from console to see changes.
+
+
+## API
+
+```tsx
+useNetwork<T extends keyof ConnectionState>(selectedInfo?: ArrayMinLength1<T>): ConnectionState | {[k in T] : ConnectionState[k]} 
+```
+
+> ### Params
+>
+> - __selectedInfo?__: _ArrayMinLength1<T>_  
+array of connection property.
+>
+
+> ### Returns
+>
+> __object__: Network connection property or a subset if __selectedInfo__ is specified.
+> - _ConnectionState|{[k in T] : ConnectionState[k]}_  
+>
diff --git a/apps/react-tools-demo/src/markdown/useStateGetReset.md b/apps/react-tools-demo/src/markdown/useStateGetReset.md
@@ -23,12 +23,6 @@ const UseStateGetReset = () => {
 		});
 	}, [state, setState])
 
-	const fullState = useMemo(() => {
-		console.log("fullState")
-		const state = getState();
-		return <p>{state.id} - {state.name} - {state.eta}</p>
-	}, [getState])
-
 	return (
 		<div style={{ display: "grid", gridTemplateColumns: "auto auto", justifyContent: "center", gap: 50 }}>
 			<div>
@@ -48,7 +42,6 @@ const UseStateGetReset = () => {
 					<Input id="eta" name="eta" value={state.eta} onChange={onChange} />
 				</div>
 			</div>
-			{fullState}
 		</div>
 	);
 };
diff --git a/packages/react-tools/README.md b/packages/react-tools/README.md
@@ -47,8 +47,8 @@
 	- [x] useHover
 	- [x] useResponsive
 	- [x] useClickOutside
-	- [-] useNetwork
-	- [ ] useOnline
+	- [x] useNetwork
+	- [x] useOnline
 	- [ ] useSize (=useMeasuree?)
 	- [ ] useScrollIntoView
 	- [ ] useMouse
diff --git a/packages/react-tools/src/hooks/index.ts b/packages/react-tools/src/hooks/index.ts
@@ -45,4 +45,6 @@ export { useLazyRef } from './useLazyRef';
 export { useId } from './useId';
 export { useHover } from './useHover';
 export { useResponsive } from './useResponsive';
-export { useClickOutside } from './useClickOutside';
+export { useClickOutside } from './useClickOutside';
+export { useNetwork } from './useNetwork';
+export { useIsOnline } from './useIsOnline';
diff --git a/packages/react-tools/src/hooks/useActiveElement.ts b/packages/react-tools/src/hooks/useActiveElement.ts
@@ -11,7 +11,7 @@ export const useActiveElement = ():Element|null => {
 	return useSyncExternalStore(
 		useCallback(notif => {
 			previousElem.current = document.activeElement;
-			const idTimeout: { id: number | NodeJS.Timeout } = { id: 0 };
+			const idTimeout: { id: number } = { id: 0 };
 			const listener = (e: Event) => {
 				/**
 				 * INFO
@@ -27,7 +27,7 @@ export const useActiveElement = ():Element|null => {
 				if (e.type === "focusout") {
 					idTimeout.id = setTimeout(() => {
 						notif()
-					}, 0);
+					}, 0) as unknown as number;
 				} else {
 					clearTimeout(idTimeout.id);
 					notif();
diff --git a/packages/react-tools/src/hooks/useDebounce.ts b/packages/react-tools/src/hooks/useDebounce.ts
@@ -3,10 +3,10 @@ import { useCallback, useRef } from "react"
 const debounce = (fn: () => void, delay: number, focusedWindow=false) => {
 	if (!focusedWindow || typeof requestAnimationFrame === "undefined") {
 		return {
-			id: setTimeout(fn, delay)
+			id: setTimeout(fn, delay) as unknown as number
 		};
 	}
-	const handle: {id: number | NodeJS.Timeout} = {id:0};
+	const handle: {id: number} = {id:0};
 	const startTime = new Date().getTime();
 	const loop = () => {
 		const current = new Date().getTime();
@@ -18,7 +18,7 @@ const debounce = (fn: () => void, delay: number, focusedWindow=false) => {
 	handle.id = requestAnimationFrame(loop);
 	return handle;
 }
-const cancelDebounce = (handle: {id: number | NodeJS.Timeout}, focusedWindow=false) => {
+const cancelDebounce = (handle: {id: number}, focusedWindow=false) => {
 	if (!focusedWindow || typeof cancelAnimationFrame === "undefined") {
 		return clearTimeout(handle.id);
 	}
@@ -34,7 +34,7 @@ const cancelDebounce = (handle: {id: number | NodeJS.Timeout}, focusedWindow=fal
  * @returns {[(...args: unknown[]) => void, ()=>void, (...args: unknown[]) => void]} - array with debounced function, cancel function to abor debounced function and and immediate function to execute function immediately.
  */
 export const useDebounce = <T extends unknown[]>(fn: (...args: T)=>void, opts: { delay: number, focusedWindow?: boolean }): [(...args: T) => void, () => void, (...args: T) => void] => {
-	const idRef = useRef<{ id: number | NodeJS.Timeout }>({id:0});
+	const idRef = useRef<{ id: number }>({id:0});
 	const optsRef = useRef(opts);
 
 	const fnDebounced = useCallback((...args: T) => {
diff --git a/packages/react-tools/src/hooks/useInterval.ts b/packages/react-tools/src/hooks/useInterval.ts
@@ -7,19 +7,19 @@ import { useCallback, useEffect, useRef } from "react"
  * @returns {[(...args: TArgs) => void, () => void, (...args: TArgs) => Promise<void>]} - array: first element is the function to call setInterval; second element is the function to clearInterval; thrid element promisify setInterval.
  */
 export const useInterval = <TArgs extends unknown[]>(callback: (...args: TArgs) => void, delay: number): [(...args: TArgs) => void, () => void, (...args: TArgs) => Promise<void>] => {
-	const idInterval = useRef<number | NodeJS.Timeout>();
+	const idInterval = useRef<number>();
 
 	const apply = useCallback((...args: TArgs): void => {
 		clearInterval(idInterval.current);
-		idInterval.current = setInterval(() => callback(...args), delay);
+		idInterval.current = setInterval(() => callback(...args), delay) as unknown as number;
 	}, [callback, delay]);
 
 	const applyPromisify = useCallback((...args: TArgs): Promise<void> => {
 		clearInterval(idInterval.current);
 		return new Promise<void>(res => {
 			idInterval.current = setInterval(() => {
 				res(callback(...args));
-			}, delay);
+			}, delay) as unknown as number;
 		})
 	}, [callback, delay]);
 
diff --git a/packages/react-tools/src/hooks/useIsOnline.ts b/packages/react-tools/src/hooks/useIsOnline.ts
@@ -0,0 +1,9 @@
+import { useNetwork } from "."
+
+/**
+ * **`useIsOnline`**: Hook to detect network connection status.
+ * @returns {boolean} isOnline
+ */
+export const useIsOnline = (): boolean => {
+	return useNetwork<"isOnline">(["isOnline"]).isOnline;
+}
diff --git a/packages/react-tools/src/hooks/useNetwork.ts b/packages/react-tools/src/hooks/useNetwork.ts
@@ -1,6 +1,6 @@
-import { useCallback, useMemo } from "react";
+import { useCallback, useMemo, useRef } from "react";
 import { useSyncExternalStore } from "."
-import { ConnectionState } from "../models";
+import { ArrayMinLength1, ConnectionState } from "../models";
 
 const listeners = new Set<() => void>();
 const handler = () => listeners.forEach(l => l());
@@ -23,7 +23,17 @@ const getConnetionState = () => {
 	return obj;
 }
 
-export const useNetwork = () => {
+/**
+ * **`useNetwork`**: Hook to detect network connection infos, refer to [Network Information API](https://developer.mozilla.org/en-US/docs/Web/API/NetworkInformation). It takes optinally a parameter __selectedInfo__ to specify a subset of connection status property.
+ * @template T
+ * @extends {}
+ * @param {ArrayMinLength1<T>} [selectedInfo] - array of connection property.
+ * @returns {ConnectionState|{[k in T] : ConnectionState[k]}} object - Network connection property or a subset if __selectedInfo__ is specified.
+ */
+function useNetwork(selectedInfo?: undefined): ConnectionState;
+function useNetwork<T extends keyof ConnectionState>(selectedInfo?: ArrayMinLength1<T>): { [k in T]: ConnectionState[k] };
+function useNetwork<T extends keyof ConnectionState>(selectedInfo?: ArrayMinLength1<T>): ConnectionState | {[k in T] : ConnectionState[k]} {
+	const selectedInfoCached = useRef(selectedInfo ?? ["isSupported", "isOnline", "since", "downlink", "downlinkMax", "effectiveType", "rtt", "saveData", "type"] as ArrayMinLength1<keyof ConnectionState>);
 	return useSyncExternalStore(
 		useCallback(notif => {
 			const connection = Reflect.get(navigator, "connection");
@@ -44,7 +54,21 @@ export const useNetwork = () => {
 		}, []),
 		useMemo(() => {
 			let prevState = getConnetionState();
-			return () => {}
+			return () => {
+				const state = getConnetionState();
+				for (const key of selectedInfoCached.current) {
+					if (state[key] !== prevState[key]) {
+						prevState = {
+							...state,
+							...(prevState.isOnline !== state.isOnline && {since: new Date().getTime()})
+						};
+						break;
+					}
+				}
+				return prevState;
+			}
 		}, [])
 	);
-}
+}
+
+export {useNetwork}
diff --git a/packages/react-tools/src/hooks/useThrottle.ts b/packages/react-tools/src/hooks/useThrottle.ts
@@ -12,7 +12,7 @@ import { isAsync } from "../utils";
 export const useThrottle = <T extends unknown[]>(fn: (...args: T) => void | Promise<void> , opts: { delay?: number, waitFn?: boolean }): [(...args: T) => void, () => void, (...args: T) => void] => {
 	const optsRef = useRef(opts);
 	const pending = useRef(false);
-	const idRef = useRef<number | NodeJS.Timeout>();
+	const idRef = useRef<number>();
 
 	const fnThrottled = useCallback<typeof fn>((...args: T) => {
 		if (pending.current) {
@@ -21,7 +21,7 @@ export const useThrottle = <T extends unknown[]>(fn: (...args: T) => void | Prom
 		pending.current = true;
 		if (optsRef.current.delay) {
 			fn(...args);
-			idRef.current = setTimeout(() => pending.current = false, optsRef.current.delay);
+			idRef.current = setTimeout(() => pending.current = false, optsRef.current.delay) as unknown as number;
 		} else if (optsRef.current.waitFn) {
 			const current = fn(...args);
 			if (isAsync(current)) {
diff --git a/packages/react-tools/src/hooks/useTimeout.ts b/packages/react-tools/src/hooks/useTimeout.ts
@@ -7,19 +7,19 @@ import { useCallback, useEffect, useRef } from "react"
  * @returns {[(...args: TArgs) => void, () => void, (...args: TArgs) => Promise<void>]} - array: first element is the function to call setTimeout; second element is the function to clearTimeout; thrid element promisify setTimeout.
  */
 export const useTimeout = <TArgs extends unknown[]>(callback: (...args: TArgs) => void, delay: number): [(...args: TArgs) => void, () => void, (...args: TArgs) => Promise<void>] => {
-	const idTimeout = useRef<number | NodeJS.Timeout>();
+	const idTimeout = useRef<number>();
 
 	const apply = useCallback((...args: TArgs): void => {
 		clearTimeout(idTimeout.current);
-		idTimeout.current = setTimeout(() => callback(...args), delay);
+		idTimeout.current = setTimeout(() => callback(...args), delay) as unknown as number;
 	}, [callback, delay]);
 
 	const applyPromisify = useCallback((...args: TArgs): Promise<void> => {
 		clearTimeout(idTimeout.current);
 		return new Promise<void>(res => {
 			idTimeout.current = setTimeout(() => {
 				res(callback(...args));
-			}, delay);
+			}, delay) as unknown as number;
 		})
 	}, [callback, delay]);
 
diff --git a/packages/react-tools/src/index.ts b/packages/react-tools/src/index.ts
@@ -1,6 +1,7 @@
 export type {
 	DependencyListTyped,
 	CompareFn,
+	ArrayMinLength1,
 	UseScriptProps,
 	UseScriptStatus,
 	UseScript,
@@ -58,7 +59,9 @@ export {
 	useId,
 	useHover,
 	useResponsive,
-	useClickOutside
+	useClickOutside,
+	useNetwork,
+	useIsOnline
 } from './hooks'
 
 export {
diff --git a/packages/react-tools/src/models/common.model.ts b/packages/react-tools/src/models/common.model.ts
@@ -10,3 +10,5 @@ export interface CompareFn<T = unknown> {
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 export type PartialRecord<K extends keyof any, T> = Partial<Record<K, T>>
+
+export type ArrayMinLength1<T> = { 0: T } & Array<T>;
diff --git a/packages/react-tools/src/models/index.ts b/packages/react-tools/src/models/index.ts
@@ -1,4 +1,4 @@
-export type { DependencyListTyped, CompareFn } from "./common.model";
+export type { DependencyListTyped, CompareFn, ArrayMinLength1 } from "./common.model";
 export type { UseScriptProps, UseScript, UseScriptStatus } from './useScript.model';
 export type { TextSelection } from './useTextSelection.model';
 export type { useResponsiveKeys, useResponsiveBreakpoints } from './useResponsive.model';
diff --git a/packages/react-tools/src/models/useNetwork.model.ts b/packages/react-tools/src/models/useNetwork.model.ts
@@ -1,6 +1,7 @@
 export interface ConnectionState {
 	isSupported: boolean;
 	isOnline: boolean;
+	since?: number;
 	downlink?: number;
 	downlinkMax?: number;
 	effectiveType?: "slow-2g" | "2g" | "3g" | "4g";

Original file line number	Diff line number	Diff line change
`@@ -251,7 +251,7 @@ function buildHooksUtilsMarkdownObject(file) {`
`251`	`251`	`obj.description = titleDescription.join(":").trim();`
`252`	`252`	`obj.description = obj.description.charAt(0).toUpperCase() + obj.description.substring(1);`
`253`	`253`	`let lastDescriptionIndex = index+1;`
`254`		`- while([" * @param", " * @returns", "//", " /", "/"].filter(key => lines[lastDescriptionIndex].startsWith(key)).length === 0) {`
	`254`	`+ while([" * @", "//", " /", "/"].filter(key => lines[lastDescriptionIndex].startsWith(key)).length === 0) {`
`255`	`255`	`lastDescriptionIndex++;`
`256`	`256`	`}`
`257`	`257`	`if(lastDescriptionIndex !== (index+1)) {`