diff options
Diffstat (limited to 'client/src/components/GuestLogin.tsx')
-rw-r--r-- | client/src/components/GuestLogin.tsx | 41 |
1 files changed, 24 insertions, 17 deletions
diff --git a/client/src/components/GuestLogin.tsx b/client/src/components/GuestLogin.tsx index dca157a..0d3e8b1 100644 --- a/client/src/components/GuestLogin.tsx +++ b/client/src/components/GuestLogin.tsx @@ -1,18 +1,20 @@ -import React, { useState } from 'react'; +import React from 'react'; import { useNavigate } from 'react-router-dom'; import { useDispatch } from 'react-redux'; -import { Button, Paper, Snackbar, TextField, Typography } from '@mui/material'; +import { Button, Paper, 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, StatusProps } from '../models'; import Status from './Status'; +import { open } from '../slices/snackbarSlice'; +import { isFetchBaseQueryError } from '../error'; +import type { Data } from '../error'; +import type { Name } from '../models'; function GuestLogin() { const dispatch = useDispatch(); const navigate = useNavigate(); - const [login, { isLoading, error }] = useLoginGuestMutation(); - const [open, setOpen] = useState<boolean>(false); + const [login] = useLoginGuestMutation(); const { register, @@ -29,8 +31,22 @@ function GuestLogin() { try { dispatch(setGuest(await login(data).unwrap())); navigate('/rsvp'); - } catch (e) { - setOpen(true); + } catch (error) { + if (isFetchBaseQueryError(error)) { + dispatch( + open({ + message: (error.data as Data).message, + severity: 'error', + }) + ); + } else { + dispatch( + open({ + message: 'No response', + severity: 'error', + }) + ); + } } }; @@ -57,7 +73,6 @@ function GuestLogin() { alignItems: 'center', mt: 16, p: 2, - borderRadius: '8px', }} > <Typography variant="h6">Guest Login</Typography> @@ -84,15 +99,7 @@ function GuestLogin() { <Button type="submit" variant="contained" fullWidth sx={{ mt: 2 }}> Log in </Button> - <Snackbar - open={!isLoading && open} - onClose={() => setOpen(false)} - autoHideDuration={5000} - > - <div> - <Status {...({ error, setOpen, type: 'Guest' } as StatusProps)} /> - </div> - </Snackbar> + <Status /> </Paper> </form> ); |