diff --git a/src/frontend/src/Components/events/EventsTable.js b/src/frontend/src/Components/events/EventsTable.js index 0051ed11a..a19ee1de9 100644 --- a/src/frontend/src/Components/events/EventsTable.js +++ b/src/frontend/src/Components/events/EventsTable.js @@ -21,31 +21,35 @@ import { import './EventsTable.scss'; export default function EventsTable({columns, data, sortingHandler, routeHandler}) { + // States const [sorting, setSorting] = useState([{ desc: true, id: 'severity' }]); - const prioritySortFn = (rowA, rowB, columnId) => { + // Sort functions for react-table + const prioritySortFn = (rowA, rowB) => { + const aPriority = rowA.original.priority; + const bPriority = rowB.original.priority; + + return aPriority < bPriority ? 1 : -1; + } + + const defaultSortFn = (rowA, rowB, columnId) => { const aValue = rowA.getValue(columnId); - const bValue = rowA.getValue(columnId); + const bValue = rowB.getValue(columnId); if (aValue != bValue) { - return aValue < bValue ? 1 : -1; + return aValue > bValue ? 1 : -1; - // Equal value, order by priority + // Equal value, order by reverse priority } else { - const aPriority = rowA.original.priority; - const bPriority = rowB.original.priority; - - return aPriority < bPriority ? 1 : -1; + return prioritySortFn(rowA, rowB); } } - const reversedPrioritySortFn = (rowA, rowB, columnId) => { - console.log('text'); - -// return prioritySortFn(rowA, rowB, columnId) * -1; - return 10293414; + const reverseSortFn = (rowA, rowB, columnId) => { + return defaultSortFn(rowA, rowB, columnId) * -1; } + // react-table const table = useReactTable({ data: data, columns: columns, @@ -54,23 +58,27 @@ export default function EventsTable({columns, data, sortingHandler, routeHandler }, initialState: { pagination: { - pageSize: -1, + // Large number to show all rows, do NOT use -1 here + // https://github.com/TanStack/table/issues/3740 + pageSize: 65536, }, }, onSortingChange: setSorting, sortingFns: { - prioritySort: prioritySortFn, - reversedPrioritySort: reversedPrioritySortFn, + defaultSort: defaultSortFn, + reverseSort: reverseSortFn, }, getPaginationRowModel: getPaginationRowModel(), getCoreRowModel: getCoreRowModel(), getSortedRowModel: getSortedRowModel(), }); + // UseEffect useEffect(() => { sortingHandler(sorting); }, [sorting]); + // Handlers const toggleSortingHandler = (column) => { if (!column.getCanSort()) return; @@ -84,6 +92,7 @@ export default function EventsTable({columns, data, sortingHandler, routeHandler const ascIcon = ; const descIcon = ; + // Rendering return ( diff --git a/src/frontend/src/pages/EventsListPage.js b/src/frontend/src/pages/EventsListPage.js index ceb4fc21b..3b090b09b 100644 --- a/src/frontend/src/pages/EventsListPage.js +++ b/src/frontend/src/pages/EventsListPage.js @@ -50,7 +50,7 @@ export default function EventsListPage() { if (!events || (eventTimeStamp != newRouteTimestamp)) { dispatch(updateEvents({ list: await getEvents(route ? route.points : null), - routeTimeStamp: route ? route.searchTimestamp : null, + routeTimeStamp: newRouteTimestamp, timeStamp: new Date().getTime() })); } @@ -65,20 +65,20 @@ export default function EventsListPage() { { header: 'Type', accessorKey: 'display_category', -// sortingFn: 'prioritySort', + sortingFn: 'defaultSort', cell: (props) => , }, { header: 'Severity', accessorKey: 'severity', - sortingFn: 'reversedPrioritySort', + sortingFn: 'reverseSort', sortDescFirst: true, cell: (props) => {props.getValue().toLowerCase()}, }, { header: 'Road', accessorKey: 'route_at', -// sortingFn: 'prioritySort', + sortingFn: 'defaultSort', }, { header: 'Direction', @@ -117,24 +117,6 @@ export default function EventsListPage() { const [routeEdit, setRouteEdit] = useState(!(selectedRoute && selectedRoute.routeFound)); const [processedEvents, setProcessedEvents] = useState([]); - const [displayedEvents, setDisplayedEvents] = useState([]); - - const sortEvents = (unsortedEvents) => { - // Sort by severity by default - let sortKey = "severity"; - let descending = false; - - if (sortingColumns.length) { - const {id, desc} = sortingColumns[0]; - - sortKey = id; - descending = desc; - } - - unsortedEvents.sort((firstEvent, secondEvent) => { - return firstEvent[sortKey] > secondEvent[sortKey] ? (descending ? -1 : 1) : (descending ? 1 : -1); - }); - }; const processEvents = () => { const hasTrue = (val) => !!val; @@ -151,16 +133,9 @@ export default function EventsListPage() { } // Sort - sortEvents(res); - setProcessedEvents(res); }; - const getDisplayedEvents = (reset) => { - const res = processedEvents.slice(0, reset? 10 : displayedEvents.length + 10); - setDisplayedEvents(res); - }; - const handleRoute = (event) => { navigate('/', {state: event}); }; @@ -173,15 +148,11 @@ export default function EventsListPage() { } }, [selectedRoute]); - useEffect(() => { - getDisplayedEvents(true); - }, [processedEvents]); - useEffect(() => { if (events) { processEvents(); } - }, [events, eventCategoryFilter, sortingColumns]); + }, [events, eventCategoryFilter]); const eventCategoryFilterHandler = (targetCategory, check, lineToggle) => { if (!lineToggle) { @@ -199,13 +170,6 @@ export default function EventsListPage() { const largeScreen = useMediaQuery('only screen and (min-width : 768px)'); - // Workaround for DBC22-1090 - // https://github.com/TanStack/table/issues/3740 - const dupeLastRow = (arr) => { - const cpy = [...arr, arr[arr.length-1]]; - return cpy; - } - return (
{ events && !!events.length && ( - - - { largeScreen && displayedEvents.length > 0 && - +
+ { largeScreen && processedEvents.length > 0 && + } { !largeScreen &&
- { displayedEvents.map( + { processedEvents.map( (e) => (
handleRoute(e)}> } - +
)}