Add Snackbar component for displaying error messages in SignupView and ChoreView

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 = () => {
           </Button>
         </Sheet>
       </Box>
+      <Snackbar
+        open={error !== null}
+        onClose={() => setError(null)}
+        autoHideDuration={5000}
+        message={error}
+      >
+        {error}
+      </Snackbar>
     </Container>
   )
 }
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 = () => {
         >
           <Grid container spacing={1}>
             {infoCards.map((detail, index) => (
-              <Grid item xs={4} key={index}>
+              <Grid item xs={6} key={index}>
                 {/* divider between the list items: */}
 
                 <ListItem key={index}>
@@ -411,7 +412,15 @@ const ChoreView = () => {
             }}
           />
         )}
-
+     <Box
+          sx={{
+            display: 'flex',
+            flexDirection: 'row',
+            gap: 1,
+            alignContent: 'center',
+            justifyContent: 'center',
+          }}
+        >
         <Button
           fullWidth
           size='lg'
@@ -419,20 +428,15 @@ const ChoreView = () => {
           disabled={isPendingCompletion}
           color={isPendingCompletion ? 'danger' : 'success'}
           startDecorator={<Check />}
+          sx={
+            {
+              flex: 4,
+            }
+          }
         >
           <Box>Mark as done</Box>
         </Button>
-        <Divider sx={{ my: 0.5 }}>or</Divider>
-
-        <Box
-          sx={{
-            display: 'flex',
-            flexDirection: 'row',
-            gap: 1,
-            alignContent: 'center',
-            justifyContent: 'center',
-          }}
-        >
+   
           <Button
             fullWidth
             size='lg'
@@ -454,9 +458,26 @@ const ChoreView = () => {
               })
             }}
             startDecorator={<SwitchAccessShortcut />}
+            sx={
+              {
+                flex: 1,
+              }
+            }
           >
             <Box>Skip</Box>
           </Button>
+          </Box>
+        <Divider sx={{ my: 0.5 }}>More</Divider>
+
+        <Box
+          sx={{
+            display: 'flex',
+            flexDirection: 'row',
+            gap: 1,
+            alignContent: 'center',
+            justifyContent: 'center',
+          }}
+        > 
           <Button
             startDecorator={<History />}
             size='lg'
@@ -469,8 +490,21 @@ const ChoreView = () => {
           >
             History
           </Button>
-        </Box>
 
+     <Button
+            startDecorator={<Edit />}
+            size='lg'
+            color='primary'
+            variant='outlined'
+            fullWidth
+            onClick={() => {
+              navigate(`/chores/${choreId}/edit`)
+            }}
+          >
+            Edit
+          </Button>
+           
+</Box>
         <Snackbar
           open={isPendingCompletion}
           endDecorator={