remove useSorting from task analysis table and task review table and make new compatible header

CollinBeczak · CollinBeczak · commit 12c1be6306fa · 2025-09-23T16:02:09.000-03:00
diff --git a/src/components/TableShared/EnhancedTable.jsx b/src/components/TableShared/EnhancedTable.jsx
@@ -159,6 +159,115 @@ export const renderTableHeader = (headerGroups) => {
   );
 };
 
+
+export const renderTableHeaderWithSorting = (headerGroups, props = {}) => {
+  const updateCriteria = props.updateCriteria || props.updateReviewTasks;
+  const currentCriteria = props.criteria || props.reviewCriteria;
+  const currentSort = currentCriteria?.sortCriteria;
+
+  return (
+    <>
+      {headerGroups.map((headerGroup, index) => (
+        <tr {...headerGroup.getHeaderGroupProps()} key={`header-row-${headerGroup.id || index}`}>
+          {headerGroup.headers.map((column) => {
+            const headerProps = column.getHeaderProps();
+
+            // Make sure to prevent click event conflicts
+            const onHeaderClick = (e) => {
+              if (!column.disableSortBy) {
+
+                if (!updateCriteria) return;
+
+                const currentSort = currentCriteria?.sortCriteria;
+                let newSortCriteria;
+                const columnId = column.id;
+                if (!currentSort || currentSort.sortBy !== columnId) {
+                  newSortCriteria = { sortBy: columnId, direction: "ASC" };
+                } else if (currentSort.direction === "ASC") {
+                  newSortCriteria = { sortBy: columnId, direction: "DESC" };
+                } else {
+                  newSortCriteria = { sortBy: "name", direction: "DESC" };
+                }
+
+                updateCriteria({ sortCriteria: newSortCriteria });
+              }
+            };
+
+            return (
+              <th
+                key={`header-cell-${column.id}`}
+                className={`${headerStyles} ${!column.disableSortBy ? sortableHeaderStyles : ""}`}
+                {...headerProps}
+                onClick={onHeaderClick}
+                style={{
+                  ...headerProps.style,
+                  width: column.width,
+                  minWidth: column.minWidth,
+                  position: "relative",
+                }}
+              >
+               <div className="mr-flex mr-items-center mr-flex-shrink-0 mr-ml-2">
+               <span>{column.render("Header")}</span>
+                    {!column.disableSortBy && (
+                      <span className="mr-opacity-70 mr-text-sm">
+                        {!(!currentSort || currentSort.sortBy !== column.id) ? (
+                          currentSort.direction === "DESC" ? (
+                            "▼"
+                          ) : (
+                            "▲"
+                          )
+                        ) : (
+                          <span className="mr-text-xs mr-opacity-50">↕</span>
+                        )}
+                      </span>
+                    )}
+                    {!column.disableResizing && (
+                      <div
+                        className="mr-resizer"
+                        {...column.getResizerProps()}
+                        onClick={(e) => {
+                          e.stopPropagation();
+                        }}
+                      />
+                    )}
+                  </div>
+              </th>
+            );
+          })}
+        </tr>
+      ))}
+
+      {/* Add a separate row for filters */}
+      {headerGroups.map((headerGroup, index) => (
+        <tr key={`filter-row-${headerGroup.id}-${index}`}>
+          {headerGroup.headers.map((column) => (
+            <td
+              key={`filter-cell-${column.id}`}
+              style={{
+                width: column.width,
+                minWidth: column.minWidth,
+              }}
+            >
+              {column.canFilter && (
+                <div
+                  className="mr-header-filter mr-mr-2"
+                  onClick={(e) => e.stopPropagation()}
+                  style={{
+                    overflow: "hidden",
+                    maxWidth: "100%",
+                  }}
+                >
+                  {column.render("Filter")}
+                </div>
+              )}
+            </td>
+          ))}
+        </tr>
+      ))}
+    </>
+  );
+};
+
 /**
  * A table wrapper component that adds horizontal scrolling
  */
diff --git a/src/components/TaskAnalysisTable/TaskAnalysisTable.jsx b/src/components/TaskAnalysisTable/TaskAnalysisTable.jsx
@@ -11,7 +11,6 @@ import {
   useExpanded,
   useFilters,
   useResizeColumns,
-  useSortBy,
   useTable,
 } from "react-table";
 import ConfigureColumnsModal from "../../components/ConfigureColumnsModal/ConfigureColumnsModal";
@@ -36,7 +35,7 @@ import {
   SearchFilter,
   TableWrapper,
   renderTableCell,
-  renderTableHeader,
+  renderTableHeaderWithSorting,
 } from "../TableShared/EnhancedTable";
 import { inputStyles, rowStyles, tableStyles } from "../TableShared/TableStyles";
 import ViewTask from "../ViewTask/ViewTask";
