fix(ui) - show live sessions by user

frontend/app/components/Assist/components/AssistTabs/AssistTabs.tsx

@@ -1,77 +1,27 @@
 import React, { useEffect, useState } from 'react';
-import { connect } from 'react-redux';
-import { applyFilter, addAttribute } from 'Duck/filters';
-import { fetchList } from 'Duck/sessions';
-import { KEYS } from 'Types/filter/customFilter';
-import { Link, Loader } from 'UI';
-import Filter from 'Types/filter';
-import { List } from 'immutable';
-import Counter from 'App/components/shared/SessionItem/Counter';
-import { fetchLiveList } from 'Duck/sessions';
-import { session as sessionRoute } from 'App/routes';
-import { session } from 'App/components/Session_/session.css';
-
-const RowItem = ({ startedAt, sessionId }) => {
-  return (
-    <Link to={ sessionRoute(sessionId) }>
-      <div className="flex justify-between p-2 cursor-pointer">
-        Tab1
-        <Counter startTime={startedAt} />
-      </div>
-    </Link>
-  );
-}
+import { SlideModal } from 'UI';
+import SessionList from '../SessionList';
 
 interface Props {
-  list: List<any>,
-  session: any,
-  fetchLiveList: () => void,
-  applyFilter: () => void,
-  filters: Filter
-  addAttribute: (obj) => void,
-  loading: boolean
+  userId: any,
 }
 
 const AssistTabs = React.memo((props: Props) => {
   const [showMenu, setShowMenu] = useState(false)
 
-  useEffect(() => {
-    if (showMenu) {
-      props.fetchLiveList();
-    }
-  }, [showMenu])
-
-  useEffect(() => {
-    if (!props.loading && props.list.size === 0) {
-      props.fetchLiveList();
-    }
-  }, [props.list])
-
   return (
     <div className="relative mr-4">
-      <div className="p-2 cursor-pointer" onClick={() => setShowMenu(!showMenu)}>Active Tabs</div>
-      {showMenu && (
-        <div
-          className="border z-10 absolute bg-white rounded shadow right-0"
-          style={{ minWidth: "180px"}}
-        >
-          <Loader loading={props.loading} size="small">
-            {props.list.map((item, index) => (
-              <RowItem key={index} startedAt={item.startedAt} sessionId={item.sessionId} />
-            ))}  
-          </Loader>
-        </div>
-      )}
+      <div className="p-2 cursor-pointer" onClick={() => setShowMenu(!showMenu)}>
+        Live Sessions
+      </div>
+      <SlideModal
+        title={ <div>Live Sessions by {props.userId}</div> }
+        isDisplayed={ showMenu }
+        content={ showMenu && <SessionList /> }
+        onClose={ () => setShowMenu(false) }
+      />
     </div>
   );
 });
 
-export default connect(state => {
-  const session = state.getIn([ 'sessions', 'current' ]);
-  return {
-    loading: state.getIn([ 'sessions', 'fetchLiveListRequest', 'loading' ]),
-    list: state.getIn(['sessions', 'liveSessions']).filter(i => i.userId === session.userId),
-    session,
-    filters: state.getIn([ 'filters', 'appliedFilter' ]),
-  }
-}, { applyFilter, addAttribute, fetchLiveList })(AssistTabs);
+export default AssistTabs;

frontend/app/components/Assist/components/SessionList/SessionList.tsx

@@ -0,0 +1,40 @@
+import React, { useEffect } from 'react';
+import { connect } from 'react-redux';
+import { fetchLiveList } from 'Duck/sessions';
+import { Loader, NoContent } from 'UI';
+import SessionItem from 'Shared/SessionItem';
+
+interface Props {
+  loading: boolean,
+  list: any,
+  session: any,
+  fetchLiveList: () => void,
+}
+function SessionList(props: Props) {
+  useEffect(() => {
+    props.fetchLiveList();
+  }, [])
+
+  return (
+    <Loader loading={props.loading}>
+      <NoContent 
+        show={ !props.loading && (props.list.length === 0 )}
+        title="No recordings found."
+      >
+        <div className="p-4">
+          { props.list.map(session => <SessionItem key={ session.sessionId } session={ session } />) }
+        </div>
+      </NoContent>
+    </Loader>
+  );
+}
+
+export default connect(state => {
+ const session = state.getIn([ 'sessions', 'current' ]);
+ return {
+  session,
+  list: state.getIn(['sessions', 'liveSessions'])
+    .filter(i => i.userId === session.userId && i.sessionId !== session.sessionId),
+  loading: state.getIn([ 'sessions', 'fetchLiveListRequest', 'loading' ]),
+ } 
+}, { fetchLiveList })(SessionList);

frontend/app/components/Assist/components/SessionList/index.ts

@@ -0,0 +1 @@
+export { default } from './SessionList';

frontend/app/components/Session_/PlayerBlockHeader.js

@@ -116,7 +116,7 @@ export default class PlayerBlockHeader extends React.PureComponent {
           <HeaderInfo icon={ osIcon(userOs) } label={ userOs } />
 
           <div className='ml-auto flex items-center'>
-            { live && <AssistTabs />}
+            { live && <AssistTabs userId={userId} />}
             { live && <AssistActions isLive userId={userId} /> }
             { !live && (
               <>