diff --git a/frontend/app/components/shared/LiveSessionList/LiveSessionList.tsx b/frontend/app/components/shared/LiveSessionList/LiveSessionList.tsx
index 997bc057f..d6325ea00 100644
--- a/frontend/app/components/shared/LiveSessionList/LiveSessionList.tsx
+++ b/frontend/app/components/shared/LiveSessionList/LiveSessionList.tsx
@@ -8,7 +8,7 @@ import withPermissions from 'HOCs/withPermissions'
import { KEYS } from 'Types/filter/customFilter';
import { applyFilter, addAttribute } from 'Duck/filters';
import { FilterCategory, FilterKey } from 'App/types/filter/filterType';
-import { addFilterByKeyAndValue, updateCurrentPage, toggleSortOrder } from 'Duck/liveSearch';
+import { addFilterByKeyAndValue, updateCurrentPage, updateSort } from 'Duck/liveSearch';
import DropdownPlain from 'Shared/DropdownPlain';
import SortOrderButton from 'Shared/SortOrderButton';
import { TimezoneDropdown } from 'UI';
@@ -28,12 +28,12 @@ interface Props {
updateCurrentPage: (page: number) => void,
currentPage: number,
metaList: any,
- sortOrder: string,
- toggleSortOrder: (sortOrder: string) => void,
+ updateSort: (sort: any) => void,
+ sort: any,
}
function LiveSessionList(props: Props) {
- const { loading, filters, list, currentPage, metaList = [], sortOrder } = props;
+ const { loading, filters, list, currentPage, metaList = [], sort } = props;
var timeoutId;
const hasUserFilter = filters.map(i => i.key).includes(KEYS.USERID);
const [sessions, setSessions] = React.useState(list);
@@ -41,7 +41,6 @@ function LiveSessionList(props: Props) {
text: capitalize(i), value: i
})).toJS();
- const [sortBy, setSortBy] = React.useState('');
const displayedCount = Math.min(currentPage * PER_PAGE, sessions.size);
const addPage = () => props.updateCurrentPage(props.currentPage + 1)
@@ -53,9 +52,11 @@ function LiveSessionList(props: Props) {
}, []);
useEffect(() => {
- if (metaList.size === 0 || !!sortBy) return;
+ if (metaList.size === 0 || !!sort.field) return;
- setSortBy(sortOptions[0] && sortOptions[0].value)
+ if ( sortOptions[0]) {
+ props.updateSort({ field: sortOptions[0].value });
+ }
}, [metaList]);
useEffect(() => {
@@ -96,7 +97,7 @@ function LiveSessionList(props: Props) {
}
const onSortChange = (e, { value }) => {
- setSortBy(value);
+ props.updateSort({ field: value });
}
const timeout = () => {
@@ -106,6 +107,8 @@ function LiveSessionList(props: Props) {
}, AUTOREFRESH_INTERVAL);
}
+ console.log('srt', sort)
+
return (
@@ -125,10 +128,10 @@ function LiveSessionList(props: Props) {
-
+
props.updateSort({ order: state })} sortOrder={sort.order} />
- {sessions && sessions.sortBy(i => i.metadata[sortBy]).update(list => {
- return sortOrder === 'desc' ? list.reverse() : list;
+ {sessions && sessions.sortBy(i => i.metadata[sort.field]).update(list => {
+ return sort.order === 'desc' ? list.reverse() : list;
}).take(displayedCount).map(session => (
i.key),
- sortOrder: state.getIn(['liveSearch', 'sortOrder']),
+ sort: state.getIn(['liveSearch', 'sort']),
}),
{
fetchLiveList,
@@ -183,6 +186,6 @@ export default withPermissions(['ASSIST_LIVE'])(connect(
addAttribute,
addFilterByKeyAndValue,
updateCurrentPage,
- toggleSortOrder,
+ updateSort,
}
)(LiveSessionList));
diff --git a/frontend/app/components/shared/SessionItem/MetaMoreButton/MetaMoreButton.tsx b/frontend/app/components/shared/SessionItem/MetaMoreButton/MetaMoreButton.tsx
index 5cf1f95dd..e425cd9ae 100644
--- a/frontend/app/components/shared/SessionItem/MetaMoreButton/MetaMoreButton.tsx
+++ b/frontend/app/components/shared/SessionItem/MetaMoreButton/MetaMoreButton.tsx
@@ -17,16 +17,16 @@ export default function MetaMoreButton(props: Props) {
) }
+ className="p-0"
content={
-
+
{list.slice(maxLength).map(({ label, value }, index) => (
-
+
))}
}
on="click"
position="center center"
- hideOnScroll
/>
)
}
diff --git a/frontend/app/components/shared/SessionItem/SessionMetaList/SessionMetaList.tsx b/frontend/app/components/shared/SessionItem/SessionMetaList/SessionMetaList.tsx
index 96b082e96..91faa2ec9 100644
--- a/frontend/app/components/shared/SessionItem/SessionMetaList/SessionMetaList.tsx
+++ b/frontend/app/components/shared/SessionItem/SessionMetaList/SessionMetaList.tsx
@@ -8,7 +8,7 @@ interface Props {
className?: string,
metaList: []
}
-const MAX_LENGTH = 3;
+const MAX_LENGTH = 1;
export default function SessionMetaList(props: Props) {
const { className = '', metaList } = props
return (
diff --git a/frontend/app/duck/liveSearch.js b/frontend/app/duck/liveSearch.js
index 5c9364e96..5a9ffd85b 100644
--- a/frontend/app/duck/liveSearch.js
+++ b/frontend/app/duck/liveSearch.js
@@ -15,14 +15,17 @@ const EDIT = editType(name);
const CLEAR_SEARCH = `${name}/CLEAR_SEARCH`;
const APPLY = `${name}/APPLY`;
const UPDATE_CURRENT_PAGE = `${name}/UPDATE_CURRENT_PAGE`;
-const TOGGLE_SORT_ORDER = `${name}/TOGGLE_SORT_ORDER`;
+const UPDATE_SORT = `${name}/UPDATE_SORT`;
const initialState = Map({
list: List(),
instance: new Filter({ filters: [] }),
filterSearchList: {},
currentPage: 1,
- sortOrder: 'asc',
+ sort: {
+ order: 'asc',
+ field: ''
+ }
});
function reducer(state = initialState, action = {}) {
@@ -31,8 +34,8 @@ function reducer(state = initialState, action = {}) {
return state.mergeIn(['instance'], action.instance);
case UPDATE_CURRENT_PAGE:
return state.set('currentPage', action.page);
- case TOGGLE_SORT_ORDER:
- return state.set('sortOrder', action.order);
+ case UPDATE_SORT:
+ return state.mergeIn(['sort'], action.sort);
}
return state;
}
@@ -103,9 +106,9 @@ export function updateCurrentPage(page) {
};
}
-export function toggleSortOrder (order) {
+export function updateSort(sort) {
return {
- type: TOGGLE_SORT_ORDER,
- order,
+ type: UPDATE_SORT,
+ sort,
};
}
\ No newline at end of file