lint for sort

PeerDB-io · Nov 15, 2023 · 9d37414 · 9d37414
1 parent 7a54a92
commit 9d37414
Show file tree

Hide file tree

Showing 2 changed files with 43 additions and 25 deletions.
diff --git a/ui/app/mirrors/edit/[mirrorId]/cdc.tsx b/ui/app/mirrors/edit/[mirrorId]/cdc.tsx
@@ -99,7 +99,9 @@ type SnapshotStatusProps = {
 const ROWS_PER_PAGE = 6;
 export const SnapshotStatusTable = ({ status }: SnapshotStatusProps) => {
   const allRows = status.clones.map(summarizeTableClone);
-
+  const [sortField, setSortField] = useState<
+    'cloneStartTime' | 'avgTimePerPartition'
+  >('cloneStartTime');
   const [currentPage, setCurrentPage] = useState(1);
   const totalPages = Math.ceil(allRows.length / ROWS_PER_PAGE);
 
@@ -127,11 +129,11 @@ export const SnapshotStatusTable = ({ status }: SnapshotStatusProps) => {
   };
 
   const handleSort = useCallback(
-    (sortField: 'cloneStartTime' | 'avgTimePerPartition') => {
+    (sortOption: 'cloneStartTime' | 'avgTimePerPartition') => {
       setDisplayedRows((currRows) =>
         [...currRows].sort((a, b) => {
-          const aValue = a[sortField];
-          const bValue = b[sortField];
+          const aValue = a[sortOption];
+          const bValue = b[sortOption];
           if (aValue === null || bValue === null) {
             return 0;
           }
@@ -150,9 +152,13 @@ export const SnapshotStatusTable = ({ status }: SnapshotStatusProps) => {
   );
 
   useEffect(() => {
-    handleSort('cloneStartTime');
-  }, [handleSort]);
+    handleSort(sortField);
+  }, [handleSort, currentPage, sortField]);
 
+  const sortOptions = [
+    { value: 'cloneStartTime', label: 'Start Time' },
+    { value: 'avgTimePerPartition', label: 'Time Per Partition' },
+  ];
   return (
     <div style={{ marginTop: '2rem' }}>
       <Table
@@ -174,16 +180,19 @@ export const SnapshotStatusTable = ({ status }: SnapshotStatusProps) => {
                 <Icon name='refresh' />
               </Button>
               <ReactSelect
-                options={[
-                  { value: 'cloneStartTime', label: 'Start Time' },
-                  { value: 'avgTimePerPartition', label: 'Time Per Partition' },
-                ]}
-                onChange={(val, _) =>
-                  handleSort(
+                options={sortOptions}
+                onChange={(val, _) => {
+                  const sortVal =
                     (val?.value as 'cloneStartTime' | 'avgTimePerPartition') ??
-                      'cloneStartTime'
-                  )
-                }
+                    'cloneStartTime';
+                  setSortField(sortVal);
+                  handleSort(sortVal);
+                }}
+                value={{
+                  value: sortField,
+                  label: sortOptions.find((opt) => opt.value === sortField)
+                    ?.label,
+                }}
                 defaultValue={{ value: 'cloneStartTime', label: 'Start Time' }}
               />
             </>

diff --git a/ui/app/mirrors/edit/[mirrorId]/syncStatusTable.tsx b/ui/app/mirrors/edit/[mirrorId]/syncStatusTable.tsx
@@ -56,6 +56,9 @@ const sortOptions = [
 ];
 export const SyncStatusTable = ({ rows }: SyncStatusTableProps) => {
   const [currentPage, setCurrentPage] = useState(1);
+  const [sortField, setSortField] = useState<
+    'startTime' | 'endTime' | 'numRows'
+  >('startTime');
   const totalPages = Math.ceil(rows.length / ROWS_PER_PAGE);
 
   const startRow = (currentPage - 1) * ROWS_PER_PAGE;
@@ -83,11 +86,11 @@ export const SyncStatusTable = ({ rows }: SyncStatusTableProps) => {
   };
 
   const handleSort = useCallback(
-    (sortField: 'startTime' | 'endTime' | 'numRows') => {
+    (sortOption: 'startTime' | 'endTime' | 'numRows') => {
       setDisplayedRows((currRows) =>
         [...currRows].sort((a, b) => {
-          const aValue = a[sortField];
-          const bValue = b[sortField];
+          const aValue = a[sortOption];
+          const bValue = b[sortOption];
           if (aValue === null || bValue === null) {
             return 0;
           }
@@ -106,8 +109,8 @@ export const SyncStatusTable = ({ rows }: SyncStatusTableProps) => {
   );
 
   useEffect(() => {
-    handleSort('startTime');
-  }, [handleSort]);
+    handleSort(sortField);
+  }, [handleSort, currentPage, sortField]);
 
   return (
     <Table
@@ -130,12 +133,18 @@ export const SyncStatusTable = ({ rows }: SyncStatusTableProps) => {
             </Button>
             <ReactSelect
               options={sortOptions}
-              onChange={(val, _) =>
-                handleSort(
+              value={{
+                value: sortField,
+                label: sortOptions.find((opt) => opt.value === sortField)
+                  ?.label,
+              }}
+              onChange={(val, _) => {
+                const sortVal =
                   (val?.value as 'startTime' | 'endTime' | 'numRows') ??
-                    'startTime'
-                )
-              }
+                  'startTime';
+                setSortField(sortVal);
+                handleSort(sortVal);
+              }}
               defaultValue={{ value: 'startTime', label: 'Start Time' }}
             />
           </>