Since it is very common that we use different states to render components conditionally line f codes we write becomes more increasing complexity of the codebase.
Is there a better way to manage this issue.
Below code snippet depits a lines of codes I need to rewrite where I need to render different tables conditionally on the same page.
import TableContainer from '@mui/material/TableContainer';
import TablePagination from '@mui/material/TablePagination';
import { Tab, Tabs } from '@mui/material';
import { _users } from 'src/_mock';
import { DashboardContent } from 'src/layouts/dashboard';
import { Iconify } from 'src/components/iconify';
import { Scrollbar } from 'src/components/scrollbar';
import { TableNoData } from '../table-no-data';
import { UserTableRow } from '../user-table-row';
import { UserTableHead } from '../user-table-head';
import { TableEmptyRows } from '../table-empty-rows';
import { UserTableToolbar } from '../user-table-toolbar';
import { emptyRows, applyFilter, getComparator } from '../utils';
import type { CustomerProps} from '../user-table-row';
// ----------------------------------------------------------------------
export function CustomerView() {
const table = useTable();
const [value,setValue] =useState("one")
const handleChange = (event: React.SyntheticEvent, newValue: string) => {
setValue(newValue);
};
const { data, loading, error } = useSelector((state: RootState) => state.customers);
const dispatch = useDispatch<ThunkDispatch<any, any, any>>();
useEffect(() => {
dispatch(fetchCustomersThunk());
}, [dispatch]);
console.log(data);
const [filterName, setFilterName] = useState('');
const dataFiltered: CustomerProps[] = applyFilter({
inputData: data,
comparator: getComparator(table.order, table.orderBy),
filterName,
});
const notFound = !dataFiltered.length && !!filterName;
return (
<DashboardContent>
<Box display="flex" alignItems="center" mb={5}>
<Typography variant="h4" flexGrow={1}>
Customers
</Typography>
<Button
variant="contained"
color="inherit"
startIcon={<Iconify icon="mingcute:add-line" />}
>
New user
</Button>
</Box>
<Card>
<Card sx={{ display: 'flex', justifyContent: 'space-between', borderRadius: '0' }}>
<Box sx={{ width: '100%' }}>
<Box sx={{ borderBottom: 0, borderColor: 'divider' }}>
<Tabs
onChange={handleChange}
value={value}
textColor="primary"
aria-label="basic tabs example"
>
<Tab value="one" sx={{ backgroundColor: 'disabled' }} label="All customers" />
<Tab value="two" label="Agent customers" />
</Tabs>
</Box>
</Box>
<UserTableToolbar
numSelected={table.selected.length}
filterName={filterName}
onFilterName={(event: React.ChangeEvent<HTMLInputElement>) => {
setFilterName(event.target.value);
table.onResetPage();
}}
/>
</Card>
<Scrollbar>
<TableContainer sx={{ overflow: 'unset' }}>
<Table sx={{ minWidth: 800, fontSize: '1px' }}>
<UserTableHead
order={table.order}
orderBy={table.orderBy}
rowCount={_users.length}
numSelected={table.selected.length}
onSort={table.onSort}
onSelectAllRows={(checked) =>
table.onSelectAllRows(
checked,
_users.map((user) => user.id)
)
}
headLabel={[
{ id: 'id', label: 'ID' },
{ id: 'name', label: 'User Name' },
{ id: 'email', label: 'Email' },
{ id: 'mobile', label: 'Mobile Number' },
{ id: 'agent?', label: 'Is agent' },
]}
/>
<TableBody>
{dataFiltered
.slice(
table.page * table.rowsPerPage,
table.page * table.rowsPerPage + table.rowsPerPage
)
.map((row) => (
<UserTableRow
key={row.cus_id}
row={row}
selected={table.selected.includes(row.cus_id)}
onSelectRow={() => table.onSelectRow(row.cus_id)}
/>
))}
<TableEmptyRows
height={68}
emptyRows={emptyRows(table.page, table.rowsPerPage, _users.length)}
/>
{notFound && <TableNoData searchQuery={filterName} />}
</TableBody>
</Table>
</TableContainer>
</Scrollbar>
<TablePagination
component="div"
page={table.page}
count={_users.length}
rowsPerPage={table.rowsPerPage}
onPageChange={table.onChangePage}
rowsPerPageOptions={[5, 10, 25, 100]}
onRowsPerPageChange={table.onChangeRowsPerPage}
/>
</Card>
</DashboardContent>
);
}
// ----------------------------------------------------------------------
export function useTable() {
const [page, setPage] = useState(0);
const [orderBy, setOrderBy] = useState('name');
const [rowsPerPage, setRowsPerPage] = useState(5);
const [selected, setSelected] = useState<string[]>([]);
const [order, setOrder] = useState<'asc' | 'desc'>('asc');
const onSort = useCallback(
(id: string) => {
const isAsc = orderBy === id && order === 'asc';
setOrder(isAsc ? 'desc' : 'asc');
setOrderBy(id);
},
[order, orderBy]
);
const onSelectAllRows = useCallback((checked: boolean, newSelecteds: string[]) => {
if (checked) {
setSelected(newSelecteds);
return;
}
setSelected([]);
}, []);
const onSelectRow = useCallback(
(inputValue: string) => {
const newSelected = selected.includes(inputValue)
? selected.filter((value) => value !== inputValue)
: [...selected, inputValue];
setSelected(newSelected);
},
[selected]
);
const onResetPage = useCallback(() => {
setPage(0);
}, []);
const onChangePage = useCallback((event: unknown, newPage: number) => {
setPage(newPage);
}, []);
const onChangeRowsPerPage = useCallback(
(event: React.ChangeEvent<HTMLInputElement>) => {
setRowsPerPage(parseInt(event.target.value, 10));
onResetPage();
},
[onResetPage]
);
return {
page,
order,
onSort,
orderBy,
selected,
rowsPerPage,
onSelectRow,
onResetPage,
onChangePage,
onSelectAllRows,
onChangeRowsPerPage,
};
}
