feat: add subsequent validation callback

ITxPT · May 9, 2022 · eb2c8da · eb2c8da
1 parent 80d9563
commit eb2c8da
Show file tree

Hide file tree

Showing 3 changed files with 90 additions and 53 deletions.
diff --git a/app/components/ErrorAlert.tsx b/app/components/ErrorAlert.tsx
@@ -0,0 +1,22 @@
+import { Alert, Snackbar } from '@mui/material';
+
+export type ErrorAlertProps = {
+  message: string;
+  open: boolean;
+  onClose: () => void;
+}
+
+const ErrorAlert = (props: ErrorAlertProps) => {
+  const { message, open, onClose } = props;
+
+  return (
+    <Snackbar
+      open={open}
+      anchorOrigin={{ vertical: 'top', horizontal: 'center' }}
+    >
+      <Alert severity="error" onClose={onClose}>{message}</Alert>
+    </Snackbar>
+  );
+};
+
+export default ErrorAlert;
diff --git a/app/components/ValidationResult.tsx b/app/components/ValidationResult.tsx
@@ -1,11 +1,14 @@
 import ArrowDropDownIcon from '@mui/icons-material/ArrowDropDown';
-import { Box, Button, ButtonGroup, Menu, MenuItem, Skeleton, Stack, Typography } from '@mui/material';
+import { Box, Button, ButtonGroup, Grid, Menu, MenuItem, Skeleton, Stack, Typography } from '@mui/material';
 import Link from 'next/link';
+import { useRouter } from 'next/router';
 import React from 'react';
+import ErrorAlert from './ErrorAlert';
 import TaskRow from './TaskRow';
 import { Session } from '../api/client';
 import useApiClient from '../hooks/useApiClient';
 import { useSubscription } from '../hooks/useMqttClient';
+import useSessionStore from '../hooks/useSessionStore';
 import theme from '../styles/theme';
 
 function truncName(name: string) {
@@ -27,12 +30,31 @@ type ValidationResultProps = {
 
 const ValidationResult = (props: ValidationResultProps) => {
   const { session } = props;
+  const router = useRouter();
   const message = useSubscription(session ? `progress/${session.id}` : '');
   const [tasks, setTasks] = React.useState<any[]>([]);
+  const { setSession } = useSessionStore();
+  const [ errorOpen, setErrorOpen ] = React.useState<boolean>(false);
+  const [ errorMessage, setErrorMessage ] = React.useState<string>('test');
   const apiClient = useApiClient();
   const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
   const open = Boolean(anchorEl);
 
+  const handleValidateAnother = () => {
+    apiClient.createSession()
+      .then(session => {
+        setSession(session);
+        router.push('/jobs/' + session.id);
+      })
+      .catch(err => {
+        setSession(undefined);
+        setErrorOpen(true);
+        setErrorMessage(err.message);
+      });
+  };
+
+  const handleCloseError = () => setErrorOpen(false);
+
   const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
     setAnchorEl(event.currentTarget);
   };
@@ -87,6 +109,7 @@ const ValidationResult = (props: ValidationResultProps) => {
 
   return (
     <Stack spacing={4}>
+      <ErrorAlert open={errorOpen} message={errorMessage} onClose={handleCloseError} />
       <Stack spacing={1} direction="row">
         <Typography variant="h3">Validation result</Typography>
         { session && <Typography variant="body2" sx={{ [theme.breakpoints.down('md')]: { display: 'none' }}}>[{session.id}]</Typography> }
@@ -109,42 +132,52 @@ const ValidationResult = (props: ValidationResultProps) => {
           </>
         )}
       </Box>
-      <Box>
-        <ButtonGroup disabled={session.status !== 'complete'}>
-          <Link href={apiClient.reportLink(session.id, 'csv')}>
-            <a target="_blank" style={{textDecoration: 'none'}}>
-              <Button variant="contained">Download report</Button>
-            </a>
-          </Link>
-          <Button
-            variant="contained"
-            size="small"
-            onClick={handleClick}
-          >
-            <ArrowDropDownIcon />
-          </Button>
-          <Menu
-            anchorEl={anchorEl}
-            open={open}
-            onClose={handleClose}
-          >
-            <Link href={apiClient.reportLink(session.id, 'json')}>
-              <a target="_blank" style={{textDecoration: 'none'}}>
-                <MenuItem onClick={handleClose}>
-                  json
-                </MenuItem>
-              </a>
-            </Link>
+      <Grid container>
+        <Grid item xs={12} md={6}>
+          <ButtonGroup disabled={session.status !== 'complete'}>
             <Link href={apiClient.reportLink(session.id, 'csv')}>
               <a target="_blank" style={{textDecoration: 'none'}}>
-                <MenuItem onClick={handleClose}>
-                  csv
-                </MenuItem>
+                <Button variant="contained">Download report</Button>
               </a>
             </Link>
-          </Menu>
-        </ButtonGroup>
-      </Box>
+            <Button
+              variant="contained"
+              size="small"
+              onClick={handleClick}
+            >
+              <ArrowDropDownIcon />
+            </Button>
+            <Menu
+              anchorEl={anchorEl}
+              open={open}
+              onClose={handleClose}
+            >
+              <Link href={apiClient.reportLink(session.id, 'json')}>
+                <a target="_blank" style={{textDecoration: 'none'}}>
+                  <MenuItem onClick={handleClose}>
+                    json
+                  </MenuItem>
+                </a>
+              </Link>
+              <Link href={apiClient.reportLink(session.id, 'csv')}>
+                <a target="_blank" style={{textDecoration: 'none'}}>
+                  <MenuItem onClick={handleClose}>
+                    csv
+                  </MenuItem>
+                </a>
+              </Link>
+            </Menu>
+          </ButtonGroup>
+        </Grid>
+        <Grid item xs={12} md={6} sx={{ textAlign: 'end' }}>
+          <Button
+            variant="contained"
+            onClick={handleValidateAnother}
+          >
+            Validate more files
+          </Button>
+        </Grid>
+      </Grid>
     </Stack>
   );
 };

diff --git a/app/pages/index.tsx b/app/pages/index.tsx
@@ -1,37 +1,19 @@
 import EmailIcon from '@mui/icons-material/Email';
 import GitHubIcon from '@mui/icons-material/GitHub';
-import { Alert, Box, Button, Grid, Snackbar, SnackbarContent, Stack, Typography } from '@mui/material';
+import { Box, Button, Grid, Stack, Typography } from '@mui/material';
 import { ThemeProvider } from '@mui/material/styles';
 import { NextPage } from 'next';
 import Head from 'next/head';
 import Image from 'next/image';
 import Link from 'next/link';
 import { useRouter } from 'next/router';
 import React from 'react';
+import ErrorAlert from '../components/ErrorAlert';
 import MainContent from '../components/MainContent';
 import useApiClient from '../hooks/useApiClient';
 import useSessionStore from '../hooks/useSessionStore';
 import theme from '../styles/theme';
 
-type ErrorAlertProps = {
-  message: string;
-  open: boolean;
-  onClose: () => void;
-}
-
-const ErrorAlert = (props: ErrorAlertProps) => {
-  const { message, open, onClose } = props;
-
-  return (
-    <Snackbar
-      open={open}
-      anchorOrigin={{ vertical: 'top', horizontal: 'center' }}
-    >
-      <Alert severity="error" onClose={onClose}>{message}</Alert>
-    </Snackbar>
-  );
-};
-
 const Home: NextPage = () => {
   const apiClient = useApiClient();
   const router = useRouter();