diff --git a/frontend/app/components/shared/LiveSessionList/LiveSessionList.tsx b/frontend/app/components/shared/LiveSessionList/LiveSessionList.tsx index 2339c3b62..c4d0d7f78 100644 --- a/frontend/app/components/shared/LiveSessionList/LiveSessionList.tsx +++ b/frontend/app/components/shared/LiveSessionList/LiveSessionList.tsx @@ -20,174 +20,188 @@ const AUTOREFRESH_INTERVAL = 0.5 * 60 * 1000; const PER_PAGE = 10; interface Props { - loading: boolean; - metaListLoading: boolean; - list: List; - // fetchLiveList: () => Promise, - applyFilter: (filter: any) => void; - filter: any; - // addAttribute: (obj: any) => void, - addFilterByKeyAndValue: (key: FilterKey, value: string) => void; - updateCurrentPage: (page: number) => void; - currentPage: number; - totla: number; - metaList: any; - sort: any; - total: number; + loading: boolean; + metaListLoading: boolean; + list: List; + // fetchLiveList: () => Promise, + applyFilter: (filter: any) => void; + filter: any; + // addAttribute: (obj: any) => void, + addFilterByKeyAndValue: (key: FilterKey, value: string) => void; + updateCurrentPage: (page: number) => void; + currentPage: number; + totla: number; + metaList: any; + sort: any; + total: number; } function LiveSessionList(props: Props) { - const { loading, metaListLoading, filter, list, currentPage, total, metaList = [], sort } = props; - var timeoutId: any; - const { filters } = filter; - const hasUserFilter = filters.map((i: any) => i.key).includes(KEYS.USERID); - const sortOptions = [{ label: 'Newest', value: 'timestamp' }].concat( - metaList - .map((i: any) => ({ - label: capitalize(i), - value: i, - })) - .toJS() - ); + const { loading, metaListLoading, filter, list, currentPage, total, metaList = [], sort } = props; + var timeoutId: any; + const { filters } = filter; + const hasUserFilter = filters.map((i: any) => i.key).includes(KEYS.USERID); + const sortOptions = [{ label: 'Newest', value: 'timestamp' }].concat( + metaList + .map((i: any) => ({ + label: capitalize(i), + value: i, + })) + .toJS() + ); - useEffect(() => { - if (metaListLoading) return; - const _filter = { ...filter }; - if (sortOptions[1] && !filter.sort) { - _filter.sort = sortOptions[1].value; - } - props.applyFilter(_filter); - timeout(); - return () => { - clearTimeout(timeoutId); - }; - }, [metaListLoading]); - - const onUserClick = (userId: string, userAnonymousId: string) => { - if (userId) { - props.addFilterByKeyAndValue(FilterKey.USERID, userId); - } else { - props.addFilterByKeyAndValue(FilterKey.USERANONYMOUSID, userAnonymousId); - } + useEffect(() => { + if (metaListLoading) return; + const _filter = { ...filter }; + if (sortOptions[1] && !filter.sort) { + _filter.sort = sortOptions[1].value; + } + props.applyFilter(_filter); + timeout(); + return () => { + clearTimeout(timeoutId); }; + }, [metaListLoading]); - const onSortChange = ({ value }: any) => { - props.applyFilter({ sort: value.value }); - }; + const onUserClick = (userId: string, userAnonymousId: string) => { + if (userId) { + props.addFilterByKeyAndValue(FilterKey.USERID, userId); + } else { + props.addFilterByKeyAndValue(FilterKey.USERANONYMOUSID, userAnonymousId); + } + }; - const timeout = () => { - timeoutId = setTimeout(() => { - props.applyFilter({ ...filter }); - timeout(); - }, AUTOREFRESH_INTERVAL); - }; + const onSortChange = ({ value }: any) => { + props.applyFilter({ sort: value.value }); + }; - return ( -
-
-
-
-

- Live Sessions - {/* {numberWithCommas(total)} */} -

+ const timeout = () => { + timeoutId = setTimeout(() => { + props.applyFilter({ ...filter }); + timeout(); + }, AUTOREFRESH_INTERVAL); + }; - props.applyFilter({ ...filter })} /> -
-
-
- Sort By -
- i.value === filter.sort) || sortOptions[0]} + /> +
+ props.applyFilter({ order: state })} + sortOrder={filter.order} + /> +
+
- ); + + + +
+
No live sessions found.
+
+ } + subtext={ +
+ + Assist allows you to support your users through live screen viewing and + audio/video calls.{' '} + + {'Learn More'} + + + + +
+ } + // image={} + show={!loading && list.size === 0} + > +
+ {list.map((session) => ( + + +
+ + ))} +
+
+
+ Showing {(currentPage - 1) * PER_PAGE + 1} to{' '} + {(currentPage - 1) * PER_PAGE + list.size} of{' '} + {numberWithCommas(total)} sessions. +
+ props.updateCurrentPage(page)} + limit={PER_PAGE} + debounceRequest={500} + /> +
+ + +
+
+ ); } export default withPermissions(['ASSIST_LIVE'])( - connect( - (state: any) => ({ - list: state.getIn(['liveSearch', 'list']), - loading: state.getIn(['liveSearch', 'fetchList', 'loading']), - metaListLoading: state.getIn(['customFields', 'fetchRequest', 'loading']), - filter: state.getIn(['liveSearch', 'instance']), - total: state.getIn(['liveSearch', 'total']), - currentPage: state.getIn(['liveSearch', 'currentPage']), - metaList: state.getIn(['customFields', 'list']).map((i: any) => i.key), - sort: state.getIn(['liveSearch', 'sort']), - }), - { - applyFilter, - addFilterByKeyAndValue, - updateCurrentPage, - } - )(LiveSessionList) + connect( + (state: any) => ({ + list: state.getIn(['liveSearch', 'list']), + loading: state.getIn(['liveSearch', 'fetchList', 'loading']), + metaListLoading: state.getIn(['customFields', 'fetchRequest', 'loading']), + filter: state.getIn(['liveSearch', 'instance']), + total: state.getIn(['liveSearch', 'total']), + currentPage: state.getIn(['liveSearch', 'currentPage']), + metaList: state.getIn(['customFields', 'list']).map((i: any) => i.key), + sort: state.getIn(['liveSearch', 'sort']), + }), + { + applyFilter, + addFilterByKeyAndValue, + updateCurrentPage, + } + )(LiveSessionList) ); diff --git a/frontend/app/components/shared/ReloadButton/ReloadButton.tsx b/frontend/app/components/shared/ReloadButton/ReloadButton.tsx index 3e7cf90a6..3f5ebc6e3 100644 --- a/frontend/app/components/shared/ReloadButton/ReloadButton.tsx +++ b/frontend/app/components/shared/ReloadButton/ReloadButton.tsx @@ -10,7 +10,7 @@ interface Props { className?: string; } export default function ReloadButton(props: Props) { - const { loading, onClick, iconSize = '14', iconName = 'sync-alt', className = '' } = props; + const { loading, onClick, iconSize = '20', iconName = 'arrow-repeat', className = '' } = props; return (
props.fetchSessions(null, true)} > Refresh diff --git a/frontend/app/components/ui/Button/Button.tsx b/frontend/app/components/ui/Button/Button.tsx index e7aa306dc..309c84baa 100644 --- a/frontend/app/components/ui/Button/Button.tsx +++ b/frontend/app/components/ui/Button/Button.tsx @@ -11,6 +11,7 @@ interface Props { variant?: 'default' | 'primary' | 'text' | 'text-primary' | 'text-red' | 'outline' | 'green' loading?: boolean; icon?: string; + iconSize?: number; rounded?: boolean; tooltip?: any; [x: string]: any; @@ -18,6 +19,7 @@ interface Props { export default (props: Props) => { const { icon = '', + iconSize = 18, className = '', variant = 'default', // 'default|primary|text|text-primary|text-red|outline', type = 'button', @@ -79,7 +81,7 @@ export default (props: Props) => { const render = () => (