Merge pull request #194 from Game-as-a-Service/fix/remove-chatroom-co…

…ntext 👁️ refactor: remove chatroom context
Game-as-a-Service · Jun 25, 2023 · db4976e · db4976e
2 parents c718efc + 4fc2044
commit db4976e
Show file tree

Hide file tree

Showing 7 changed files with 17 additions and 53 deletions.
diff --git a/components/rooms/RoomChatroom/RoomChatroom.tsx b/components/rooms/RoomChatroom/RoomChatroom.tsx
@@ -2,7 +2,7 @@ import { useState, ChangeEvent, KeyboardEvent, useRef, useEffect } from "react";
 import Button from "@/components/shared/Button";
 import ChatMessage from "./ChatMessage";
 import { MessageType } from ".";
-import useChatroom from "@/hooks/context/useChatroom";
+import useChatroom from "@/hooks/useChatroom";
 
 export type RoomChatroom = {
   roomId: string;

diff --git a/contexts/ChatroomContext.tsx b/contexts/ChatroomContext.tsx
diff --git a/hooks/context/useChatroom.ts b/hooks/context/useChatroom.ts
diff --git a/containers/provider/ChatroomProvider.tsx → hooks/useChatroom.ts b/containers/provider/ChatroomProvider.tsx → hooks/useChatroom.ts
@@ -1,15 +1,7 @@
-import ChatroomContext from "@/contexts/ChatroomContext";
-import {
-  PropsWithChildren,
-  useCallback,
-  useEffect,
-  useRef,
-  useState,
-} from "react";
-import { MessageType } from "@/components/rooms/RoomChatroom";
+import { useCallback, useEffect, useRef, useState } from "react";
 import useAuth from "@/hooks/context/useAuth";
-
-export type ChatroomContextType = ReturnType<typeof useChatroomCore>;
+import { MessageType } from "@/components/rooms/RoomChatroom";
+import { Env, getEnv } from "@/lib/env";
 
 export enum SOCKET_EVENT {
   CONNECTION_OPEN = "CONNECTION_OPEN",
@@ -30,7 +22,7 @@ export type Socket_DispatchActionType = {
   payload: Record<string, any>;
 };
 
-function useChatroomCore() {
+function useChatroom() {
   const { currentUser } = useAuth();
   const webSocket = useRef<WebSocket | null>(null);
   const [lastMessage, setLastMessage] = useState<MessageType | undefined>(
@@ -44,12 +36,17 @@ function useChatroomCore() {
    * @param {any} action.payload - The payload of the socket event.
    */
   function dispatchSocketEvent(action: Socket_DispatchActionType): void {
-    webSocket.current?.send(JSON.stringify(action));
+    // ChatGPT said to webSocket.current could be null when the page rendered and caused the error
+    if (webSocket.current && webSocket.current.readyState === WebSocket.OPEN) {
+      webSocket.current.send(JSON.stringify(action));
+    }
   }
 
   // TODO delete the next useEffect: this is only for mock socket server
   useEffect(() => {
-    fetch("/api/internal/socket");
+    if (getEnv().env === Env.DEV) {
+      fetch("/api/internal/socket");
+    }
   }, []);
 
   useEffect(() => {
@@ -65,7 +62,7 @@ function useChatroomCore() {
 
     const ws = webSocket.current;
 
-    // trigger when connected, notify server to regist user
+    // trigger when connected, notify server to register user
     ws.onopen = () => {
       setReadyState(1);
       dispatchSocketEvent({
@@ -82,7 +79,7 @@ function useChatroomCore() {
       }
     };
 
-    // trigger when server shotdown
+    // trigger when server shutdown
     ws.onclose = () => {
       setReadyState(2);
       setLastMessage({
@@ -167,13 +164,4 @@ function useChatroomCore() {
   };
 }
 
-export default function ChatroomContextProvider({
-  children,
-}: PropsWithChildren) {
-  const contextValue = useChatroomCore();
-  return (
-    <ChatroomContext.Provider value={contextValue}>
-      {children}
-    </ChatroomContext.Provider>
-  );
-}
+export default useChatroom;
diff --git a/pages/_app.tsx b/pages/_app.tsx
@@ -14,7 +14,6 @@ import ApiHistoryProvider from "@/containers/provider/ApiHistoryProvider";
 import ApiHistoryList from "@/components/util/api-history/ApiHistoryList";
 import { Env, getEnv } from "@/lib/env";
 import { ToastQueueProvider } from "@/components/shared/Toast";
-import ChatroomContextProvider from "@/containers/provider/ChatroomProvider";
 
 export type NextPageWithProps<P = unknown, IP = P> = NextPage<P, IP> & {
   getLayout?: (page: ReactElement) => ReactNode;
@@ -48,14 +47,12 @@ export default function App({ Component, pageProps }: AppWithProps) {
       <ModalManager.Provider>
         <AxiosProvider>
           <AuthProvider>
-            <ChatroomContextProvider>
             {getHistory(
               <Startup isAnonymous={isAnonymous}>
                 {getLayout(<Component {...pageProps} />)}
                 {!isProduction && <ApiHistoryList />}
               </Startup>
             )}
-            </ChatroomContextProvider>
           </AuthProvider>
         </AxiosProvider>
       </ModalManager.Provider>

diff --git a/pages/api/mock/socket.ts b/pages/api/mock/socket.ts
@@ -1,6 +1,6 @@
 import type { NextApiRequest, NextApiResponse } from "next";
 import { WebSocket, WebSocketServer } from "ws";
-import { Socket_DispatchActionType } from "@/containers/provider/ChatroomProvider";
+import { Socket_DispatchActionType } from "@/hooks/useChatroom";
 
 import { MessageType } from "@/components/rooms/RoomChatroom";
 

diff --git a/pages/rooms/[roomId]/index.tsx b/pages/rooms/[roomId]/index.tsx
@@ -26,6 +26,7 @@ export default function Room() {
     // toggleUserReadyStatus,
     cleanUpRoom,
   } = useRoom();
+
   const { currentUser } = useAuth();
   const { Popup, firePopup } = usePopup();
   const { fetch } = useRequest();