aboutsummaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authorLibravatar Mo Tarbin <mhed.t91@gmail.com>2024-08-10 02:29:17 -0400
committerLibravatar Mo Tarbin <mhed.t91@gmail.com>2024-08-10 02:29:17 -0400
commitea4783ff39a06383e6dc19b2b4d140a1c90ebc95 (patch)
tree1e43a852edfb4043b190884e7bcdc3cfb284a398
parente9745683748ac5ecfdf704607441a3204d8c5516 (diff)
downloaddonetick-frontend-ea4783ff39a06383e6dc19b2b4d140a1c90ebc95.tar.gz
donetick-frontend-ea4783ff39a06383e6dc19b2b4d140a1c90ebc95.tar.bz2
donetick-frontend-ea4783ff39a06383e6dc19b2b4d140a1c90ebc95.zip
Add Snackbar component for displaying error messages in SignupView and ChoreView
Diffstat (limited to '')
-rw-r--r--src/views/Authorization/Signup.jsx17
-rw-r--r--src/views/ChoreEdit/ChoreView.jsx62
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={