UI: add tables as unique rows

ui/app/mirrors/create/cdc/schemabox.tsx

@@ -43,9 +43,6 @@ const SchemaBox = ({
   const [columnsLoading, setColumnsLoading] = useState(false);
   const [expandedSchemas, setExpandedSchemas] = useState<string[]>([]);
   const [tableQuery, setTableQuery] = useState<string>('');
-  const [schemaLoadedSet, setSchemaLoadedSet] = useState<Set<string>>(
-    new Set()
-  );
 
   const [handlingAll, setHandlingAll] = useState(false);
 
@@ -133,14 +130,21 @@ const SchemaBox = ({
     setHandlingAll(false);
   };
 
+  const rowsDoNotHaveSchemaTables = (schema: string) => {
+    return !rows.some((row) => row.schema === schema);
+  };
+
   const handleSchemaClick = (schemaName: string) => {
     if (!schemaIsExpanded(schemaName)) {
       setExpandedSchemas((curr) => [...curr, schemaName]);
-      if (!schemaLoadedSet.has(schemaName)) {
+
+      if (rowsDoNotHaveSchemaTables(schemaName)) {
         setTablesLoading(true);
-        setSchemaLoadedSet((loaded) => new Set(loaded).add(schemaName));
-        fetchTables(sourcePeer, schemaName, peerType).then((tableRows) => {
-          setRows((value) => [...value, ...tableRows]);
+        fetchTables(sourcePeer, schemaName, peerType).then((newRows) => {
+          setRows((oldRows) => [
+            ...oldRows.filter((oldRow) => oldRow.schema !== schema),
+            ...newRows,
+          ]);
           setTablesLoading(false);
         });
       }

ui/app/mirrors/create/cdc/tablemapping.tsx

@@ -2,7 +2,7 @@
 import { DBType } from '@/grpc_generated/peers';
 import { Label } from '@/lib/Label';
 import { SearchField } from '@/lib/SearchField';
-import { Dispatch, SetStateAction, useEffect, useState } from 'react';
+import { Dispatch, SetStateAction, useEffect, useMemo, useState } from 'react';
 import { BarLoader } from 'react-spinners/';
 import { TableMapRow } from '../../../dto/MirrorsDTO';
 import { fetchSchemas } from '../handlers';
@@ -27,6 +27,12 @@ const TableMapping = ({
   const [tableColumns, setTableColumns] = useState<
     { tableName: string; columns: string[] }[]
   >([]);
+  const searchedSchemas = useMemo(() => {
+    return allSchemas?.filter((schema) => {
+      return schema.toLowerCase().includes(schemaQuery.toLowerCase());
+    });
+  }, [allSchemas, schemaQuery]);
+
   useEffect(() => {
     fetchSchemas(sourcePeerName).then((res) => setAllSchemas(res));
   }, [sourcePeerName]);
@@ -56,23 +62,19 @@ const TableMapping = ({
         </div>
       </div>
       <div style={{ maxHeight: '70vh', overflow: 'scroll' }}>
-        {allSchemas ? (
-          allSchemas
-            ?.filter((schema) => {
-              return schema.toLowerCase().includes(schemaQuery.toLowerCase());
-            })
-            .map((schema) => (
-              <SchemaBox
-                key={schema}
-                schema={schema}
-                sourcePeer={sourcePeerName}
-                rows={rows}
-                setRows={setRows}
-                tableColumns={tableColumns}
-                setTableColumns={setTableColumns}
-                peerType={peerType}
-              />
-            ))
+        {searchedSchemas ? (
+          searchedSchemas.map((schema) => (
+            <SchemaBox
+              key={schema}
+              schema={schema}
+              sourcePeer={sourcePeerName}
+              rows={rows}
+              setRows={setRows}
+              tableColumns={tableColumns}
+              setTableColumns={setTableColumns}
+              peerType={peerType}
+            />
+          ))
         ) : (
           <div style={loaderContainer}>
             <BarLoader color='#36d7b7' width='40%' />