From f13eba6c219f53d2eb46dc8a02e677776eccc51d Mon Sep 17 00:00:00 2001 From: Amogh-Bharadwaj Date: Tue, 7 Nov 2023 02:31:36 -0500 Subject: [PATCH] better state management in tablemapping and search --- ui/app/dto/MirrorsDTO.ts | 1 + ui/app/mirrors/create/tablemapping.tsx | 135 ++++++++++++++----------- ui/components/Search.tsx | 17 ++-- 3 files changed, 83 insertions(+), 70 deletions(-) diff --git a/ui/app/dto/MirrorsDTO.ts b/ui/app/dto/MirrorsDTO.ts index e0f6486b10..b2561a4dda 100644 --- a/ui/app/dto/MirrorsDTO.ts +++ b/ui/app/dto/MirrorsDTO.ts @@ -17,4 +17,5 @@ export type TableMapRow = { source: string; destination: string; partitionKey: string; + selected: boolean; }; diff --git a/ui/app/mirrors/create/tablemapping.tsx b/ui/app/mirrors/create/tablemapping.tsx index 30e524626a..62826aecc6 100644 --- a/ui/app/mirrors/create/tablemapping.tsx +++ b/ui/app/mirrors/create/tablemapping.tsx @@ -34,51 +34,58 @@ const TableMapping = ({ setSchema, }: TableMappingProps) => { const [allSchemas, setAllSchemas] = useState(); - const [allTables, setAllTables] = useState(); + //const [allTables, setAllTables] = useState(); const [tableColumns, setTableColumns] = useState< { tableName: string; columns: string[] }[] >([]); const [loading, setLoading] = useState(false); const handleAddRow = (source: string) => { - setRows([...rows, { source, destination: source, partitionKey: '' }]); + // find the row with source and update the selected + const newRows = [...rows]; + const index = newRows.findIndex((row) => row.source === source); + if (index >= 0) newRows[index].selected = true; + else { + newRows.push({ + source, + destination: '', + partitionKey: '', + selected: true, + }); + } }; const handleRemoveRow = (source: string) => { const newRows = [...rows]; const index = newRows.findIndex((row) => row.source === source); - if (index >= 0) newRows.splice(index, 1); + if (index >= 0) newRows[index].selected = false; setRows(newRows); }; - const getRow = (source: string) => { - const newRows = [...rows]; - const row = newRows.find((row) => row.source === `${schema}.${source}`); - return row; - }; + // const getRow = (source: string) => { + // const newRows = [...rows]; + // const row = newRows.find((row) => row.source === `${schema}.${source}`); + // return row; + // }; const handleSelectAll = ( e: React.MouseEvent ) => { if (e.currentTarget.checked) { - const tableNames: TableMapRow[] | undefined = allTables?.map( - (tableName) => { - return { - source: `${schema}.${tableName}`, - destination: `${schema}.${tableName}`, - partitionKey: '', - }; - } - ); - setRows(tableNames ?? []); + // set selected for all rows to be true + const newRows = [...rows]; + newRows.forEach((_, i) => { + newRows[i].selected = true; + }); + setRows(newRows); } else setRows([]); }; const handleSwitch = (on: boolean, source: string) => { if (on) { - handleAddRow(`${schema}.${source}`); + handleAddRow(source); } else { - handleRemoveRow(`${schema}.${source}`); + handleRemoveRow(source); } }; @@ -99,28 +106,49 @@ const TableMapping = ({ const getTablesOfSchema = useCallback( (schemaName: string) => { - fetchTables(sourcePeerName, schemaName, setLoading).then((res) => - setAllTables(res) + fetchTables(sourcePeerName, schemaName, setLoading).then((tableNames) => + // for each tableName, add a row to `rows` state + setRows((curr) => { + const newRows = [...curr]; + tableNames.forEach((tableName) => { + const row = newRows.find( + (row) => row.source === `${schemaName}.${tableName}` + ); + if (!row) { + newRows.push({ + source: `${schemaName}.${tableName}`, + destination: `${schemaName}.${tableName}`, + partitionKey: '', + selected: false, + }); + } + }); + return newRows; + }) ); }, - [sourcePeerName] + [sourcePeerName, setRows] ); const [searchQuery, setSearchQuery] = useState(''); - useEffect(() => { - if (searchQuery.length > 0) { - setAllTables( - (curr) => - curr?.filter((table) => { - return table.toLowerCase().includes(searchQuery.toLowerCase()); - }) - ); - } - if (searchQuery.length == 0) { - getTablesOfSchema(schema); - } - }, [searchQuery, getTablesOfSchema]); + // useEffect(() => { + // if (searchQuery.length > 0) { + // setAllTables( + // (curr) => + // curr?.filter((table) => { + // return table.toLowerCase().includes(searchQuery.toLowerCase()); + // }) + // ); + // } + // if (searchQuery.length == 0) { + // getTablesOfSchema(schema); + // } + // }, [searchQuery, getTablesOfSchema]); + + const filteredRows = rows?.filter((row) => { + return row.source.toLowerCase().includes(searchQuery.toLowerCase()); + }); useEffect(() => { fetchSchemas(sourcePeerName, setLoading).then((res) => setAllSchemas(res)); @@ -179,8 +207,8 @@ const TableMapping = ({
- {allTables ? ( - allTables.map((sourceTableName, index) => ( + {filteredRows ? ( + filteredRows.map((row, index) => (
- handleSwitch(state, sourceTableName) + handleSwitch(state, row.source) } />
- {sourceTableName} + {row.source}
- {rows.find( - (row) => row.source === `${schema}.${sourceTableName}` - )?.destination && ( + {row.selected && (
- row.source === - `${schema}.${sourceTableName}` - )?.destination - } + defaultValue={row.destination} onChange={( e: React.ChangeEvent ) => - updateDestination( - `${schema}.${sourceTableName}`, - e.target.value - ) + updateDestination(row.source, e.target.value) } />
@@ -294,10 +312,7 @@ const TableMapping = ({ onChange={( e: React.ChangeEvent ) => - updatePartitionKey( - `${schema}.${sourceTableName}`, - e.target.value - ) + updatePartitionKey(row.source, e.target.value) } />
@@ -313,7 +328,7 @@ const TableMapping = ({ diff --git a/ui/components/Search.tsx b/ui/components/Search.tsx index cd7b917fc4..e7be28db60 100644 --- a/ui/components/Search.tsx +++ b/ui/components/Search.tsx @@ -1,29 +1,26 @@ import { SearchField } from '@/lib/SearchField'; -import { Dispatch, SetStateAction, useEffect, useState } from 'react'; +import { Dispatch, SetStateAction } from 'react'; interface SearchProps { allItems: any[]; setItems: Dispatch>; filterFunction: (query: string) => {}; } -const SearchBar = (props: SearchProps) => { - const [searchQuery, setSearchQuery] = useState(''); - - useEffect(() => { +const SearchBar = ({ allItems, setItems, filterFunction }: SearchProps) => { + const handleSearch = (searchQuery: string) => { if (searchQuery.length > 0) { - props.setItems(props.filterFunction(searchQuery)); + setItems(filterFunction(searchQuery)); } if (searchQuery.length == 0) { - props.setItems(props.allItems); + setItems(allItems); } - }, [searchQuery]); + }; return ( ) => - setSearchQuery(e.target.value) + handleSearch(e.target.value) } /> );