Rename jadi hardware websocket dan mengubah useEffect menjadi subscribe method

apps/clients/chooser/src/App.tsx

@@ -11,7 +11,7 @@ import superjson from "superjson";
 
 import { ClientNotFound } from "@sora-vp/ui/client-not-found";
 
-import { KeyboardWebsocketProvider } from "./context/keyboard-websocket";
+import { HardwareWebsocketProvider } from "./context/hardware-websocket";
 import { env } from "./env";
 
 const router = createBrowserRouter([
@@ -78,13 +78,13 @@ export default function App() {
   return (
     <api.Provider client={trpcClient} queryClient={queryClient}>
       <QueryClientProvider client={queryClient}>
-        <KeyboardWebsocketProvider>
+        <HardwareWebsocketProvider>
           <ParticipantProvider>
             <ServerSettingProvider>
               <RouterProvider router={router} />
             </ServerSettingProvider>
           </ParticipantProvider>
-        </KeyboardWebsocketProvider>
+        </HardwareWebsocketProvider>
       </QueryClientProvider>
     </api.Provider>
   );

apps/clients/chooser/src/components/scanner/index.tsx

@@ -1,5 +1,5 @@
 import { useCallback, useEffect, useState } from "react";
-import { useKeyboardWebsocket } from "@/context/keyboard-websocket";
+import { useHardwareWebsocket } from "@/context/hardware-websocket";
 import { useParticipant } from "@/context/participant-context";
 import { api } from "@/utils/api";
 import { Navigate } from "react-router-dom";
@@ -10,24 +10,21 @@ import { MainScanner } from "./main-scanner";
 
 export function ScannerComponent() {
   const { qrId, setQRCode } = useParticipant();
-  const { wsEnabled, lastMessage, setLastMessage } = useKeyboardWebsocket();
+  const { subscribe } = useHardwareWebsocket();
 
   const [isQrInvalid, setInvalidQr] = useState(false);
 
   const participantAttended =
     api.clientConsumer.checkParticipantAttended.useMutation({
       onSuccess() {
-        setLastMessage(null);
-
         setQRCode(participantAttended.variables!);
       },
     });
 
   useEffect(() => {
-    if (wsEnabled && lastMessage) {
-      // Precheck before consuming command
-      if (lastMessage.startsWith("SORA-KEYBIND-")) {
-        const actualCommand = lastMessage.replace("SORA-KEYBIND-", "");
+    const unsubHardware = subscribe((message) => {
+      if (message.startsWith("SORA-KEYBIND-")) {
+        const actualCommand = message.replace("SORA-KEYBIND-", "");
 
         switch (actualCommand) {
           case "RELOAD": {
@@ -37,8 +34,12 @@ export function ScannerComponent() {
           }
         }
       }
-    }
-  }, [isQrInvalid, participantAttended.isError, wsEnabled, lastMessage]);
+    });
+
+    return () => {
+      unsubHardware();
+    };
+  }, [isQrInvalid, participantAttended.isError]);
 
   const setIsQrValid = useCallback(
     (invalid: boolean) => setInvalidQr(invalid),

apps/clients/chooser/src/context/keyboard-websocket.tsx → apps/clients/chooser/src/context/hardware-websocket.tsx

@@ -3,37 +3,39 @@ import {
   useCallback,
   useContext,
   useEffect,
-  useMemo,
-  useState,
+  useRef,
 } from "react";
 import { defaultWSPortAtom, enableWSConnectionAtom } from "@/utils/atom";
 import { useAtomValue } from "jotai";
 import useWebSocket, { ReadyState } from "react-use-websocket";
 
 import { toast } from "@sora-vp/ui/toast";
 
-export interface IKeyboardWebsocket {
+export type THardwareWebsocketCallback = (message: string) => void;
+
+export interface IHardwareWebsocket {
   wsEnabled: boolean;
-  lastMessage: string | null;
-  setLastMessage: (msg: string | null) => void;
+  subscribe(callbacK: THardwareWebsocketCallback): () => void;
 }
 
-export const KeyboardWebsocketContext = createContext<IKeyboardWebsocket>(
-  {} as IKeyboardWebsocket,
+export const HardwareWebsocketContext = createContext<IHardwareWebsocket>(
+  {} as IHardwareWebsocket,
 );
 
-export const KeyboardWebsocketProvider = ({
+export const HardwareWebsocketProvider = ({
   children,
 }: {
   children: React.ReactNode;
 }) => {
-  const [lastMessage, setLastMessageState] =
-    useState<IKeyboardWebsocket["lastMessage"]>(null);
+  const currentSubscriberIdRef = useRef<number>(0);
+  const subscribersRef = useRef<Map<number, THardwareWebsocketCallback>>(
+    new Map(),
+  );
 
   const wsPortNumber = useAtomValue(defaultWSPortAtom);
   const wsEnabled = useAtomValue(enableWSConnectionAtom);
 
-  const { lastMessage: libLastMessage, readyState } = useWebSocket<string>(
+  const { lastMessage, readyState } = useWebSocket<string>(
     wsEnabled ? `ws://127.0.0.1:${wsPortNumber}/ws` : null,
     {
       share: true,
@@ -47,23 +49,23 @@ export const KeyboardWebsocketProvider = ({
     },
   );
 
-  const setLastMessage = useCallback(
-    (msg: IKeyboardWebsocket["lastMessage"]) => setLastMessageState(msg),
-    [],
-  );
+  const subscribe = useCallback((callback: THardwareWebsocketCallback) => {
+    const id = currentSubscriberIdRef.current;
+    subscribersRef.current.set(id, callback);
+    currentSubscriberIdRef.current++;
 
-  const contextValue = useMemo(
-    () => ({
-      wsEnabled,
-      lastMessage,
-      setLastMessage,
-    }),
-    [wsEnabled, lastMessage],
-  );
+    return () => {
+      subscribersRef.current.delete(id);
+    };
+  }, []);
 
   useEffect(() => {
-    if (libLastMessage) setLastMessageState(libLastMessage.data);
-  }, [libLastMessage]);
+    if (lastMessage) {
+      Array.from(subscribersRef.current).forEach(([, callback]) => {
+        callback(lastMessage.data);
+      });
+    }
+  }, [lastMessage]);
 
   useEffect(() => {
     if (wsEnabled) {
@@ -96,11 +98,16 @@ export const KeyboardWebsocketProvider = ({
   }, [readyState, wsEnabled]);
 
   return (
-    <KeyboardWebsocketContext.Provider value={contextValue}>
+    <HardwareWebsocketContext.Provider
+      value={{
+        wsEnabled,
+        subscribe,
+      }}
+    >
       {children}
-    </KeyboardWebsocketContext.Provider>
+    </HardwareWebsocketContext.Provider>
   );
 };
 
-export const useKeyboardWebsocket = () =>
-  useContext(KeyboardWebsocketContext) as IKeyboardWebsocket;
+export const useHardwareWebsocket = () =>
+  useContext(HardwareWebsocketContext) as IHardwareWebsocket;

apps/clients/chooser/src/context/participant-context.tsx

@@ -11,7 +11,7 @@ import { api } from "@/utils/api";
 import { motion } from "framer-motion";
 import { Navigate } from "react-router-dom";
 
-import { useKeyboardWebsocket } from "./keyboard-websocket";
+import { useHardwareWebsocket } from "./hardware-websocket";
 
 export interface IParticipantContext {
   name: string | null;
@@ -30,7 +30,7 @@ export const ParticipantProvider = ({
 }: {
   children: React.ReactNode;
 }) => {
-  const { wsEnabled, lastMessage } = useKeyboardWebsocket();
+  const { subscribe } = useHardwareWebsocket();
 
   const [qrId, setQrId] = useState<string | null>(null);
   const [votedSuccessfully, setVoted] = useState(false);
@@ -50,10 +50,9 @@ export const ParticipantProvider = ({
   );
 
   useEffect(() => {
-    if (wsEnabled && lastMessage) {
-      // Precheck before consuming command
-      if (lastMessage.startsWith("SORA-KEYBIND-")) {
-        const actualCommand = lastMessage.replace("SORA-KEYBIND-", "");
+    const unsubHardware = subscribe((message) => {
+      if (message.startsWith("SORA-KEYBIND-")) {
+        const actualCommand = message.replace("SORA-KEYBIND-", "");
 
         switch (actualCommand) {
           case "RELOAD": {
@@ -69,14 +68,12 @@ export const ParticipantProvider = ({
           }
         }
       }
-    }
-  }, [
-    qrId,
-    participantQuery.isFetched,
-    participantQuery.data,
-    wsEnabled,
-    lastMessage,
-  ]);
+
+      return () => {
+        unsubHardware();
+      };
+    });
+  }, [qrId, participantQuery.isFetched, participantQuery.data]);
 
   const propsValue = useMemo(() => {
     if (!qrId)

apps/clients/chooser/src/context/server-setting.tsx

@@ -4,7 +4,7 @@ import { api } from "@/utils/api";
 import { motion } from "framer-motion";
 import { Loader } from "lucide-react";
 
-import { useKeyboardWebsocket } from "./keyboard-websocket";
+import { useHardwareWebsocket } from "./hardware-websocket";
 import { useParticipant } from "./participant-context";
 
 interface ISettingContext {
@@ -20,7 +20,7 @@ export const ServerSettingProvider = ({
 }: {
   children: React.ReactNode;
 }) => {
-  const { wsEnabled, lastMessage } = useKeyboardWebsocket();
+  const { subscribe } = useHardwareWebsocket();
   const { qrId, setQRCode } = useParticipant();
 
   const [errorMessage, setErrorMessage] = useState("");
@@ -31,10 +31,9 @@ export const ServerSettingProvider = ({
   });
 
   useEffect(() => {
-    if (wsEnabled && lastMessage) {
-      // Precheck before consuming command
-      if (lastMessage.startsWith("SORA-KEYBIND-")) {
-        const actualCommand = lastMessage.replace("SORA-KEYBIND-", "");
+    const unsubHardware = subscribe((message) => {
+      if (message.startsWith("SORA-KEYBIND-")) {
+        const actualCommand = message.replace("SORA-KEYBIND-", "");
 
         switch (actualCommand) {
           case "RELOAD": {
@@ -44,8 +43,12 @@ export const ServerSettingProvider = ({
           }
         }
       }
-    }
-  }, [settingsQuery.errorUpdateCount, wsEnabled, lastMessage]);
+    });
+
+    return () => {
+      unsubHardware();
+    };
+  }, [settingsQuery.errorUpdateCount]);
 
   useEffect(() => {
     if (settingsQuery.error) setErrorMessage(settingsQuery.error.message);

apps/clients/chooser/src/routes/vote-page.tsx

@@ -1,6 +1,6 @@
 import { useCallback, useEffect, useMemo, useState } from "react";
 import { UniversalError } from "@/components/universal-error";
-import { useKeyboardWebsocket } from "@/context/keyboard-websocket";
+import { useHardwareWebsocket } from "@/context/hardware-websocket";
 import { ensureQRIDExist, useParticipant } from "@/context/participant-context";
 import { env } from "@/env";
 import { api } from "@/utils/api";
@@ -91,7 +91,7 @@ const CurrentParticipantInfo = (props: { isSuccess?: boolean }) => {
 
 function VotePage() {
   const { qrId, setQRCode, setVotedSuccessfully } = useParticipant();
-  const { wsEnabled, lastMessage, setLastMessage } = useKeyboardWebsocket();
+  const { subscribe } = useHardwareWebsocket();
 
   const successTimeout = useAtomValue(successTimeoutAtom);
 
@@ -116,9 +116,6 @@ function VotePage() {
       setAlertOpen(false);
       setID(null);
     },
-    onSettled() {
-      setLastMessage(null);
-    },
   });
 
   const candidateName = useMemo(
@@ -141,8 +138,6 @@ function VotePage() {
   const chooseCandidate = useCallback(() => {
     if (!cannotPushKey) {
       if (qrId && currentID && alertOpen) {
-        setLastMessage(null);
-
         upvoteCandidate.mutate({
           id: currentID,
           qrId,
@@ -176,7 +171,6 @@ function VotePage() {
           if (!upvoteCandidate.isPending) {
             setID(null);
             setAlertOpen(false);
-            setLastMessage(null);
           }
 
           break;
@@ -228,17 +222,15 @@ function VotePage() {
   }, [upvoteCandidate.isPending, alertOpen, triggerOpen, chooseCandidate]);
 
   useEffect(() => {
-    if (wsEnabled && lastMessage) {
-      // Precheck before consuming command
-      if (lastMessage.startsWith("SORA-KEYBIND-")) {
-        const actualCommand = lastMessage.replace("SORA-KEYBIND-", "");
+    const unsubHardware = subscribe((message) => {
+      if (message.startsWith("SORA-KEYBIND-")) {
+        const actualCommand = message.replace("SORA-KEYBIND-", "");
 
         switch (actualCommand) {
           case "ESC": {
             if (!upvoteCandidate.isPending) {
               setID(null);
               setAlertOpen(false);
-              setLastMessage(null);
             }
 
             break;
@@ -288,15 +280,17 @@ function VotePage() {
           }
         }
       }
-    }
+    });
+
+    return () => {
+      unsubHardware();
+    };
   }, [
     upvoteCandidate.isPending,
     candidateList.errorUpdateCount,
     alertOpen,
     triggerOpen,
     chooseCandidate,
-    wsEnabled,
-    lastMessage,
   ]);
 
   useEffect(() => {
@@ -443,7 +437,6 @@ function VotePage() {
         open={alertOpen || (upvoteCandidate.isPending && !!qrId)}
         onOpenChange={() => {
           setAlertOpen((prev) => !prev);
-          setLastMessage(null);
         }}
       >
         <AlertDialogContent