diff --git a/src/App.tsx b/src/App.tsx index e2ac1db..9390db3 100644 --- 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(); const [sessionOwnerId, setSessionOwnerId] = useState(); @@ -22,7 +37,8 @@ export const App: React.FC = () => { Record >({}); let clientToAddOnSessionCreation: string | undefined; - const [sessionMessages, setSessionMessages] = useState([]); + const prevSavedSessionMessages = getSessionStorageJSONArray(SESSION_MESSAGES_KEY, []); + const [sessionMessages, setSessionMessages] = useState(prevSavedSessionMessages); // State used to navigate to route via a server sent event (not user link click) const [changeToRoute, setChangeToRoute] = useState(); @@ -30,18 +46,16 @@ export const App: React.FC = () => { 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 index 70d3bc2..8cbb6c9 100644 --- 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); }