import { Alert, CircularProgress } from '@mui/material';
import { useRequest } from 'ahooks';

type Props = {
  dataFn: () => Promise<any>;
  children: (data: any) => React.ReactNode;
};

export default function DataDrivenPage(props: Props) {
  const { loading, error, data } = useRequest(props.dataFn);

  if (loading) {
    return <CircularProgress />;
  }
  if (error) {
    return <Alert severity="error">{error.message}</Alert>;
  }

  return props.children(data);
}
