chore: migrate to reducer pattern instead of useState

client/src/components/ChatProvider.tsx

@@ -1,20 +1,26 @@
-import React from "react";
+import React, { useReducer } from "react";
 import { ChatMessage, User } from "../../../shared";
 import { ChatContext } from "../contexts/ChatContext";
+import { chatReducer } from "../reducers/chatReducers";
 
 export function ChatProvider({ children }: { children: React.ReactNode }) {
-  const [messages, setMessages] = React.useState<ChatMessage[]>([]);
-  const [currentUser, setCurrentUser] = React.useState<User | null>(null);
+  const [state, dispatch] = useReducer(chatReducer, {
+    messages: [],
+    currentUser: null,
+    isConnected: false,
+  });
 
-  const addMessage = (message: ChatMessage) => {
-    setMessages((prev) => [...prev, message]);
+  const value = {
+    state,
+    dispatch,
+    actions: {
+      addMessage: (message: ChatMessage) =>
+        dispatch({ type: "ADD_MESSAGE", payload: message }),
+      setUser: (user: User) => dispatch({ type: "SET_USER", payload: user }),
+      setConnected: (isConnected: boolean) =>
+        dispatch({ type: "SET_CONNECTED", payload: isConnected }),
+    },
   };
 
-  return (
-    <ChatContext.Provider
-      value={{ messages, currentUser, addMessage, setCurrentUser }}
-    >
-      {children}
-    </ChatContext.Provider>
-  );
+  return <ChatContext.Provider value={value}>{children}</ChatContext.Provider>;
 }