From 1f2e4c6beef9e92b8049d576e33be1e14effc220 Mon Sep 17 00:00:00 2001 From: Shekar Siri Date: Wed, 23 Feb 2022 17:07:51 +0100 Subject: [PATCH] fix(ui) - sort state and other fixes --- .../LiveSessionList/LiveSessionList.tsx | 31 ++++++++++--------- .../MetaMoreButton/MetaMoreButton.tsx | 6 ++-- .../SessionMetaList/SessionMetaList.tsx | 2 +- frontend/app/duck/liveSearch.js | 17 +++++----- 4 files changed, 31 insertions(+), 25 deletions(-) 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