From dda55cc3150648f852a4a60f72ee04b9a04341b3 Mon Sep 17 00:00:00 2001
From: Shekar Siri <sshekarsiri@gmail.com>
Date: Wed, 13 Jul 2022 12:45:00 +0200
Subject: [PATCH] change(ui) - assist sort by timestamp

---
 .../LiveSessionList/LiveSessionList.tsx       | 61 +++++--------------
 .../SortOrderButton/SortOrderButton.tsx       |  4 +-
 frontend/app/duck/liveSearch.js               |  2 +-
 3 files changed, 17 insertions(+), 50 deletions(-)

diff --git a/frontend/app/components/shared/LiveSessionList/LiveSessionList.tsx b/frontend/app/components/shared/LiveSessionList/LiveSessionList.tsx
index 4adcc8365..fd4af677c 100644
--- a/frontend/app/components/shared/LiveSessionList/LiveSessionList.tsx
+++ b/frontend/app/components/shared/LiveSessionList/LiveSessionList.tsx
@@ -1,6 +1,6 @@
 import React, { useEffect } from 'react';
 import { connect } from 'react-redux';
-import { NoContent, Loader, Pagination, Popup } from 'UI';
+import { NoContent, Loader, Pagination } from 'UI';
 import { List } from 'immutable';
 import SessionItem from 'Shared/SessionItem';
 import withPermissions from 'HOCs/withPermissions';
@@ -39,41 +39,11 @@ function LiveSessionList(props: Props) {
     var timeoutId: any;
     const { filters } = filter;
     const hasUserFilter = filters.map((i: any) => i.key).includes(KEYS.USERID);
-    const sortOptions = metaList
+    const sortOptions = [{ label: 'Newest', value: 'timestamp' }].concat(metaList
         .map((i: any) => ({
             label: capitalize(i),
             value: i,
-        }))
-        .toJS();
-
-    // useEffect(() => {
-    //   if (metaListLoading || metaList.size === 0 || !!filter.sort) return;
-
-    //   if (sortOptions[0]) {
-    //     props.applyFilter({ sort: sortOptions[0].value });
-    //   }
-    // }, [metaListLoading]);
-
-    // useEffect(() => {
-    //   const filteredSessions = filters.size > 0 ? props.list.filter(session => {
-    //     let hasValidFilter = true;
-    //     filters.forEach(filter => {
-    //       if (!hasValidFilter) return;
-
-    //       const _values = filter.value.filter(i => i !== '' && i !== null && i !== undefined).map(i => i.toLowerCase());
-    //       if (filter.key === FilterKey.USERID) {
-    //         const _userId = session.userId ? session.userId.toLowerCase() : '';
-    //         hasValidFilter = _values.length > 0 ? (_values.includes(_userId) && hasValidFilter) || _values.some(i => _userId.includes(i)) : hasValidFilter;
-    //       }
-    //       if (filter.category === FilterCategory.METADATA) {
-    //         const _source = session.metadata[filter.key] ? session.metadata[filter.key].toLowerCase() : '';
-    //         hasValidFilter = _values.length > 0 ? (_values.includes(_source) && hasValidFilter) || _values.some(i => _source.includes(i)) : hasValidFilter;
-    //       }
-    //     })
-    //     return hasValidFilter;
-    //   }) : props.list;
-    //   setSessions(filteredSessions);
-    // }, [filters, list]);
+        })).toJS());
 
     useEffect(() => {
         props.applyFilter({ ...filter });
@@ -116,20 +86,17 @@ function LiveSessionList(props: Props) {
                 <div className="flex items-center">
                     <div className="flex items-center ml-6 mr-4">
                         <span className="mr-2 color-gray-medium">Sort By</span>
-                        <Popup content="No metadata available to sort" disabled={sortOptions.length > 0}>
-                            <div className={cn('flex items-center', { disabled: sortOptions.length === 0 })}>
-                                <Select
-                                    plain
-                                    right
-                                    options={sortOptions}
-                                    // defaultValue={sort.field}
-                                    onChange={onSortChange}
-                                    value={sortOptions.find((i: any) => i.value === filter.sort) || sortOptions[0]}
-                                />
-                                <div className="mx-2" />
-                                <SortOrderButton onChange={(state: any) => props.applyFilter({ order: state })} sortOrder={filter.order} />
-                            </div>
-                        </Popup>
+                        <div className={cn('flex items-center', { disabled: sortOptions.length === 0 })}>
+                            <Select
+                                plain
+                                right
+                                options={sortOptions}
+                                onChange={onSortChange}
+                                value={sortOptions.find((i: any) => i.value === filter.sort) || sortOptions[0]}
+                            />
+                            <div className="mx-2" />
+                            <SortOrderButton onChange={(state: any) => props.applyFilter({ order: state })} sortOrder={filter.order} />
+                        </div>
                     </div>
                 </div>
             </div>
diff --git a/frontend/app/components/shared/SortOrderButton/SortOrderButton.tsx b/frontend/app/components/shared/SortOrderButton/SortOrderButton.tsx
index 1a10d8030..7d7901783 100644
--- a/frontend/app/components/shared/SortOrderButton/SortOrderButton.tsx
+++ b/frontend/app/components/shared/SortOrderButton/SortOrderButton.tsx
@@ -14,7 +14,7 @@ export default React.memo(function SortOrderButton(props: Props) {
         <div className="flex items-center border">
             <Popup content={'Ascending'} >
                 <div
-                    className={cn("p-1 hover:bg-active-blue", { 'cursor-pointer bg-white' : !isAscending, 'bg-active-blue' : isAscending })}
+                    className={cn("p-1 hover:bg-active-blue", { 'cursor-pointer bg-white' : !isAscending, 'bg-active-blue pointer-events-none' : isAscending })}
                     onClick={() => onChange('asc')}
                 >
                     <Icon name="arrow-up" size="14" color={isAscending ? 'teal' : 'gray-medium'} />
@@ -23,7 +23,7 @@ export default React.memo(function SortOrderButton(props: Props) {
 
             <Popup content={'Descending'} >
                 <div
-                    className={cn("p-1 hover:bg-active-blue border-l", { 'cursor-pointer bg-white' : isAscending, 'bg-active-blue' : !isAscending })}
+                    className={cn("p-1 hover:bg-active-blue border-l", { 'cursor-pointer bg-white' : isAscending, 'bg-active-blue pointer-events-none' : !isAscending })}
                     onClick={() => onChange('desc')}
                 >
                     <Icon name="arrow-down" size="14" color={!isAscending ? 'teal' : 'gray-medium'} />
diff --git a/frontend/app/duck/liveSearch.js b/frontend/app/duck/liveSearch.js
index d75916eec..9df03dc81 100644
--- a/frontend/app/duck/liveSearch.js
+++ b/frontend/app/duck/liveSearch.js
@@ -20,7 +20,7 @@ const FETCH_SESSION_LIST = fetchListType(`${name}/FETCH_SESSION_LIST`);
 
 const initialState = Map({
 	list: List(),
-	instance: new Filter({ filters: [], sort: '' }),
+	instance: new Filter({ filters: [], sort: 'timestamp' }),
   filterSearchList: {},
   currentPage: 1,
 });