import { LinearProgress } from '@material-ui/core' import debugFactory from 'debug' import React from 'react' import ExperimentsApi from 'src/api/ExperimentsApi' import ExperimentsTableAgGrid from 'src/components/experiments/multi-view/ExperimentsTableAgGrid' import Layout from 'src/components/page-parts/Layout' import { useDataLoadingError, useDataSource } from 'src/utils/data-loading' const debug = debugFactory('abacus:pages/experiments/Experiments.tsx') const Experiments = function (): JSX.Element { debug('ExperimentsPage#render') const { isLoading, data: experiments, error } = useDataSource(() => ExperimentsApi.findAll(), []) useDataLoadingError(error, 'Experiment') return ( <Layout headTitle='Experiments' flexContent> {isLoading ? <LinearProgress /> : <ExperimentsTableAgGrid experiments={experiments || []} />} </Layout> ) } export default Experiments