DBC22-1727: removed infinite scroll, custom sort function

bcgov · Feb 23, 2024 · 6f2f50e · 6f2f50e
1 parent 95b06e5
commit 6f2f50e
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 66 deletions.
diff --git 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 = <FontAwesomeIcon icon={faArrowUpLong} alt="ascending order" />;
   const descIcon = <FontAwesomeIcon icon={faArrowDownLong} alt="descending order" />;
 
+  // Rendering
   return (
     <table>
       <thead>

diff --git 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) => <EventTypeIcon event={props.row.original} />,
     },
     {
       header: 'Severity',
       accessorKey: 'severity',
-      sortingFn: 'reversedPrioritySort',
+      sortingFn: 'reverseSort',
       sortDescFirst: true,
       cell: (props) => <span>{props.getValue().toLowerCase()}</span>,
     },
     {
       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 (
     <div className="events-page">
       <PageHeader
@@ -233,18 +197,14 @@ export default function EventsListPage() {
         </div>
 
         { events && !!events.length && (
-          <InfiniteScroll
-            dataLength={displayedEvents.length}
-            next={getDisplayedEvents}
-            hasMore={displayedEvents.length < processedEvents.length}>
-
-            { largeScreen && displayedEvents.length > 0 &&
-              <EventsTable columns={columns} data={dupeLastRow(displayedEvents)} sortingHandler={setSortingColumns} routeHandler={handleRoute} />
+          <div>
+            { largeScreen && processedEvents.length > 0 &&
+              <EventsTable columns={columns} data={processedEvents} sortingHandler={setSortingColumns} routeHandler={handleRoute} />
             }
 
             { !largeScreen &&
               <div className="events-list">
-                { displayedEvents.map(
+                { processedEvents.map(
                   (e) => (
                     <div className="card-selector" key={e.id} onClick={() => handleRoute(e)}>
                       <EventCard
@@ -257,7 +217,7 @@ export default function EventsListPage() {
                 )}
               </div>
             }
-          </InfiniteScroll>
+          </div>
         )}
       </Container>