Move clients card to it's own file

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/session/SessionPage.tsx

@@ -16,6 +16,7 @@ import {
 import { WSClient } from "../../WSClient";
 import { SessionMessage } from "./SessionMessage";
 import { SessionActionsList } from "../session-actions/SessionActionsList";
+import { ClientsCard } from "../clients/ClientsCard";
 
 export interface SessionPageProps {
   sessionId: string | undefined;
@@ -53,16 +54,11 @@ export class SessionPage extends React.Component<
           </IonToolbar>
         </IonHeader>
         <IonContent>
-          <IonCard>
-            <IonCardHeader>
-              <IonCardTitle>Clients</IonCardTitle>
-              <IonCardSubtitle>Devices connected to this session</IonCardSubtitle>
-            </IonCardHeader>
-            <IonCardContent>
-              <p>You are the only client connected to this session.</p>
-              <IonButton>Add Client</IonButton>
-            </IonCardContent>
-          </IonCard>
+          <ClientsCard
+            clientMap={this.props.clientMap}
+            ownerId={this.props.sessionOwnerId}
+            addClientClicked={() => console.log("add client from clients card to be implemented")}
+          ></ClientsCard>
           <IonCard>
             <IonCardHeader>
               <IonCardTitle>History</IonCardTitle>