From 7b9a8a2a062d219b0f10a43d5fc0b3de6ccec0e8 Mon Sep 17 00:00:00 2001
From: Shekar Siri <sshekarsiri@gmail.com>
Date: Fri, 15 Jul 2022 20:12:45 +0200
Subject: [PATCH] change(ui) - assist active sessions modal

---
 .../components/AssistTabs/AssistTabs.tsx      |  8 ++--
 .../components/SessionList/SessionList.tsx    | 46 ++++++++++++-------
 .../Session_/EventsBlock/event.module.css     |  1 +
 .../shared/SessionItem/PlayLink/PlayLink.tsx  |  6 ++-
 .../shared/SessionItem/SessionItem.tsx        |  3 ++
 5 files changed, 42 insertions(+), 22 deletions(-)

diff --git a/frontend/app/components/Assist/components/AssistTabs/AssistTabs.tsx b/frontend/app/components/Assist/components/AssistTabs/AssistTabs.tsx
index 9d965d821..93a73c236 100644
--- a/frontend/app/components/Assist/components/AssistTabs/AssistTabs.tsx
+++ b/frontend/app/components/Assist/components/AssistTabs/AssistTabs.tsx
@@ -1,3 +1,4 @@
+import { useModal } from 'App/components/Modal';
 import React, { useEffect, useState } from 'react';
 import { SlideModal, Avatar, TextEllipsis, Icon } from 'UI';
 import SessionList from '../SessionList';
@@ -10,6 +11,7 @@ interface Props {
 
 const AssistTabs = (props: Props) => {
   const [showMenu, setShowMenu] = useState(false)
+  const { showModal } = useModal();
 
   return (
     <div className="relative mr-4">
@@ -18,19 +20,19 @@ const AssistTabs = (props: Props) => {
           <>
             <div
               className={stl.btnLink}
-              onClick={() => setShowMenu(!showMenu)}
+              onClick={() => showModal(<SessionList userId={props.userId} />, {})}
             >
               Active Sessions
             </div>
           </>
         )}
       </div>
-      <SlideModal
+      {/* <SlideModal
         title={ <div>{props.userId}'s <span className="color-gray-medium">Live Sessions</span> </div> }
         isDisplayed={ showMenu }
         content={ showMenu && <SessionList /> }
         onClose={ () => setShowMenu(false) }
-      />
+      /> */}
     </div>
   );
 };
diff --git a/frontend/app/components/Assist/components/SessionList/SessionList.tsx b/frontend/app/components/Assist/components/SessionList/SessionList.tsx
index 79aa4af28..25cbcb89d 100644
--- a/frontend/app/components/Assist/components/SessionList/SessionList.tsx
+++ b/frontend/app/components/Assist/components/SessionList/SessionList.tsx
@@ -3,14 +3,17 @@ import { connect } from 'react-redux';
 import { fetchLiveList } from 'Duck/sessions';
 import { Loader, NoContent, Label } from 'UI';
 import SessionItem from 'Shared/SessionItem';
