From ea4783ff39a06383e6dc19b2b4d140a1c90ebc95 Mon Sep 17 00:00:00 2001 From: Mo Tarbin Date: Sat, 10 Aug 2024 02:29:17 -0400 Subject: Add Snackbar component for displaying error messages in SignupView and ChoreView --- src/views/Authorization/Signup.jsx | 17 ++++++++++- src/views/ChoreEdit/ChoreView.jsx | 62 +++++++++++++++++++++++++++++--------- 2 files changed, 64 insertions(+), 15 deletions(-) diff --git a/src/views/Authorization/Signup.jsx b/src/views/Authorization/Signup.jsx index a1e312c..9e6cc70 100644 --- a/src/views/Authorization/Signup.jsx +++ b/src/views/Authorization/Signup.jsx @@ -7,6 +7,7 @@ import { FormHelperText, Input, Sheet, + Snackbar, Typography, } from '@mui/joy' import React from 'react' @@ -25,6 +26,8 @@ const SignupView = () => { const [emailError, setEmailError] = React.useState('') const [displayNameError, setDisplayNameError] = React.useState('') const [error, setError] = React.useState(null) + const [snackbarOpen, setSnackbarOpen] = React.useState(false) + const [snackbarMessage, setSnackbarMessage] = React.useState('') const handleLogin = (username, password) => { login(username, password).then(response => { if (response.status === 200) { @@ -39,6 +42,7 @@ const SignupView = () => { }) } else { console.log('Login failed', response) + // Navigate('/login') } }) @@ -101,7 +105,10 @@ const SignupView = () => { handleLogin(username, password) } else { console.log('Signup failed') - setError('Signup failed') + response.json().then(res => { + setError(res.error) + } + ) } }) } @@ -256,6 +263,14 @@ const SignupView = () => { + setError(null)} + autoHideDuration={5000} + message={error} + > + {error} + ) } diff --git a/src/views/ChoreEdit/ChoreView.jsx b/src/views/ChoreEdit/ChoreView.jsx index 172ad9b..b77b511 100644 --- a/src/views/ChoreEdit/ChoreView.jsx +++ b/src/views/ChoreEdit/ChoreView.jsx @@ -3,6 +3,7 @@ import { CancelScheduleSend, Check, Checklist, + Edit, History, PeopleAlt, Person, @@ -258,7 +259,7 @@ const ChoreView = () => { > {infoCards.map((detail, index) => ( - + {/* divider between the list items: */} @@ -411,7 +412,15 @@ const ChoreView = () => { }} /> )} - + - or - - + + + More + + - + + +