Move sending of messages to top level.

Refactor sharing actions UI.

src/App.tsx

@@ -89,6 +89,19 @@ export const App: React.FC = () => {
     setChangeToRoute("/index.html");
   };
 
+  const onShare = (msg: SessionMessage) => {
+    let msgWithSender: SessionMessage = {
+      ...msg,
+      senderId: wsClient.getId() ?? "",
+      senderName: wsClient.getName(),
+    }
+    let serverMsg: ServerTypes.BroadcastToSessionMsg = {
+      type: "BroadcastToSession",
+      payload: msgWithSender
+    };
+    wsClient.sendMessage(serverMsg);
+  }
+
   return (
     <IonApp>
       <IonReactRouter>
@@ -107,10 +120,11 @@ export const App: React.FC = () => {
           <Route path="/session">
             <SessionPage
               sessionMessages={sessionMessages}
-              wsClient={wsClient}
+              userIsSessionOwner={wsClient.getId() === sessionOwnerId}
               sessionId={sessionId}
               clientMap={clientMap}
               sessionOwnerId={sessionOwnerId}
+              onShare={onShare}
               onLeaveSession={onLeaveSession}
             ></SessionPage>
           </Route>

src/feature/history/HistoryCard.tsx

@@ -13,7 +13,7 @@ export const HistoryCard: React.FC<HistoryCardProps> = ({messages}) => {
     </IonCardHeader>
     <IonCardContent>
         { messages.length === 0 ? <NoMessages/> :
-        messages.map(msg => <Message msg={msg} />) }
+        messages.map(msg => <Message key={msg.uuid ?? "" + Math.random()} msg={msg} />) }
     </IonCardContent>
   </IonCard>;
 };
@@ -24,7 +24,7 @@ type MessageProps = {
 
 const Message: React.FC<MessageProps> = ({msg}) => {
     return <IonItem>
-        <b>{msg.senderName}: </b>
+        <b>{msg.senderName}:</b>
         {msg.text}
     </IonItem>
 }

src/feature/session/SessionMessage.ts

@@ -4,9 +4,10 @@ export const sessionMessageTypes = ["TEXT_MESSAGE", "FILE", "OPEN_WEBSITE"] as c
 export type SessionMessageType = typeof sessionMessageTypes[number];
 
 export interface SessionMessage {
+    uuid?: string;
     type?: SessionMessageType;
-    senderId: string;
-    senderName: string;
+    senderId?: string;
+    senderName?: string;
     text?: string;
 }
 
@@ -20,6 +21,7 @@ export function mapSessionMsg(serverMsg: ServerTypes.BroadcastFromSessionMsg): S
         sessionMsgType = undefined;
     }
     return {
+        uuid: ("" + Math.random() + "-" + Math.random()).replace(".", "0"),
         type: sessionMsgType,
         senderId: serverMsg.senderId,
         senderName: serverMsg.payload["senderName"] ?? "",

src/feature/session/SessionPage.tsx

@@ -8,7 +8,6 @@ import {
   IonTitle,
   IonToolbar,
 } from "@ionic/react";
-import { WSClient } from "../../WSClient";
 import { ClientsCard } from "../clients/ClientsCard";
 import { HistoryCard } from "../history/HistoryCard";
 import { ShareCard } from "../share/ShareCard";
@@ -19,7 +18,8 @@ export interface SessionPageProps {
   sessionId: string | undefined;
   sessionOwnerId: string | undefined;
   clientMap: Record<string, ServerTypes.Client>;
-  wsClient: WSClient;
+  userIsSessionOwner: boolean;
+  onShare: (msg: SessionMessage) => void;
   onLeaveSession: () => any;
 }
 
@@ -28,7 +28,8 @@ export const SessionPage: React.FC<SessionPageProps> = ({
   sessionId,
   sessionOwnerId,
   clientMap,
-  wsClient,
+  userIsSessionOwner,
+  onShare,
   onLeaveSession,
 }) => {
   return (
@@ -49,7 +50,7 @@ export const SessionPage: React.FC<SessionPageProps> = ({
         <HistoryCard
           messages={sessionMessages}
         ></HistoryCard>
-        <ShareCard wsClient={wsClient} sessionOwnerId={sessionOwnerId} />
+        <ShareCard onShare={onShare} userIsSessionOwner={userIsSessionOwner}/>
         <IonButton onClick={onLeaveSession}>Leave Session with id: {sessionId}</IonButton>
       </IonContent>
     </IonPage>

src/feature/share/ShareCard.tsx

@@ -1,25 +1,32 @@
-import { IonCard, IonCardHeader, IonCardTitle, IonCardContent } from "@ionic/react";
-import React from "react";
-import { SessionActionsList } from "../session-actions/SessionActionsList";
-import { WSClient } from "../../WSClient";
+import { IonCard, IonCardHeader, IonCardTitle, IonCardContent, IonButton, IonModal } from "@ionic/react";
+import React, { useState } from "react";
+import { SessionMessage, SessionMessageType } from "../session/SessionMessage";
+import { ShareModal } from "./share-actions/ShareModal";
 
 export type ShareCardProps = {
-    wsClient: WSClient;
-    sessionOwnerId?: string;
+    onShare: (msg: SessionMessage) => void;
+    userIsSessionOwner?: boolean;
 }
 
-export const ShareCard: React.FC<ShareCardProps> = ({wsClient, sessionOwnerId}) => {
-  return <IonCard>
-    <IonCardHeader>
-      <IonCardTitle>Share</IonCardTitle>
-    </IonCardHeader>
-    <IonCardContent>
-      <SessionActionsList
-        wsClient={wsClient}
-        userIsSessionOwner={
-          sessionOwnerId === wsClient.getId()
-        }
-      ></SessionActionsList>
-    </IonCardContent>
-  </IonCard>;
-};
+export const ShareCard: React.FC<ShareCardProps> = ({onShare, userIsSessionOwner}) => {
+    const [shareModalTypeOpen, setShareModalTypeOpen] = useState<SessionMessageType | null>(null);
+
+    return <IonCard>
+        <IonCardHeader>
+            <IonCardTitle>Share</IonCardTitle>
+        </IonCardHeader>
+        <IonCardContent>
+            {/* Send text message */}
+            <IonButton
+                onClick={() => setShareModalTypeOpen("TEXT_MESSAGE")}
+            >Send Message</IonButton>
+        </IonCardContent>
+        <IonModal isOpen={shareModalTypeOpen != null} onDidDismiss={() => setShareModalTypeOpen(null)}>
+            <ShareModal
+                type={shareModalTypeOpen} 
+                onShare={onShare} 
+                closeModal={() => setShareModalTypeOpen(null)}
+            />
+        </IonModal>
+    </IonCard>;
+};

src/feature/share/share-actions/SendMessageModal.tsx

@@ -0,0 +1,34 @@
+import { IonButton, IonInput } from "@ionic/react";
+import React, { useState } from "react";
+import { ShareModalProps } from "./ShareModal";
+import { SessionMessage } from "../../session/SessionMessage";
+
+export const SendMessageModal: React.FC<ShareModalProps> = ({
+  onShare,
+  closeModal,
+}) => {
+
+  const [text, setText] = useState("");
+
+  const sendClick = () => {
+    let sessionMsg: SessionMessage = {
+      type: "TEXT_MESSAGE",
+      text: text,
+    };
+    onShare(sessionMsg);
+    closeModal();
+  };
+
+  return (
+      <div style={{display: "flex", flexDirection: "column"}}>
+        <h1>Send message</h1>
+        <p>Send message to all clients in this session.</p>
+        <IonInput
+          value={text}
+          placeholder="Enter message to send"
+          onIonChange={(e) => setText(e.detail.value!)}
+        ></IonInput>
+        <IonButton onClick={() => sendClick()}>Send</IonButton>
+      </div>
+    );
+}

src/feature/share/share-actions/ShareModal.tsx

@@ -0,0 +1,20 @@
+import React from "react";
+import { SessionMessage, SessionMessageType } from "../../session/SessionMessage";
+import { SendMessageModal } from "./SendMessageModal";
+
+export type ShareModalProps = {
+    type: SessionMessageType | null;
+    onShare: (msg: SessionMessage) => void;
+    closeModal: () => any;
+};
+
+export const ShareModal: React.FC<ShareModalProps> = ({type, onShare, closeModal}) => {
+    switch(type) {
+        case "TEXT_MESSAGE": return <SendMessageModal
+            type="TEXT_MESSAGE"
+            onShare={onShare}
+            closeModal={closeModal}
+        />
+        default: return null;
+    }
+}