Move share card to it's own file

michaelclapham · Mar 31, 2024 · 0ce6f7b · 0ce6f7b
1 parent 0557071
commit 0ce6f7b
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 13 deletions.
diff --git a/src/feature/session/SessionPage.tsx b/src/feature/session/SessionPage.tsx
@@ -18,6 +18,7 @@ import { SessionMessage } from "./SessionMessage";
 import { SessionActionsList } from "../session-actions/SessionActionsList";
 import { ClientsCard } from "../clients/ClientsCard";
 import { HistoryCard } from "../history/HistoryCard";
+import { ShareCard } from "../share/ShareCard";
 
 export interface SessionPageProps {
   sessionId: string | undefined;
@@ -65,19 +66,10 @@ export class SessionPage extends React.Component<
           ></ClientsCard>
           {/* TODO: Show received messages / content in history card */}
           <HistoryCard></HistoryCard>
-          <IonCard>
-            <IonCardHeader>
-              <IonCardTitle>Share</IonCardTitle>
-            </IonCardHeader>
-            <IonCardContent>
-                <SessionActionsList
-                wsClient={this.props.wsClient}
-                userIsSessionOwner={
-                  this.props.sessionOwnerId === this.props.wsClient.getId()
-                }
-              ></SessionActionsList>
-            </IonCardContent>
-          </IonCard>
+          <ShareCard
+            wsClient={this.props.wsClient}
+            sessionOwnerId={this.props.sessionOwnerId}
+          ></ShareCard>
           <IonButton onClick={this.props.onLeaveSession}>
             Leave Session
           </IonButton>

diff --git a/src/feature/share/ShareCard.tsx b/src/feature/share/ShareCard.tsx
@@ -0,0 +1,25 @@
+import { IonCard, IonCardHeader, IonCardTitle, IonCardContent } from "@ionic/react";
+import React from "react";
+import { SessionActionsList } from "../session-actions/SessionActionsList";
+import { WSClient } from "../../WSClient";
+
+export type ShareCardProps = {
+    wsClient: WSClient;
+    sessionOwnerId?: string;
+}
+
+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>;
+};