import { Table, TableBody, TableCell, TableHead, TableRow, } from '@material-ui/core'; import classnames from 'classnames'; import { useStyles } from './FeatureToggleListNew.styles'; import FeatureToggleListNewItem from './FeatureToggleListNewItem/FeatureToggleListNewItem'; import usePagination from '../../../hooks/usePagination'; import loadingFeatures from './FeatureToggleListNewItem/loadingFeatures'; import { IFeatureToggle, IFeatureToggleListItem, } from '../../../interfaces/featureToggle'; import PaginateUI from '../../common/PaginateUI/PaginateUI'; interface IFeatureToggleListNewProps { features: IFeatureToggleListItem[]; loading: boolean; projectId: string; } const FeatureToggleListNew = ({ features, loading, projectId, }: IFeatureToggleListNewProps) => { const styles = useStyles(); const { page, pages, nextPage, prevPage, setPageIndex, pageIndex } = usePagination(features, 50); const getEnvironments = () => { if (features.length > 0) { const envs = features[0].environments || []; return envs; } return [ { name: 'default', enabled: false, }, ]; }; const renderFeatures = () => { if (loading) { return loadingFeatures.map((feature: IFeatureToggleListItem) => { return ( ); }); } return page.map((feature: IFeatureToggle) => { return ( ); }); }; return ( <> Status Type Name {getEnvironments().map((env: any) => { return ( {env.name === ':global:' ? 'Status' : env.name} ); })} {renderFeatures()}
); }; export default FeatureToggleListNew;