Show received messages in history card

src/App.tsx

@@ -8,6 +8,7 @@ import { WSClient } from "./WSClient";
 import { ServerTypes } from "./ServerTypes";
 import { SessionPage } from "./feature/session/SessionPage";
 import { NavigateOnStateChange } from "./NavigateOnStateChange";
+import { SessionMessage, mapSessionMsg } from "./feature/session/SessionMessage";
 
 export const App: React.FC = () => {
   let wsUrl = "wss://qrsync.org/api/v1/ws";
@@ -19,6 +20,8 @@ export const App: React.FC = () => {
   const [clientMap, setClientMap] = useState<
     Record<string, ServerTypes.Client>
   >({});
+  const [sessionMessages, setSessionMessages] = useState<SessionMessage[]>([]);
+
   // State used to navigate to route via a server sent event (not user link click)
   const [changeToRoute, setChangeToRoute] = useState<string | undefined>();
 
@@ -73,8 +76,12 @@ export const App: React.FC = () => {
   };
 
   const onBroadcastFromSessionMsg = (
-    msg: ServerTypes.BroadcastFromSessionMsg
-  ) => {};
+    serverMsg: ServerTypes.BroadcastFromSessionMsg
+  ) => {
+    const newMsg = mapSessionMsg(serverMsg);
+    const newMsgs = sessionMessages.concat([newMsg]);
+    setSessionMessages(newMsgs);
+  };
 
   const onLeaveSession = () => {
     wsClient.leaveSession();
@@ -99,6 +106,7 @@ export const App: React.FC = () => {
           </Route>
           <Route path="/session">
             <SessionPage
+              sessionMessages={sessionMessages}
               wsClient={wsClient}
               sessionId={sessionId}
               clientMap={clientMap}

src/feature/history/HistoryCard.tsx

@@ -1,13 +1,34 @@
-import { IonCard, IonCardHeader, IonCardTitle, IonCardContent } from "@ionic/react";
+import { IonCard, IonCardHeader, IonCardTitle, IonCardContent, IonItem } from "@ionic/react";
 import React from "react";
+import { SessionMessage } from "../session/SessionMessage";
 
-export const HistoryCard: React.FC<{}> = () => {
+export type HistoryCardProps = {
+    messages: SessionMessage[];
+}
+
+export const HistoryCard: React.FC<HistoryCardProps> = ({messages}) => {
   return <IonCard>
     <IonCardHeader>
       <IonCardTitle>History</IonCardTitle>
     </IonCardHeader>
     <IonCardContent>
-      <p>Shared content will show up here .</p>
+        { messages.length === 0 ? <NoMessages/> :
+        messages.map(msg => <Message msg={msg} />) }
     </IonCardContent>
   </IonCard>;
 };
+
+type MessageProps = {
+    msg: SessionMessage;
+}
+
+const Message: React.FC<MessageProps> = ({msg}) => {
+    return <IonItem>
+        <b>{msg.senderName}: </b>
+        {msg.text}
+    </IonItem>
+}
+
+const NoMessages: React.FC = () => {
+    return <div>Shared content will show up here.</div>
+}

src/feature/session/SessionMessage.ts

@@ -1,12 +1,28 @@
-export type SessionMessageType = "TEXT_MESSAGE" | "FILE" | "OPEN_WEBSITE";
+import { ServerTypes } from "../../ServerTypes";
+
+export const sessionMessageTypes = ["TEXT_MESSAGE", "FILE", "OPEN_WEBSITE"] as const;
+export type SessionMessageType = typeof sessionMessageTypes[number];
 
 export interface SessionMessage {
-    type: SessionMessageType;
+    type?: SessionMessageType;
     senderId: string;
     senderName: string;
-    text: string;
+    text?: string;
 }
 
 export interface OpenWebsiteSessionMessage extends SessionMessage {
     type: "OPEN_WEBSITE"
+}
+
+export function mapSessionMsg(serverMsg: ServerTypes.BroadcastFromSessionMsg): SessionMessage {
+    let sessionMsgType = serverMsg.payload["type"] as SessionMessageType | undefined;
+    if (sessionMessageTypes.indexOf(sessionMsgType as SessionMessageType) < 0) {
+        sessionMsgType = undefined;
+    }
+    return {
+        type: sessionMsgType,
+        senderId: serverMsg.senderId,
+        senderName: serverMsg.payload["senderName"] ?? "",
+        text: serverMsg.payload["text"] ?? ""
+    };
 }

src/feature/session/SessionPage.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from "react";
+import React from "react";
 import { ServerTypes } from "../../ServerTypes";
 import {
   IonButton,
@@ -9,12 +9,13 @@ import {
   IonToolbar,
 } from "@ionic/react";
 import { WSClient } from "../../WSClient";
-import { SessionMessage } from "./SessionMessage";
 import { ClientsCard } from "../clients/ClientsCard";
 import { HistoryCard } from "../history/HistoryCard";
 import { ShareCard } from "../share/ShareCard";
+import { SessionMessage } from "./SessionMessage";
 
 export interface SessionPageProps {
+  sessionMessages: SessionMessage[];
   sessionId: string | undefined;
   sessionOwnerId: string | undefined;
   clientMap: Record<string, ServerTypes.Client>;
@@ -23,38 +24,13 @@ export interface SessionPageProps {
 }
 
 export const SessionPage: React.FC<SessionPageProps> = ({
+  sessionMessages,
   sessionId,
   sessionOwnerId,
   clientMap,
   wsClient,
   onLeaveSession,
 }) => {
-  const [sessionMessages, setSessionMessages] = useState<SessionMessage[]>([]);
-
-  useEffect(() => {
-    wsClient.addMessageHandler('session_page', onWebsocketMessage);
-  }, [wsClient]);
-
-  const onWebsocketMessage = (msg: ServerTypes.Msg) => {
-    if (msg.type === "BroadcastFromSession") {
-      let payload: SessionMessage = msg.payload;
-      if (payload.type && payload.text) {
-        let sessionMsgs: SessionMessage[] = [];
-        if (sessionMessages) {
-          sessionMsgs = sessionMessages;
-        }
-        sessionMsgs.push(payload);
-        setSessionMessages(sessionMsgs);
-      }
-      if (msg.senderId !== wsClient.getId()) {
-        if (payload.type === "OPEN_WEBSITE") {
-          console.log("Opening url ", payload.text);
-          window.open(payload.text, "_blank");
-        }
-      }
-    }
-  };
-
   return (
     <IonPage>
       <IonHeader>
@@ -70,8 +46,9 @@ export const SessionPage: React.FC<SessionPageProps> = ({
             /* TODO: Implement opening add client modal */
           }}
         />
-        {/* TODO: Show received messages in history card */}
-        <HistoryCard></HistoryCard>
+        <HistoryCard
+          messages={sessionMessages}
+        ></HistoryCard>
         <ShareCard wsClient={wsClient} sessionOwnerId={sessionOwnerId} />
         <IonButton onClick={onLeaveSession}>Leave Session with id: {sessionId}</IonButton>
       </IonContent>