Avoid mutating react state, change exclude from string[] to Set<string>

Also have /mirrors/errors link to /mirrors/edit
PeerDB-io · Jan 24, 2024 · 07f4551 · 07f4551
1 parent 23a97b1
commit 07f4551
Show file tree

Hide file tree

Showing 7 changed files with 33 additions and 34 deletions.
diff --git a/ui/app/dto/MirrorsDTO.ts b/ui/app/dto/MirrorsDTO.ts
@@ -23,7 +23,7 @@ export type TableMapRow = {
   source: string;
   destination: string;
   partitionKey: string;
-  exclude: string[];
+  exclude: Set<string>;
   selected: boolean;
   canMirror: boolean;
 };

diff --git a/ui/app/mirrors/create/cdc/columnbox.tsx b/ui/app/mirrors/create/cdc/columnbox.tsx
@@ -23,18 +23,21 @@ export default function ColumnBox({
     include: boolean
   ) => {
     const currRows = [...rows];
-    const rowOfSource = currRows.find((row) => row.source === source);
-    if (rowOfSource) {
+    const rowIndex = currRows.findIndex((row) => row.source === source);
+    if (rowIndex !== -1) {
+      const sourceRow = currRows[rowIndex],
+        newExclude = new Set(sourceRow.exclude);
       if (include) {
-        const updatedExclude = rowOfSource.exclude.filter(
-          (col) => col !== column
-        );
-        rowOfSource.exclude = updatedExclude;
+        newExclude.delete(column);
       } else {
-        rowOfSource.exclude.push(column);
+        newExclude.add(column);
       }
+      currRows[rowIndex] = {
+        ...sourceRow,
+        exclude: newExclude,
+      };
+      setRows(currRows);
     }
-    setRows(currRows);
   };
 
   const columnExclusion = new Set(tableRow.exclude);

diff --git a/ui/app/mirrors/create/cdc/schemabox.tsx b/ui/app/mirrors/create/cdc/schemabox.tsx
@@ -50,8 +50,6 @@ const SchemaBox = ({
   const [expandedSchemas, setExpandedSchemas] = useState<string[]>([]);
   const [tableQuery, setTableQuery] = useState<string>('');
 
-  const [handlingAll, setHandlingAll] = useState(false);
-
   const searchedTables = useMemo(() => {
     const tableQueryLower = tableQuery.toLowerCase();
     return rows
@@ -125,17 +123,16 @@ const SchemaBox = ({
     e: React.MouseEvent<HTMLInputElement, MouseEvent>,
     schemaName: string
   ) => {
-    setHandlingAll(true);
     const newRows = [...rows];
-    for (const row of newRows) {
+    for (let i = 0; i < newRows.length; i++) {
+      const row = newRows[i];
       if (row.schema === schemaName) {
-        row.selected = e.currentTarget.checked;
+        newRows[i] = { ...row, selected: e.currentTarget.checked };
         if (e.currentTarget.checked) addTableColumns(row.source);
         else removeTableColumns(row.source);
       }
     }
     setRows(newRows);
-    setHandlingAll(false);
   };
 
   const rowsDoNotHaveSchemaTables = (schema: string) => {
@@ -199,8 +196,7 @@ const SchemaBox = ({
           </div>
         </div>
         {/* TABLE BOX */}
-        {handlingAll && <BarLoader />}
-        {!handlingAll && schemaIsExpanded(schema) && (
+        {schemaIsExpanded(schema) && (
           <div className='ml-5 mt-3' style={{ width: '90%' }}>
             {searchedTables.length ? (
               searchedTables.map((row) => {

diff --git a/ui/app/mirrors/create/handlers.ts b/ui/app/mirrors/create/handlers.ts
@@ -143,17 +143,13 @@ interface TableMapping {
 }
 const reformattedTableMapping = (tableMapping: TableMapRow[]) => {
   const mapping = tableMapping
-    .map((row) => {
-      if (row?.selected === true) {
-        return {
-          sourceTableIdentifier: row.source,
-          destinationTableIdentifier: row.destination,
-          partitionKey: row.partitionKey,
-          exclude: row.exclude,
-        };
-      }
-    })
-    .filter(Boolean);
+    .filter((row) => row?.selected === true)
+    .map((row) => ({
+      sourceTableIdentifier: row.source,
+      destinationTableIdentifier: row.destination,
+      partitionKey: row.partitionKey,
+      exclude: Array.from(row.exclude),
+    }));
   return mapping;
 };
 
@@ -306,7 +302,7 @@ export const fetchTables = async (
         source: `${schemaName}.${tableObject.tableName}`,
         destination: dstName,
         partitionKey: '',
-        exclude: [],
+        exclude: new Set(),
         selected: false,
         canMirror: tableObject.canMirror,
       });

diff --git a/ui/app/mirrors/create/mirrorcards.tsx b/ui/app/mirrors/create/mirrorcards.tsx
@@ -41,9 +41,10 @@ const MirrorCards = ({
       >
         {cards.map((card, index) => {
           return (
-            <div
+            <label
               key={index}
               style={{
+                display: 'block',
                 padding: '0.5rem',
                 width: '35%',
                 minHeight: '22vh',
@@ -79,7 +80,7 @@ const MirrorCards = ({
               >
                 Learn more
               </Label>
-            </div>
+            </label>
           );
         })}
       </div>

diff --git a/ui/app/mirrors/errors/[mirrorName]/page.tsx b/ui/app/mirrors/errors/[mirrorName]/page.tsx
@@ -86,7 +86,11 @@ export default function MirrorError() {
           <Label variant='body'>
             <b>Mirror name</b>:
           </Label>
-          <Label variant='body'>{params.mirrorName}</Label>
+          <Label variant='body'>
+            <a href={`/mirrors/edit/${params.mirrorName}`}>
+              {params.mirrorName}
+            </a>
+          </Label>
 
           <div>
             <Label as='label' style={{ fontSize: 14, marginTop: '1rem' }}>

diff --git a/ui/app/mirrors/status/qrep/[mirrorId]/qrepStatusTable.tsx b/ui/app/mirrors/status/qrep/[mirrorId]/qrepStatusTable.tsx
@@ -100,8 +100,7 @@ export default function QRepStatusTable({
   );
   const [sortDir, setSortDir] = useState<'asc' | 'dsc'>('dsc');
   const displayedPartitions = useMemo(() => {
-    let currentPartitions = [...visiblePartitions];
-    currentPartitions = currentPartitions.filter(
+    const currentPartitions = visiblePartitions.filter(
       (partition: QRepPartitionStatus) => {
         return partition.partitionId
           .toLowerCase()