+import { useModal } from 'App/components/Modal';
 
 interface Props {
     loading: boolean;
     list: any;
     session: any;
+    userId: any;
     fetchLiveList: (params: any) => void;
 }
 function SessionList(props: Props) {
+    const { hideModal } = useModal();
     useEffect(() => {
         const params: any = {};
         if (props.session.userId) {
@@ -20,25 +23,34 @@ function SessionList(props: Props) {
     }, []);
 
     return (
-        <Loader loading={props.loading}>
-            <NoContent show={!props.loading && props.list.size === 0} title="No live sessions.">
+        <div style={{ width: '45vw' }}>
+            <div className="border-r shadow h-screen" style={{ backgroundColor: '#FAFAFA', zIndex: 999, width: '100%', minWidth: '800px' }}>
                 <div className="p-4">
-                    {props.list.map((session: any) => (
-                        <div className="mb-6">
-                            {session.pageTitle && session.pageTitle !== '' && (
-                                <div className="flex items-center mb-2">
-                                    <Label size="small" className="p-1">
-                                        <span className="color-gray-medium">TAB</span>
-                                    </Label>
-                                    <span className="ml-2 font-medium">{session.pageTitle}</span>
-                                </div>
-                            )}
-                            <SessionItem key={session.sessionId} session={session} showActive={session.active} />
-                        </div>
-                    ))}
+                    <div className="text-2xl">
+                        {props.userId}'s <span className="color-gray-medium">Live Sessions</span>{' '}
+                    </div>
                 </div>
-            </NoContent>
-        </Loader>
+                <Loader loading={props.loading}>
+                    <NoContent show={!props.loading && props.list.size === 0} title="No live sessions.">
+                        <div className="p-4">
+                            {props.list.map((session: any) => (
+                                <div className="mb-6">
+                                    {session.pageTitle && session.pageTitle !== '' && (
+                                        <div className="flex items-center mb-2">
+                                            <Label size="small" className="p-1">
+                                                <span className="color-gray-medium">TAB</span>
+                                            </Label>
+                                            <span className="ml-2 font-medium">{session.pageTitle}</span>
+                                        </div>
+                                    )}
+                                    <SessionItem onClick={() => hideModal()} key={session.sessionId} session={session} showActive={session.active} />
+                                </div>
+                            ))}
+                        </div>
+                    </NoContent>
+                </Loader>
+            </div>
+        </div>
     );
 }
 
diff --git a/frontend/app/components/Session_/EventsBlock/event.module.css b/frontend/app/components/Session_/EventsBlock/event.module.css
index 2a928e3ed..8afea78f2 100644
--- a/frontend/app/components/Session_/EventsBlock/event.module.css
+++ b/frontend/app/components/Session_/EventsBlock/event.module.css
@@ -71,6 +71,7 @@
     transition: all 0.2s;
     box-shadow: 0px 2px 10px 0 $gray-light;
     border: 1px solid $active-blue-border;
+    /* background-color: red; */
   }
 
   &.red {
diff --git a/frontend/app/components/shared/SessionItem/PlayLink/PlayLink.tsx b/frontend/app/components/shared/SessionItem/PlayLink/PlayLink.tsx
index 2234a5242..54c7ed692 100644
--- a/frontend/app/components/shared/SessionItem/PlayLink/PlayLink.tsx
+++ b/frontend/app/components/shared/SessionItem/PlayLink/PlayLink.tsx
@@ -17,9 +17,10 @@ interface Props {
     isAssist: boolean;
     viewed: boolean;
     sessionId: string;
+    onClick?: () => void;
 }
 export default function PlayLink(props: Props) {
-    const { isAssist, viewed, sessionId } = props
+    const { isAssist, viewed, sessionId, onClick = null } = props
     const defaultIconName = getDefaultIconName(viewed)
 
     const [isHovered, toggleHover] = useState(false)
@@ -31,7 +32,8 @@ export default function PlayLink(props: Props) {
     }, [isHovered, viewed])
 
     return (
-        <Link 
+        <Link
+            onClick={onClick ? onClick : () => {}}
             to={ isAssist ? liveSessionRoute(sessionId) : sessionRoute(sessionId) }
             onMouseEnter={() => toggleHover(true)}
             onMouseLeave={() => toggleHover(false)}
diff --git a/frontend/app/components/shared/SessionItem/SessionItem.tsx b/frontend/app/components/shared/SessionItem/SessionItem.tsx
index b2acd2431..bb324d2e0 100644
--- a/frontend/app/components/shared/SessionItem/SessionItem.tsx
+++ b/frontend/app/components/shared/SessionItem/SessionItem.tsx
@@ -55,6 +55,7 @@ interface Props {
   showActive?: boolean;
   lastPlayedSessionId?: string;
   live?: boolean;
+  onClick?: any
 }
 
 function SessionItem(props: RouteComponentProps & Props) {
@@ -69,6 +70,7 @@ function SessionItem(props: RouteComponentProps & Props) {
     metaList = [],
     showActive = false,
     lastPlayedSessionId,
+    onClick = null,
   } = props;
 
   const {
@@ -179,6 +181,7 @@ function SessionItem(props: RouteComponentProps & Props) {
                 isAssist={isAssist}
                 sessionId={sessionId}
                 viewed={viewed}
+                onClick={onClick}
               />
             </div>
           </div>