Updates

components/lib/hooks/useCustomEventDispatch.tsx

@@ -0,0 +1,37 @@
+import React from "react";
+
+type Param = {
+    /**
+     * Custom Event Name
+     */
+    name: string;
+};
+
+/**
+ * # Dispatch Custom Event
+ */
+export default function useCustomEventDispatch<
+    T extends { [key: string]: any } = { [key: string]: any }
+>({ name }: Param) {
+    const dispatchCustomEvent = React.useCallback((value: T | string) => {
+        let dataParsed = typeof value == "object" ? value : undefined;
+        const str = typeof value == "string" ? value : undefined;
+
+        if (str) {
+            try {
+                dataParsed = JSON.parse(str);
+            } catch (error) {}
+        }
+
+        const event = new CustomEvent(name, {
+            detail: {
+                data: dataParsed,
+                message: str,
+            },
+        });
+
+        window.dispatchEvent(event);
+    }, []);
+
+    return { dispatchCustomEvent };
+}

components/lib/hooks/useCustomEventListener.tsx

@@ -0,0 +1,39 @@
+import React from "react";
+
+type Param = {
+    /**
+     * Custom Event Name
+     */
+    name: string;
+};
+
+/**
+ * # Listen For Custom Event
+ */
+export default function useCustomEventListener<
+    T extends { [key: string]: any } = { [key: string]: any }
+>({ name }: Param) {
+    const [data, setData] = React.useState<T | undefined>(undefined);
+    const [message, setMessage] = React.useState<string | undefined>(undefined);
+
+    const dataEventListenerCallback = React.useCallback((e: Event) => {
+        const customEvent = e as CustomEvent;
+        const eventPayloadMessage = customEvent.detail.message as
+            | string
+            | undefined;
+        const eventPayloadData = customEvent.detail.data as T | undefined;
+
+        if (eventPayloadMessage) setMessage(eventPayloadMessage);
+        if (eventPayloadData) setData(eventPayloadData);
+    }, []);
+
+    React.useEffect(() => {
+        window.addEventListener(name, dataEventListenerCallback, false);
+
+        return function () {
+            window.removeEventListener(name, dataEventListenerCallback);
+        };
+    }, []);
+
+    return { data, message };
+}

components/lib/hooks/useLocalStorage.tsx

@@ -0,0 +1,31 @@
+import React from "react";
+
+export type UseLocalStorageParam<
+    T extends { [key: string]: any } = { [key: string]: any }
+> = {
+    key: keyof T;
+};
+
+/**
+ * # Use Local Storage
+ */
+export default function useLocalStorage<
+    T extends Record<string, any> | undefined = undefined
+>(param?: UseLocalStorageParam) {
+    const [data, setData] =
+        React.useState<T extends undefined ? string | null : T>();
+
+    React.useEffect(() => {
+        if (param?.key) {
+            const value = localStorage.getItem(param.key as string);
+            try {
+                const jsonValue = JSON.parse(value || "");
+                setData(jsonValue as any);
+            } catch (error) {
+                setData(value as any);
+            }
+        }
+    }, []);
+
+    return { data };
+}

components/lib/hooks/useWebSocket.tsx

@@ -10,10 +10,10 @@ let reconnectInterval: any;
 let msgInterval: any;
 let sendInterval: any;
 
-let tries = 0;
-
 export const WebSocketEventNames = ["wsDataEvent", "wsMessageEvent"] as const;
 
+let tries = 0;
+
 /**
  * # Use Websocket Hook
  * @event wsDataEvent Listen for event named `wsDataEvent` on `window` to receive Data events
@@ -38,10 +38,6 @@ export default function useWebSocket<
     const messageQueueRef = React.useRef<string[]>([]);
     const sendMessageQueueRef = React.useRef<string[]>([]);
 
-    // const [message, setMessage] = React.useState<string>("");
-    // const [data, setData] = React.useState<T | null>(null);
-    const [refresh, setRefresh] = React.useState(0);
-
     const dispatchCustomEvent = React.useCallback(
         (evtName: (typeof WebSocketEventNames)[number], value: string | T) => {
             const event = new CustomEvent(evtName, {
@@ -55,16 +51,17 @@ export default function useWebSocket<
         []
     );
 
-    React.useEffect(() => {
+    const connect = React.useCallback(() => {
         const wsURL = url;
         if (!wsURL) return;
 
-        const ws = new WebSocket(wsURL);
+        let ws = new WebSocket(wsURL);
 
         ws.onopen = (ev) => {
             window.clearInterval(reconnectInterval);
             setSocket(ws);
             tries = 0;
+            console.log(`Websocket connected to ${wsURL}`);
         };
 
         ws.onmessage = (ev) => {
@@ -83,16 +80,22 @@ export default function useWebSocket<
                 if (tries >= 3) {
                     return window.clearInterval(reconnectInterval);
                 }
+
                 console.log("Attempting to reconnect ...");
-                setRefresh(refresh + 1);
                 tries++;
+
+                connect();
             }, 1000);
         };
+    }, []);
+
+    React.useEffect(() => {
+        connect();
 
         return function () {
             window.clearInterval(reconnectInterval);
         };
-    }, [refresh]);
+    }, []);
 
     /**
      * Received Message Queue Handler
@@ -103,8 +106,6 @@ export default function useWebSocket<
             if (!newMessage) return;
             try {
                 const jsonData = JSON.parse(newMessage);
-                // setData(jsonData);
-
                 dispatchCustomEvent("wsMessageEvent", newMessage);
                 dispatchCustomEvent("wsDataEvent", jsonData);
             } catch (error) {