lint

PeerDB-io · Nov 15, 2023 · 1979db7 · 1979db7
1 parent 09d3d0f
commit 1979db7
Show file tree

Hide file tree

Showing 2 changed files with 50 additions and 47 deletions.
diff --git a/ui/app/mirrors/edit/[mirrorId]/cdc.tsx b/ui/app/mirrors/edit/[mirrorId]/cdc.tsx
@@ -15,7 +15,7 @@ import { Table, TableCell, TableRow } from '@/lib/Table';
 import * as Tabs from '@radix-ui/react-tabs';
 import moment, { Duration, Moment } from 'moment';
 import Link from 'next/link';
-import { useEffect, useState } from 'react';
+import { useCallback, useEffect, useState } from 'react';
 import ReactSelect from 'react-select';
 import styled from 'styled-components';
 import CdcDetails from './cdcDetails';
@@ -126,28 +126,32 @@ export const SnapshotStatusTable = ({ status }: SnapshotStatusProps) => {
     }
   };
 
-  const handleSort = (sortField: 'cloneStartTime' | 'avgTimePerPartition') => {
-    const sortedRows = [...displayedRows].sort((a, b) => {
-      const aValue = a[sortField];
-      const bValue = b[sortField];
-      if (aValue === null || bValue === null) {
-        return 0;
-      }
+  const handleSort = useCallback(
+    (sortField: 'cloneStartTime' | 'avgTimePerPartition') => {
+      setDisplayedRows((currRows) =>
+        [...currRows].sort((a, b) => {
+          const aValue = a[sortField];
+          const bValue = b[sortField];
+          if (aValue === null || bValue === null) {
+            return 0;
+          }
 
-      if (aValue < bValue) {
-        return -1;
-      } else if (aValue > bValue) {
-        return 1;
-      } else {
-        return 0;
-      }
-    });
-    setDisplayedRows(sortedRows);
-  };
+          if (aValue < bValue) {
+            return -1;
+          } else if (aValue > bValue) {
+            return 1;
+          } else {
+            return 0;
+          }
+        })
+      );
+    },
+    [setDisplayedRows]
+  );
 
   useEffect(() => {
     handleSort('cloneStartTime');
-  }, []);
+  }, [handleSort]);
 
   return (
     <div style={{ marginTop: '2rem' }}>
@@ -221,16 +225,11 @@ export const SnapshotStatusTable = ({ status }: SnapshotStatusProps) => {
               </Label>
             </TableCell>
             <TableCell>
-              <Label>
-                {
-                  <TimeLabel
-                    timeVal={
-                      clone.cloneStartTime?.format('YYYY-MM-DD HH:mm:ss') ||
-                      'N/A'
-                    }
-                  />
+              <TimeLabel
+                timeVal={
+                  clone.cloneStartTime?.format('YYYY-MM-DD HH:mm:ss') || 'N/A'
                 }
-              </Label>
+              />
             </TableCell>
             <TableCell>
               <ProgressBar progress={clone.getPartitionProgressPercentage()} />

diff --git a/ui/app/mirrors/edit/[mirrorId]/syncStatusTable.tsx b/ui/app/mirrors/edit/[mirrorId]/syncStatusTable.tsx
@@ -8,7 +8,7 @@ import { Label } from '@/lib/Label';
 import { ProgressCircle } from '@/lib/ProgressCircle';
 import { Table, TableCell, TableRow } from '@/lib/Table';
 import moment from 'moment';
-import { useEffect, useState } from 'react';
+import { useCallback, useEffect, useState } from 'react';
 import ReactSelect from 'react-select';
 type SyncStatusRow = {
   batchId: number;
@@ -82,28 +82,32 @@ export const SyncStatusTable = ({ rows }: SyncStatusTableProps) => {
     }
   };
 
-  const handleSort = (sortField: 'startTime' | 'endTime' | 'numRows') => {
-    const sortedRows = [...displayedRows].sort((a, b) => {
-      const aValue = a[sortField];
-      const bValue = b[sortField];
-      if (aValue === null || bValue === null) {
-        return 0;
-      }
+  const handleSort = useCallback(
+    (sortField: 'startTime' | 'endTime' | 'numRows') => {
+      setDisplayedRows((currRows) =>
+        [...currRows].sort((a, b) => {
+          const aValue = a[sortField];
+          const bValue = b[sortField];
+          if (aValue === null || bValue === null) {
+            return 0;
+          }
 
-      if (aValue < bValue) {
-        return -1;
-      } else if (aValue > bValue) {
-        return 1;
-      } else {
-        return 0;
-      }
-    });
-    setDisplayedRows(sortedRows);
-  };
+          if (aValue < bValue) {
+            return -1;
+          } else if (aValue > bValue) {
+            return 1;
+          } else {
+            return 0;
+          }
+        })
+      );
+    },
+    [setDisplayedRows]
+  );
 
   useEffect(() => {
     handleSort('startTime');
-  }, []);
+  }, [handleSort]);
 
   return (
     <Table