feature: add partnerGone state to persist chats

Suyious · Sep 24, 2024 · a829ac5 · a829ac5
1 parent ea36c33
commit a829ac5
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 3 deletions.
diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -7,10 +7,11 @@ import WaitingForChat from "@/components/sections/WaitingForChat";
 import { useChatSocket } from "@/hooks/useChatSocket";
 
 export default function Home() {
- 
+
   const {
     user,
     partner,
+    partnerGone,
     messages,
     isConnected,
     isWaiting,
@@ -33,11 +34,18 @@ export default function Home() {
       if (!isWaiting) {
         if (!partner) { // if user hasn't allowed to find matches
           content = <StartChatting name={user} onConnect={findPartner} />;
+
+          if (partnerGone) {  // if the partner left, show the chat history
+            content = <Chat partner={""} partnerGone={partnerGone}
+              onMessage={sendMessage} messages={messages}
+              onStop={disconnect} onReconnect={findPartner}
+              readIndex={readIndex} readMessage={readMessage} />;
+          }
         } else { // if matches found
-          content = <Chat partner={partner}
+          content = <Chat partner={partner} partnerGone={partnerGone}
                           onMessage={sendMessage} messages={messages}
                           onStop={disconnect} onReconnect={findPartner}
-                          readIndex={readIndex} readMessage={readMessage}/>;
+                          readIndex={readIndex} readMessage={readMessage} />;
         }
       } else { // if user is waiting for a partner
         content = <WaitingForChat />;

diff --git a/src/hooks/useChatSocket.tsx b/src/hooks/useChatSocket.tsx
@@ -11,6 +11,7 @@ export const useChatSocket = () => {
     const [socket, setSocket] = useState<Socket<ServerToClientEvents, ClientToServerEvents> | null>(null);
     const [user, setUser] = useState<string | null>(null);
     const [partner, setPartner] = useState<string | null>(null);
+    const [partnerGone, setPartnerGone] = useState(false);
     const [isConnected, setIsConnected] = useState(false);
     const [isWaiting, setIsWaiting] = useState(false);
     const [messages, setMessages] = useState<Message[]>([]);
@@ -29,6 +30,7 @@ export const useChatSocket = () => {
             setIsConnected(false);
             setUser(null);
             setPartner(null);
+            setPartnerGone(false);
             setIsWaiting(false);
             console.log('Disconnected from server');
         });
@@ -40,6 +42,7 @@ export const useChatSocket = () => {
 
         newSocket.on(ServerEvents.MATCHED, ({ partnerName }) => {
             setPartner(partnerName);
+            setPartnerGone(false);
             setIsWaiting(false);
             console.log("Matched with a Partner");
             setMessages([]);
@@ -55,6 +58,7 @@ export const useChatSocket = () => {
 
         newSocket.on(ServerEvents.PARTNER_DISCONNECTED, () => {
             setPartner(null);
+            setPartnerGone(true);
         })
 
         return () => {
@@ -95,6 +99,7 @@ export const useChatSocket = () => {
     return {
         user,
         partner,
+        partnerGone,
         messages,
         isConnected,
         isWaiting,