@@ -93,15 +92,8 @@ export const TaskAnalysisTableInternal = (props) => {
   const [showConfigureColumns, setShowConfigureColumns] = useState(false);
 
   const handleStateChange = useCallback(
-    ({ sortBy, filters }) => {
+    ({ filters }) => {
       const newCriteria = {
-        sortCriteria:
-          sortBy.length > 0
-            ? {
-                sortBy: sortBy[0].id,
-                direction: sortBy[0].desc ? "DESC" : "ASC",
-              }
-            : undefined,
         filters: filters.reduce((acc, filter) => {
           let value = filter.value;
 
@@ -135,29 +127,16 @@ export const TaskAnalysisTableInternal = (props) => {
     [props.updateCriteria, props.criteria],
   );
 
-  // Sort the data locally within the page (the backend does not do this for us, boo)
-  const data = useMemo(() => {
-    if (!props.taskData) return [];
-    if (!props.criteria?.sortCriteria) return props.taskData;
-
-    const { sortBy, direction } = props.criteria.sortCriteria;
-    const sorted = [...props.taskData].sort((a, b) => {
-      // Handle null/undefined values consistently in sorting
-      if (sortBy === "name") {
-        return (a.name || a.title)?.localeCompare(b.name || b.title) ?? 0;
-      } else if (sortBy === "reviewDuration") {
-        const getDuration = (t) => {
-          if (!t.reviewedAt || !t.reviewStartedAt) return 0;
-          return differenceInSeconds(parseISO(t.reviewedAt), parseISO(t.reviewStartedAt));
-        };
-        return getDuration(a) - getDuration(b);
-      } else {
-        return a[sortBy] < b[sortBy] ? -1 : a[sortBy] > b[sortBy] ? 1 : 0;
-      }
-    });
-
-    return direction === "DESC" ? sorted.reverse() : sorted;
-  }, [props.taskData, props.criteria?.sortCriteria]);
+  const data = useMemo(
+    () =>
+      (props.taskData || []).sort((a, b) => {
+        if (props.criteria?.sortCriteria?.direction === "DESC") {
+          return b[props.criteria?.sortCriteria?.sortBy] - a[props.criteria?.sortCriteria?.sortBy];
+        }
+        return a[props.criteria?.sortCriteria?.sortBy] - b[props.criteria?.sortCriteria?.sortBy];
+      }),
+    [props.taskData, props.criteria?.sortCriteria],
+  );
 
   const columnTypes = useMemo(() => {
     let taskBaseRoute = null;
@@ -227,15 +206,14 @@ export const TaskAnalysisTableInternal = (props) => {
     headerGroups,
     rows,
     prepareRow,
-    state: { sortBy, filters },
+    state: { filters },
   } = useTable(
     {
       columns,
       data,
       manualSortBy: true,
       manualFilters: true,
       manualPagination: true,
-      disableSortRemove: true,
       autoResetExpanded: false,
       defaultColumn: {
         Filter: () => null,
@@ -247,29 +225,21 @@ export const TaskAnalysisTableInternal = (props) => {
           id,
           value,
         })),
-        sortBy: props.criteria?.sortCriteria
-          ? [
-              {
-                id: props.criteria.sortCriteria.sortBy,
-                desc: props.criteria.sortCriteria.direction === "DESC",
-              },
-            ]
-          : [],
       },
+      autoResetSortBy: false,
       disableResizing: false,
       disableMultiSort: true,
       columnResizeMode: "onEnd",
     },
     useFilters,
-    useSortBy,
     useResizeColumns,
     useExpanded,
   );
 
   // Update parent when table state changes
   useEffect(() => {
-    handleStateChange({ sortBy, filters });
-  }, [sortBy, filters]);
+    handleStateChange({ filters });
+  }, [filters]);
 
   return (
     <Fragment>
@@ -291,7 +261,7 @@ export const TaskAnalysisTableInternal = (props) => {
         )}
         <TableWrapper>
           <table {...getTableProps()} className={tableStyles}>
-            <thead>{renderTableHeader(headerGroups)}</thead>
+            <thead>{renderTableHeaderWithSorting(headerGroups, props)}</thead>
             <tbody {...getTableBodyProps()}>
               {rows.map((row) => {
                 prepareRow(row);
diff --git a/src/pages/Review/TasksReview/TasksReviewTable.jsx b/src/pages/Review/TasksReview/TasksReviewTable.jsx
@@ -11,7 +11,7 @@ import _pull from "lodash/pull";
 import { Fragment, useCallback, useEffect, useMemo, useState } from "react";
 import { FormattedDate, FormattedMessage, FormattedTime } from "react-intl";
 import { Link } from "react-router-dom";
-import { useFilters, useResizeColumns, useSortBy, useTable } from "react-table";
+import { useFilters, useResizeColumns, useTable } from "react-table";
 import ConfigureColumnsModal from "../../../components/ConfigureColumnsModal/ConfigureColumnsModal";
 import Dropdown from "../../../components/Dropdown/Dropdown";
 import MapPane from "../../../components/EnhancedMap/MapPane/MapPane";
@@ -27,7 +27,7 @@ import SvgSymbol from "../../../components/SvgSymbol/SvgSymbol";
 import {
   SearchFilter,
   TableWrapper,
-  renderTableHeader,
+  renderTableHeaderWithSorting,
 } from "../../../components/TableShared/EnhancedTable";
 import {
   cellStyles,
@@ -252,7 +252,6 @@ export const TaskReviewTable = (props) => {
       columnResizeMode: "onEnd",
     },
     useFilters,
-    useSortBy,
     useResizeColumns,
   );
 
@@ -517,7 +516,7 @@ export const TaskReviewTable = (props) => {
           )}
           <TableWrapper>
             <table {...getTableProps()} className={tableStyles}>
-              <thead>{renderTableHeader(headerGroups)}</thead>
+              <thead>{renderTableHeaderWithSorting(headerGroups, props)}</thead>
               <tbody {...getTableBodyProps()}>
                 {rows.map((row) => {
                   prepareRow(row);
