From b8008182fc65dd772ca486293554d091c43ca974 Mon Sep 17 00:00:00 2001
From: sylenien <nikita@openreplay.com>
Date: Mon, 5 Dec 2022 15:38:55 +0100
Subject: [PATCH] change(ui): split large file into chunks

---
 .../Session_/Multiview/EmptyTile.tsx          | 16 +++++++
 .../Session_/Multiview/Multiview.tsx          | 45 +++++++------------
 .../Session_/Multiview/SessionTileFooter.tsx  | 36 +++++++++++++++
 3 files changed, 67 insertions(+), 30 deletions(-)
 create mode 100644 frontend/app/components/Session_/Multiview/EmptyTile.tsx
 create mode 100644 frontend/app/components/Session_/Multiview/SessionTileFooter.tsx

diff --git a/frontend/app/components/Session_/Multiview/EmptyTile.tsx b/frontend/app/components/Session_/Multiview/EmptyTile.tsx
new file mode 100644
index 000000000..e92657603
--- /dev/null
+++ b/frontend/app/components/Session_/Multiview/EmptyTile.tsx
@@ -0,0 +1,16 @@
+import React from 'react'
+import { InactiveTab } from 'App/components/Session_/Player/Controls/AssistSessionsTabs';
+
+function EmptyTile({ onClick }: { onClick: () => void }) {
+  return (
+    <div
+      className="border hover:bg-active-blue hover:border-borderColor-primary flex flex-col gap-2 items-center justify-center cursor-pointer"
+      onClick={onClick}
+    >
+      <InactiveTab classNames="!bg-gray-bg w-12" />
+      Add Session
+    </div>
+  );
+}
+
+export default EmptyTile;
diff --git a/frontend/app/components/Session_/Multiview/Multiview.tsx b/frontend/app/components/Session_/Multiview/Multiview.tsx
index 82ee3be35..d4f4a94d5 100644
--- a/frontend/app/components/Session_/Multiview/Multiview.tsx
+++ b/frontend/app/components/Session_/Multiview/Multiview.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { useStore } from 'App/mstore';
-import { BackLink, Icon } from 'UI';
+import { BackLink } from 'UI';
 import { observer } from 'mobx-react-lite';
 import { connect } from 'react-redux';
 import { fetchSessions, customSetSessions } from 'Duck/liveSearch';
@@ -9,7 +9,8 @@ import { liveSession, assist, withSiteId, multiview } from 'App/routes';
 import AssistSessionsModal from 'App/components/Session_/Player/Controls/AssistSessionsModal';
 import { useModal } from 'App/components/Modal';
 import LivePlayer from 'App/components/Session/LivePlayer';
-import { InactiveTab } from 'App/components/Session_/Player/Controls/AssistSessionsTabs';
+import EmptyTile from './EmptyTile'
+import SessionTileFooter from './SessionTileFooter'
 
 function Multiview({
   total,
@@ -57,7 +58,7 @@ function Multiview({
     history.push(withSiteId(liveSession(sessionId), siteId));
   };
 
-  const openList = () => {
+  const returnToList = () => {
     history.push(withSiteId(assist(), siteId));
   };
 
@@ -82,7 +83,7 @@ function Multiview({
       <div className="w-full p-4 flex justify-between items-center">
         <div>
           {/* @ts-ignore */}
-          <BackLink label="Back to sessions list" onClick={openList} />
+          <BackLink label="Back to sessions list" onClick={returnToList} />
         </div>
         <div>{`Watching ${assistMultiviewStore.sessions.length} of ${total} Live Sessions`}</div>
       </div>
@@ -90,7 +91,7 @@ function Multiview({
         {assistMultiviewStore.sortedSessions.map((session: Record<string, any>) => (
           <div
             key={session.key}
-            className="border hover:border-active-blue-border relative group cursor-pointer"
+            className="border hover:bg-active-blue hover:border-borderColor-primary relative group cursor-pointer"
           >
             <div onClick={(e) => openLiveSession(e, session.sessionId)} className="w-full h-full">
               {session.agentToken ? (
@@ -103,34 +104,18 @@ function Multiview({
                 <div>Loading session</div>
               )}
             </div>
-            <div className="absolute z-10 bottom-0 w-full left-0 p-2 opacity-70 bg-gray-darkest text-white flex justify-between">
-              <div>{session.userDisplayName}</div>
-              <div className="hidden group-hover:flex items-center gap-2">
-                <div
-                  className="cursor-pointer hover:font-semibold"
-                  onClick={(e) => replaceSession(e, session.sessionId)}
-                >
-                  Replace Session
-                </div>
-                <div
-                  className="cursor-pointer hover:font-semibold"
-                  onClick={(e) => deleteSession(e, session.sessionId)}
-                >
-                  <Icon name="trash" size={18} color="white" />
-                </div>
-              </div>
-            </div>
+            <SessionTileFooter
+              userDisplayName={session.userDisplayName}
+              sessionId={session.sessionId}
+              replaceSession={replaceSession}
+              deleteSession={deleteSession}
+            />
           </div>
         ))}
         {placeholder.map((_, i) => (
-          <div
-            key={i}
-            className="border hover:border-active-blue-border flex flex-col gap-2 items-center justify-center cursor-pointer"
-            onClick={openListModal}
-          >
-            <InactiveTab classNames="!bg-gray-bg w-12" />
-            Add Session
-          </div>
+          <React.Fragment key={i}>
+            <EmptyTile onClick={openListModal} />
+          </React.Fragment>
         ))}
       </div>
     </div>
diff --git a/frontend/app/components/Session_/Multiview/SessionTileFooter.tsx b/frontend/app/components/Session_/Multiview/SessionTileFooter.tsx
new file mode 100644
index 000000000..be3205421
--- /dev/null
+++ b/frontend/app/components/Session_/Multiview/SessionTileFooter.tsx
@@ -0,0 +1,36 @@
+import React from 'react'
+import { Icon } from 'UI'
+
+function SessionTileFooter({
+  userDisplayName,
+  sessionId,
+  replaceSession,
+  deleteSession,
+}: {
+  userDisplayName: string;
+  sessionId: string;
+  replaceSession: (e: any, id: string) => void;
+  deleteSession: (e: any, id: string) => void;
+}) {
+  return (
+    <div className="absolute z-10 bottom-0 w-full left-0 p-2 opacity-70 bg-gray-darkest text-white flex justify-between">
+      <div>{userDisplayName}</div>
+      <div className="hidden group-hover:flex items-center gap-2">
+        <div
+          className="cursor-pointer hover:font-semibold"
+          onClick={(e) => replaceSession(e, sessionId)}
+        >
+          Replace Session
+        </div>
+        <div
+          className="cursor-pointer hover:font-semibold"
+          onClick={(e) => deleteSession(e, sessionId)}
+        >
+          <Icon name="trash" size={18} color="white" />
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default SessionTileFooter;