Deal with string payloads and add to session as seperate message

src/App.tsx

@@ -11,15 +11,16 @@ import { NavigateOnStateChange } from "./NavigateOnStateChange";
 import { SessionMessage, mapSessionMsg } from "./feature/session/SessionMessage";
 
 export const App: React.FC = () => {
-  let wsUrl = "wss://qrsync.org/api/v1/ws";
-  // let wsUrl = "ws://localhost:4010/api/v1/ws";
+  // let wsUrl = "wss://qrsync.org/api/v1/ws";
+  let wsUrl = "ws://localhost:4010/api/v1/ws";
   const [wsClient] = useState<WSClient>(new WSClient(wsUrl));
   const [ourClientId, setOurClientId] = useState<string>();
   const [sessionOwnerId, setSessionOwnerId] = useState<string>();
   const [sessionId, setSessionId] = useState<string>();
   const [clientMap, setClientMap] = useState<
     Record<string, ServerTypes.Client>
   >({});
+  let clientToAddOnSessionCreation: string | undefined;
   const [sessionMessages, setSessionMessages] = useState<SessionMessage[]>([]);
 
   // State used to navigate to route via a server sent event (not user link click)
@@ -33,6 +34,13 @@ export const App: React.FC = () => {
       setSessionOwnerId(msg.sessionOwnerId);
       setClientMap(msg.clientMap);
       setChangeToRoute("/session");
+      if (clientToAddOnSessionCreation) {
+        wsClient.sendMessage({
+          type: "AddClientToSession",
+          sessionId: msg.sessionId,
+          addClientId: clientToAddOnSessionCreation
+        });
+      }
     }
   };
 
@@ -63,8 +71,8 @@ export const App: React.FC = () => {
       if (!sessionId) {
         wsClient.sendMessage({
           type: "CreateSession",
-          addClientId: clientId,
         });
+        clientToAddOnSessionCreation = clientId;
       } else {
         wsClient.sendMessage({
           type: "AddClientToSession",
@@ -97,7 +105,7 @@ export const App: React.FC = () => {
     }
     let serverMsg: ServerTypes.BroadcastToSessionMsg = {
       type: "BroadcastToSession",
-      payload: msgWithSender
+      payload: JSON.stringify(msgWithSender)
     };
     wsClient.sendMessage(serverMsg);
   }

src/ServerTypes.ts

@@ -1,9 +1,12 @@
 export namespace ServerTypes {
     export type Msg = ClientConnectMsg | CreateSessionMsg | UpdateClientMsg | AddClientToSessionMsg | ClientJoinedSessionMsg | ClientLeftSessionMsg | BroadcastToSessionMsg | BroadcastFromSessionMsg | ErrorMsg | InfoMsg
 
+    export type Time = string; // Go times are serialised to strings
+
     export interface Client {
         id: string;
         name: string;
+        lastJoinTime: Time;
     }
     export interface Session {
         id: string;
@@ -16,7 +19,6 @@ export namespace ServerTypes {
     }
     export interface CreateSessionMsg {
         type: "CreateSession";
-        addClientId: string;
     }
     export interface UpdateClientMsg {
         type: "UpdateClient";
@@ -32,24 +34,24 @@ export namespace ServerTypes {
         clientId: string;
         sessionId: string;
         sessionOwnerId: string;
-        clientMap: { [key: string]: Client };
+        clientMap: {[key: string]: Client};
     }
     export interface ClientLeftSessionMsg {
         type: "ClientLeftSession";
         clientId: string;
         sessionId: string;
         sessionOwnerId: string;
-        clientMap: { [key: string]: Client };
+        clientMap: {[key: string]: Client};
     }
     export interface BroadcastToSessionMsg {
         type: "BroadcastToSession";
-        payload: any;
+        payload: string;
     }
     export interface BroadcastFromSessionMsg {
         type: "BroadcastFromSession";
         fromSessionOwner: boolean;
         senderId: string;
-        payload: any;
+        payload: string;
     }
     export interface ErrorMsg {
         type: "Error";

src/feature/session/SessionMessage.ts

@@ -16,15 +16,16 @@ export interface OpenWebsiteSessionMessage extends SessionMessage {
 }
 
 export function mapSessionMsg(serverMsg: ServerTypes.BroadcastFromSessionMsg): SessionMessage {
-    let sessionMsgType = serverMsg.payload["type"] as SessionMessageType | undefined;
+    const payload = JSON.parse(serverMsg.payload);
+    let sessionMsgType = payload["type"] as SessionMessageType | undefined;
     if (sessionMessageTypes.indexOf(sessionMsgType as SessionMessageType) < 0) {
         sessionMsgType = undefined;
     }
     return {
         uuid: ("" + Math.random() + "-" + Math.random()).replace(".", "0"),
         type: sessionMsgType,
         senderId: serverMsg.senderId,
-        senderName: serverMsg.payload["senderName"] ?? "",
-        text: serverMsg.payload["text"] ?? ""
+        senderName: payload["senderName"] ?? "",
+        text: payload["text"] ?? ""
     };
 }