diff options
Diffstat (limited to 'client/src/components/GuestLogin.tsx')
-rw-r--r-- | client/src/components/GuestLogin.tsx | 41 |
1 files changed, 36 insertions, 5 deletions
diff --git a/client/src/components/GuestLogin.tsx b/client/src/components/GuestLogin.tsx index f42c1d6..acf229f 100644 --- a/client/src/components/GuestLogin.tsx +++ b/client/src/components/GuestLogin.tsx @@ -1,16 +1,38 @@ -import React from 'react'; +import React, { useState } from 'react'; import { useNavigate } from 'react-router-dom'; import { useDispatch } from 'react-redux'; -import { Button, Paper, TextField, Typography } from '@mui/material'; +import { + Alert, + Button, + Paper, + Snackbar, + TextField, + Typography, +} from '@mui/material'; import { useForm } from 'react-hook-form'; import { setGuest } from '../slices/auth/guestSlice'; import { useLoginGuestMutation } from '../slices/api/guestSlice'; -import type { Name } from '../models'; +import type { Name, StatusProps } from '../models'; +import { isFetchBaseQueryError } from '../error'; +import type { Data } from '../error'; + +const Status = ({ error, setOpen }: StatusProps) => { + return isFetchBaseQueryError(error) ? ( + <Alert severity="error" onClose={() => setOpen(false)}> + {(error.data as Data).message} + </Alert> + ) : ( + <Alert severity="error" onClose={() => setOpen(false)}> + Guest login failed + </Alert> + ); +}; function GuestLogin() { const dispatch = useDispatch(); const navigate = useNavigate(); - const [login] = useLoginGuestMutation(); + const [login, { isLoading, error }] = useLoginGuestMutation(); + const [open, setOpen] = useState<boolean>(false); const { register, @@ -28,7 +50,7 @@ function GuestLogin() { dispatch(setGuest(await login(data).unwrap())); navigate('/rsvp'); } catch (e) { - console.log(e); + setOpen(true); } }; @@ -83,6 +105,15 @@ function GuestLogin() { Log in </Button> </Paper> + <Snackbar + open={!isLoading && open} + onClose={() => setOpen(false)} + autoHideDuration={5000} + > + <div> + <Status {...({ error, setOpen } as StatusProps)} /> + </div> + </Snackbar> </form> ); } |