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)}>
}
-
+
)}