chore: Refactor ThingsHistory component and add styling improvements

This commit is contained in:
Mo Tarbin 2024-07-04 02:00:20 -04:00
parent c5ee02d181
commit 71bad5a19f
3 changed files with 59 additions and 47 deletions

View file

@ -1,5 +1,8 @@
/* eslint-env node */ /* eslint-env node */
export const API_URL = import.meta.env.VITE_APP_API_URL // || 'http://localhost:2021' export const API_URL =
import.meta.env.VITE_APP_API_URL === 'AUTO'
? `${window.location.hostname}/api`
: import.meta.env.VITE_APP_API_URL
export const REDIRECT_URL = import.meta.env.VITE_APP_REDIRECT_URL //|| 'http://localhost:3000' export const REDIRECT_URL = import.meta.env.VITE_APP_REDIRECT_URL //|| 'http://localhost:3000'
export const GOOGLE_CLIENT_ID = import.meta.env.VITE_APP_GOOGLE_CLIENT_ID export const GOOGLE_CLIENT_ID = import.meta.env.VITE_APP_GOOGLE_CLIENT_ID
export const ENVIROMENT = import.meta.env.VITE_APP_ENVIROMENT export const ENVIROMENT = import.meta.env.VITE_APP_ENVIROMENT

View file

@ -107,6 +107,7 @@ const ThingsHistory = () => {
<Typography level='h3' mb={1.5}> <Typography level='h3' mb={1.5}>
History: History:
</Typography> </Typography>
<Box sx={{ borderRadius: 'sm', p: 2, boxShadow: 'md' }}>
<List sx={{ p: 0 }}> <List sx={{ p: 0 }}>
{thingsHistory.map((history, index) => ( {thingsHistory.map((history, index) => (
<> <>
@ -148,6 +149,7 @@ const ThingsHistory = () => {
</> </>
))} ))}
</List> </List>
</Box>
{/* Load more Button */} {/* Load more Button */}
<Box <Box
sx={{ sx={{

View file

@ -190,7 +190,8 @@ const ThingsView = () => {
const [confirmModelConfig, setConfirmModelConfig] = useState({}) const [confirmModelConfig, setConfirmModelConfig] = useState({})
const [isSnackbarOpen, setIsSnackbarOpen] = useState(false) const [isSnackbarOpen, setIsSnackbarOpen] = useState(false)
const [snackBarMessage, setSnackBarMessage] = useState('') const [snackbarMessage, setSnackbarMessage] = useState('')
const [snackbarColor, setSnackbarColor] = useState('success')
useEffect(() => { useEffect(() => {
// fetch things // fetch things
@ -222,7 +223,8 @@ const ThingsView = () => {
} }
}) })
}) })
setSnackBarMessage('Thing saved successfully') setSnackbarMessage('Thing saved successfully')
setSnackbarColor('success')
setIsSnackbarOpen(true) setIsSnackbarOpen(true)
} }
const handleEditClick = thing => { const handleEditClick = thing => {
@ -246,7 +248,12 @@ const ThingsView = () => {
) )
currentThings.splice(thingIndex, 1) currentThings.splice(thingIndex, 1)
setThings(currentThings) setThings(currentThings)
} else if (response.status === 405) {
setSnackbarMessage('Unable to delete thing with associated tasks')
setSnackbarColor('danger')
setIsSnackbarOpen(true)
} }
// if method not allwo show snackbar:
}) })
} }
setConfirmModelConfig({}) setConfirmModelConfig({})
@ -280,7 +287,7 @@ const ThingsView = () => {
}) })
}) })
} }
setSnackBarMessage('Thing state updated successfully') setSnackbarMessage('Thing state updated successfully')
setIsSnackbarOpen(true) setIsSnackbarOpen(true)
} }
@ -366,11 +373,11 @@ const ThingsView = () => {
}} }}
autoHideDuration={3000} autoHideDuration={3000}
variant='soft' variant='soft'
color='success' color={snackbarColor}
size='lg' size='lg'
invertedColors invertedColors
> >
<Typography level='title-md'>{snackBarMessage}</Typography> <Typography level='title-md'>{snackbarMessage}</Typography>
</Snackbar> </Snackbar>
</Container> </Container>
) )