Save messages to session storage

michaelclapham · Sep 21, 2024 · 5a48a1a · 5a48a1a
1 parent 1567a09
commit 5a48a1a
Show file tree

Hide file tree

Showing 2 changed files with 39 additions and 13 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -14,6 +14,21 @@ import { SessionMessage, mapSessionMsg } from "./feature/session/SessionMessage"
 let wsUrl = "ws://localhost:4010/api/v1/ws";
 const wsClient = new WSClient(wsUrl);
 
+const SESSION_MESSAGES_KEY = "sessionMessages";
+
+function getSessionStorageJSONArray(key: string, defValue: any[]): any[] {
+  const item = sessionStorage.getItem(key);
+  try {
+    if (item != null) {
+      return JSON.parse(item)
+    } else {
+      return defValue;
+    }
+  } catch (ex) {
+    return defValue;
+  }
+}
+
 export const App: React.FC = () => {
   const [ourClientId, setOurClientId] = useState<string>();
   const [sessionOwnerId, setSessionOwnerId] = useState<string>();
@@ -22,26 +37,25 @@ export const App: React.FC = () => {
     Record<string, ServerTypes.Client>
   >({});
   let clientToAddOnSessionCreation: string | undefined;
-  const [sessionMessages, setSessionMessages] = useState<SessionMessage[]>([]);
+  const prevSavedSessionMessages = getSessionStorageJSONArray(SESSION_MESSAGES_KEY, []);
+  const [sessionMessages, setSessionMessages] = useState<SessionMessage[]>(prevSavedSessionMessages);
 
   // State used to navigate to route via a server sent event (not user link click)
   const [changeToRoute, setChangeToRoute] = useState<string | undefined>();
 
   const onClientJoinedSessionMsg = (
     msg: ServerTypes.ClientJoinedSessionMsg
   ) => {
-    if (msg.clientId === ourClientId) {
-      setSessionId(msg.sessionId);
-      setSessionOwnerId(msg.sessionOwnerId);
-      setClientMap(msg.clientMap);
-      setChangeToRoute("/session");
-      if (clientToAddOnSessionCreation) {
-        wsClient.sendMessage({
-          type: "AddClientToSession",
-          sessionId: msg.sessionId,
-          addClientId: clientToAddOnSessionCreation
-        });
-      }
+    setSessionId(msg.sessionId);
+    setSessionOwnerId(msg.sessionOwnerId);
+    setClientMap(msg.clientMap);
+    setChangeToRoute("/session");
+    if (clientToAddOnSessionCreation) {
+      wsClient.sendMessage({
+        type: "AddClientToSession",
+        sessionId: msg.sessionId,
+        addClientId: clientToAddOnSessionCreation
+      });
     }
   };
 
@@ -65,6 +79,9 @@ export const App: React.FC = () => {
   };
 
   wsClient.addMessageHandler("main", onReceiveWebsocketMsg);
+  wsClient.addDisconnectHandler(() => {
+    sessionStorage.removeItem(SESSION_MESSAGES_KEY);
+  });
 
   const onScanClient = (clientId: string | null) => {
     if (clientId) {
@@ -90,6 +107,9 @@ export const App: React.FC = () => {
     const newMsg = mapSessionMsg(serverMsg);
     const newMsgs = sessionMessages.concat([newMsg]);
     setSessionMessages(newMsgs);
+
+    // Save session messages to session storage
+    sessionStorage.setItem(SESSION_MESSAGES_KEY, JSON.stringify(newMsgs));
   };
 
   const onLeaveSession = () => {

diff --git a/src/WSClient.ts b/src/WSClient.ts
@@ -8,6 +8,7 @@ export class WSClient {
     allMessages: ServerTypes.Msg[] = [];
     public clientId: string | null = null;
     clientName: string = "";
+    disconnectHandler: () => void = () => {};
 
     constructor(private url: string) {
         console.log("WSClient being created");
@@ -32,6 +33,10 @@ export class WSClient {
         this.messageHandlerMap[id] = handler;
     }
 
+    public addDisconnectHandler(callback: () => void) { 
+        this.disconnectHandler = callback;
+    }
+
     public sendMessage(msg: ServerTypes.Msg) {
         if (this.ws && this.ws.readyState === this.ws.OPEN) {
             console.log("Sending message", msg);
@@ -58,6 +63,7 @@ export class WSClient {
         this.ws.close();
         localStorage.removeItem("prevSessionId");
         localStorage.removeItem("prevClientId");
+        this.disconnectHandler();
         this.connect(this.url);
     }