diff --git a/client/src/store/NodeListProvider.tsx b/client/src/store/NodeListProvider.tsx index 509ac7e..d6cd7d7 100644 --- a/client/src/store/NodeListProvider.tsx +++ b/client/src/store/NodeListProvider.tsx @@ -56,50 +56,52 @@ export default function NodeListProvider({ children }: { children: ReactNode }) const handleSocketEvent = useConnectionStore((state) => state.handleSocketEvent); useEffect(() => { - socket?.on("joinRoom", (initialData) => { - updateLoadingStatus({ type: "socketLoading", status: true }); - setTimeout(() => { - setData({ ...initialData.nodeData }); - overrideHistory(JSON.stringify(initialData.nodeData)); - initializeTitle(initialData); - initializeContent(initialData); - initializeAiCount(initialData); - updateLoadingStatus({ type: "socketLoading", status: false }); - }, 0); - }); - - socket?.on("updateNode", (updatedNodeData) => { - overrideNodeData(updatedNodeData); - }); - - socket?.on("updateTitle", (updatedTitle) => { - updateTitle(updatedTitle.title); - }); - - socket?.on("updateContent", (updatedContent) => { - updateContent(updatedContent.content); - }); - - socket?.on("disconnect", () => { - setData({}); - overrideHistory(JSON.stringify({})); - }); - - socket?.on("aiPending", (response) => { - updateLoadingStatus({ type: "aiPending", status: response.status }); - }); + if (!socket) return; + + const eventHandlers = { + joinRoom: (initialData) => { + updateLoadingStatus({ type: "socketLoading", status: true }); + setTimeout(() => { + setData({ ...initialData.nodeData }); + overrideHistory(JSON.stringify(initialData.nodeData)); + initializeTitle(initialData); + initializeContent(initialData); + initializeAiCount(initialData); + updateLoadingStatus({ type: "socketLoading", status: false }); + }, 0); + }, + disconnect: () => { + setData({}); + overrideHistory(JSON.stringify({})); + }, + aiPending: (response) => { + updateLoadingStatus({ type: "aiPending", status: response.status }); + }, + aiResponse: (response) => { + decreaseAiCount(); + const initializedNodes = initializeNodePosition(response); + handleSocketEvent({ + actionType: "updateNode", + payload: initializedNodes, + callback: (response) => { + overrideNodeData(response); + overrideHistory(JSON.stringify(response)); + }, + }); + }, + updateNode: (updatedNodeData) => { + setData(updatedNodeData); + }, + updateTitle: (updatedTitle) => { + updateTitle(updatedTitle.title); + }, + updateContent: (updatedContent) => { + updateContent(updatedContent.content); + }, + }; - socket?.on("aiResponse", (response) => { - decreaseAiCount(); - const initializedNodes = initializeNodePosition(response); - handleSocketEvent({ - actionType: "updateNode", - payload: initializedNodes, - callback: (response) => { - overrideNodeData(response); - overrideHistory(JSON.stringify(response)); - }, - }); + Object.entries(eventHandlers).forEach(([event, handler]) => { + socket.on(event, handler); }); return () => { diff --git a/client/src/store/createSocketSlice.ts b/client/src/store/createSocketSlice.ts index 62f57ea..d745f87 100644 --- a/client/src/store/createSocketSlice.ts +++ b/client/src/store/createSocketSlice.ts @@ -87,14 +87,13 @@ export const createSocketSlice: StateCreator { const socket = get().socket; if (!socket) return; - - socket.off(actionType); - socket.emit(actionType, payload); - - socket.on(actionType, (response) => { + const handler = (response) => { if (response && callback) callback(response); set({ currentJobStatus: "success" }); - }); + socket.off(actionType, handler); + }; + socket.on(actionType, handler); + socket.emit(actionType, payload); }, handleConnection: async () => {