tablepicker: insert as unique rows

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

@@ -7,6 +7,7 @@ import { Label } from '@/lib/Label';
 import { RowWithCheckbox } from '@/lib/Layout';
 import { SearchField } from '@/lib/SearchField';
 import { TextField } from '@/lib/TextField';
+import _ from 'lodash';
 import {
   Dispatch,
   SetStateAction,
@@ -43,9 +44,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);
 
@@ -136,14 +134,11 @@ const SchemaBox = ({
   const handleSchemaClick = (schemaName: string) => {
     if (!schemaIsExpanded(schemaName)) {
       setExpandedSchemas((curr) => [...curr, schemaName]);
-      if (!schemaLoadedSet.has(schemaName)) {
-        setTablesLoading(true);
-        setSchemaLoadedSet((loaded) => new Set(loaded).add(schemaName));
-        fetchTables(sourcePeer, schemaName, peerType).then((tableRows) => {
-          setRows((value) => [...value, ...tableRows]);
-          setTablesLoading(false);
-        });
-      }
+      setTablesLoading(true);
+      fetchTables(sourcePeer, schemaName, peerType).then((tableRows) => {
+        setRows((value) => _.uniqWith([...value, ...tableRows], _.isEqual));
+        setTablesLoading(false);
+      });
     } else {
       setExpandedSchemas((curr) =>
         curr.filter((expandedSchema) => expandedSchema != schemaName)

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%' />

ui/package.json

@@ -37,6 +37,7 @@
     "@types/react-dom": "^18.2.18",
     "classnames": "^2.3.3",
     "clsx": "^2.0.0",
+    "lodash": "^4.17.21",
     "long": "^5.2.3",
     "lucide-react": "^0.302.0",
     "material-symbols": "^0.14.3",