[WIP] useNetwork

Author: nDriaDev

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

@@ -1,12 +1,16 @@
 import { useCallback, useMemo } from "react";
 import { useSyncExternalStore } from "."
+import { ConnectionState } from "../models";
 
 const listeners = new Set<() => void>();
 const handler = () => listeners.forEach(l => l());
 
 const getConnetionState = () => {
 	const connection = Reflect.get(navigator, "connection");
-	let obj = { online: navigator.onLine };
+	const obj: ConnectionState = {
+		isSupported: !!connection,
+		isOnline: navigator.onLine
+	};
 	if (connection) {
 		obj.isSupported = true;
 		obj.downlink = connection.downlink as number;
@@ -15,23 +19,32 @@ const getConnetionState = () => {
 		obj.rtt = connection.rtt as number;
 		obj.saveData = connection.saveData as boolean;
 		obj.type = connection.type as "bluetooth" | "cellular" | "ethernet" | "none" | "wifi" | "wimax" | "other" | "unknown";
-	} else {
-		obj.isSupported = false;
-		obj.downlink = null;
-		obj.downlinkMax = null;
-		obj.effectiveType = null;
-		obj.rtt = null;
-		obj.saveData = null;
-		obj.type = null;
 	}
+	return obj;
 }
+
 export const useNetwork = () => {
 	return useSyncExternalStore(
 		useCallback(notif => {
-
+			const connection = Reflect.get(navigator, "connection");
+			if (listeners.size === 0) {
+				window.addEventListener("online", handler);
+				window.addEventListener("offline", handler);
+				!!connection && connection.addEventListener("change", handler);
+			}
+			listeners.add(notif);
+			return () => {
+				listeners.delete(handler);
+				if (listeners.size === 0) {
+					window.removeEventListener("online", handler);
+					window.removeEventListener("offline", handler);
+					!!connection && connection.removeEventListener("change", handler);
+				}
+			}
 		}, []),
 		useMemo(() => {
 			let prevState = getConnetionState();
+			return () => {}
 		}, [])
 	);
 }

packages/react-tools/src/index.ts

@@ -6,7 +6,8 @@ export type {
 	UseScript,
 	TextSelection,
 	useResponsiveKeys,
-	useResponsiveBreakpoints
+	useResponsiveBreakpoints,
+	ConnectionState
 } from './models'
 
 export {

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

@@ -1,4 +1,5 @@
 export type { DependencyListTyped, CompareFn } from "./common.model";
 export type { UseScriptProps, UseScript, UseScriptStatus } from './useScript.model';
 export type { TextSelection } from './useTextSelection.model';
-export type { useResponsiveKeys, useResponsiveBreakpoints } from './useResponsive.model';
+export type { useResponsiveKeys, useResponsiveBreakpoints } from './useResponsive.model';
+export type { ConnectionState } from './useNetwork.model';

packages/react-tools/src/models/useNetwork.model.ts

@@ -0,0 +1,10 @@
+export interface ConnectionState {
+	isSupported: boolean;
+	isOnline: boolean;
+	downlink?: number;
+	downlinkMax?: number;
+	effectiveType?: "slow-2g" | "2g" | "3g" | "4g";
+	rtt?: number;
+	saveData?: boolean;
+	type?: "bluetooth" | "cellular" | "ethernet" | "none" | "wifi" | "wimax" | "other" | "unknown";
+}