Skip to content

Commit

Permalink
better state management in tablemapping and search
Browse files Browse the repository at this point in the history
  • Loading branch information
@Amogh-Bharadwaj
Amogh-Bharadwaj committed Nov 7, 2023
1 parent 5b8d16b commit f13eba6
Show file tree
Hide file tree
Showing 3 changed files with 83 additions and 70 deletions.
1 change: 1 addition & 0 deletions ui/app/dto/MirrorsDTO.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,4 +17,5 @@ export type TableMapRow = {
source: string;
destination: string;
partitionKey: string;
selected: boolean;
};
135 changes: 75 additions & 60 deletions ui/app/mirrors/create/tablemapping.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,51 +34,58 @@ const TableMapping = ({
setSchema,
}: TableMappingProps) => {
const [allSchemas, setAllSchemas] = useState<string[]>();
const [allTables, setAllTables] = useState<string[]>();
//const [allTables, setAllTables] = useState<string[]>();
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<HTMLInputElement, 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);
}
};

Expand All @@ -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));
Expand Down Expand Up @@ -179,8 +207,8 @@ const TableMapping = ({
</div>
</div>
<div style={{ maxHeight: '40vh', overflow: 'scroll' }}>
{allTables ? (
allTables.map((sourceTableName, index) => (
{filteredRows ? (
filteredRows.map((row, index) => (
<div
key={index}
style={{
Expand All @@ -205,9 +233,9 @@ const TableMapping = ({
<div>
<div style={{ display: 'flex', alignItems: 'center' }}>
<Switch
checked={!!getRow(sourceTableName)}
checked={row.selected}
onCheckedChange={(state: boolean) =>
handleSwitch(state, sourceTableName)
handleSwitch(state, row.source)
}
/>
<div
Expand All @@ -220,14 +248,13 @@ const TableMapping = ({
whiteSpace: 'nowrap',
}}
>
{sourceTableName}
{row.source}
</div>
</div>
{rows.find(
(row) => row.source === `${schema}.${sourceTableName}`
)?.destination && (
{row.selected && (
<div style={{ padding: '0.5rem' }}>
<RowWithTextField
key={row.source}
label={
<div
style={{
Expand All @@ -250,20 +277,11 @@ const TableMapping = ({
>
<TextField
variant='simple'
defaultValue={
rows.find(
(row) =>
row.source ===
`${schema}.${sourceTableName}`
)?.destination
}
defaultValue={row.destination}
onChange={(
e: React.ChangeEvent<HTMLInputElement>
) =>
updateDestination(
`${schema}.${sourceTableName}`,
e.target.value
)
updateDestination(row.source, e.target.value)
}
/>
</div>
Expand Down Expand Up @@ -294,10 +312,7 @@ const TableMapping = ({
onChange={(
e: React.ChangeEvent<HTMLInputElement>
) =>
updatePartitionKey(
`${schema}.${sourceTableName}`,
e.target.value
)
updatePartitionKey(row.source, e.target.value)
}
/>
</div>
Expand All @@ -313,7 +328,7 @@ const TableMapping = ({
<ColumnsDisplay
peerName={sourcePeerName}
schemaName={schema}
tableName={sourceTableName}
tableName={row.source.split('.')[1]}
setColumns={setTableColumns}
columns={tableColumns}
/>
Expand Down
17 changes: 7 additions & 10 deletions ui/components/Search.tsx
View file
Original file line number Diff line number Diff line change
@@ -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<SetStateAction<any>>;
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 (
<SearchField
placeholder='Search'
value={searchQuery}
onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
setSearchQuery(e.target.value)
handleSearch(e.target.value)
}
/>
);
Expand Down

0 comments on commit f13eba6

Please sign in to comment.