Merge pull request #34 from michaelclapham/improve-session-page1

Refactor + Improve session page

src/App.css

@@ -1,8 +1,5 @@
 body {
   --ion-color-primary: #107c76;
-  --ion-background-color: rgb(39, 39, 39);
-  --ion-text-color: white;
-  --ion-text-color-rgb: 255, 255, 255;
 }
 
 .modal-wrapper {
@@ -12,8 +9,6 @@ body {
 .App {
   text-align: center;
   height: 100vh;
-  background-color: #282c34;
-  color: white;
 }
 
 .app-title-container {
@@ -65,8 +60,6 @@ body {
   align-items: center;
   justify-content: center;
   font-size: calc(10px + 2vmin);
-  color: white;
-  border-bottom: 1px solid white;
 }
 
 .App-link {

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,15 +76,32 @@ 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();
     setSessionId(undefined);
     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>
@@ -99,10 +119,12 @@ export const App: React.FC = () => {
           </Route>
           <Route path="/session">
             <SessionPage
-              wsClient={wsClient}
+              sessionMessages={sessionMessages}
+              userIsSessionOwner={wsClient.getId() === sessionOwnerId}
               sessionId={sessionId}
               clientMap={clientMap}
               sessionOwnerId={sessionOwnerId}
+              onShare={onShare}
               onLeaveSession={onLeaveSession}
             ></SessionPage>
           </Route>

src/feature/clients/ClientsCard.tsx

@@ -0,0 +1,66 @@
+import {
+  IonCard,
+  IonCardHeader,
+  IonCardTitle,
+  IonCardSubtitle,
+  IonCardContent,
+  IonButton,
+} from "@ionic/react";
+import React from "react";
+import { ServerTypes } from "../../ServerTypes";
+
+export type ClientsCardProps = {
+  ownerId: string | undefined;
+  clientMap: Record<string, ServerTypes.Client>;
+  addClientClicked: () => void;
+};
+
+export const ClientsCard: React.FC<ClientsCardProps> = ({
+  clientMap,
+  ownerId,
+  addClientClicked,
+}) => {
+  const allClients = Object.values(clientMap);
+  const onlyOwner = ownerId && clientMap[ownerId] && allClients.length <= 1;
+
+  return (
+    <IonCard>
+      <IonCardHeader>
+        <IonCardTitle>Clients</IonCardTitle>
+        <IonCardSubtitle>Devices connected to this session</IonCardSubtitle>
+      </IonCardHeader>
+      <IonCardContent>
+        <div style={{ display: "flex", flexDirection: "row" }}>
+          {onlyOwner ? (
+            <p>You are the only client connected to this session.</p>
+          ) : null}
+          {allClients.map((client) => (
+            <ClientCircle client={client}></ClientCircle>
+          ))}
+          <IonButton onClick={addClientClicked}>Add Client</IonButton>
+        </div>
+      </IonCardContent>
+    </IonCard>
+  );
+};
+
+type ClientCircleProps = {
+  client: ServerTypes.Client;
+};
+
+const ClientCircle: React.FC<ClientCircleProps> = ({ client }) => {
+  return (
+    <div
+      style={{
+        minWidth: 32,
+        height: 32,
+        backgroundColor: "skyblue",
+        borderRadius: 32,
+        color: "white",
+        fontSize: 16,
+      }}
+    >
+      {client.id} : {client.name}
+    </div>
+  );
+};

src/feature/history/HistoryCard.tsx

@@ -0,0 +1,34 @@
+import { IonCard, IonCardHeader, IonCardTitle, IonCardContent, IonItem } from "@ionic/react";
+import React from "react";
+import { SessionMessage } from "../session/SessionMessage";
+
+export type HistoryCardProps = {
+    messages: SessionMessage[];
+}
+
+export const HistoryCard: React.FC<HistoryCardProps> = ({messages}) => {
+  return <IonCard>
+    <IonCardHeader>
+      <IonCardTitle>History</IonCardTitle>
+    </IonCardHeader>
+    <IonCardContent>
+        { messages.length === 0 ? <NoMessages/> :
+        messages.map(msg => <Message key={msg.uuid ?? "" + Math.random()} 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/home/HomePage.tsx

@@ -68,7 +68,7 @@ export const HomePage: React.FC<HomePageProps> = ({
             </IonButton>
           </div>
           <IntroSlides
-            style={{ height: "50%", maxWidth: "600px" }}
+            style={{ maxWidth: "600px" }}
           ></IntroSlides>
           <IonModal isOpen={scanModalOpen} onDidDismiss={closeScannerModal}>
             <ScanClientModal

src/feature/intro-slides/slides.css

@@ -1,5 +1,8 @@
 .introSlider {
   margin-bottom: 20px;
+  background-color: #222222;
+  border-radius: 16px;
+  color: white;
 }
 
 .slideDescription {