amy/donetick-fe
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

chore: Refactor ThingsHistory component and add styling improvements

Browse source
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
Show stats Download patch file Download diff file Expand all files Collapse all files

5
src/Config.js
View file

@ -1,5 +1,8 @@
/* 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 GOOGLE_CLIENT_ID = import.meta.env.VITE_APP_GOOGLE_CLIENT_ID
export const ENVIROMENT = import.meta.env.VITE_APP_ENVIROMENT

84
src/views/Things/ThingsHistory.jsx
View file

@ -107,47 +107,49 @@ const ThingsHistory = () => {
<Typography level='h3' mb={1.5}>
History:
</Typography>
<List sx={{ p: 0 }}>
{thingsHistory.map((history, index) => (
<>
<ListItem sx={{ gap: 1.5, alignItems: 'flex-start' }}>
<ListItemContent sx={{ my: 0 }}>
<Box
sx={{
display: 'flex',
justifyContent: 'space-between',
alignItems: 'center',
}}
>
<Typography level='body1' sx={{ fontWeight: 'md' }}>
{moment(history.updatedAt).format(
'ddd MM/DD/yyyy HH:mm:ss',
)}
</Typography>
<Chip>{history.state === '1' ? 'Active' : 'Inactive'}</Chip>
</Box>
</ListItemContent>
</ListItem>
{index < thingsHistory.length - 1 && (
<>
<ListDivider component='li'>
{/* time between two completion: */}
{index < thingsHistory.length - 1 &&
thingsHistory[index + 1].createdAt && (
<Typography level='body3' color='text.tertiary'>
{formatTimeDifference(
history.createdAt,
thingsHistory[index + 1].createdAt,
)}{' '}
before
</Typography>
)}
</ListDivider>
</>
)}
</>
))}
</List>
<Box sx={{ borderRadius: 'sm', p: 2, boxShadow: 'md' }}>
<List sx={{ p: 0 }}>
{thingsHistory.map((history, index) => (
<>
<ListItem sx={{ gap: 1.5, alignItems: 'flex-start' }}>
<ListItemContent sx={{ my: 0 }}>
<Box
sx={{
display: 'flex',
justifyContent: 'space-between',
alignItems: 'center',
}}
>
<Typography level='body1' sx={{ fontWeight: 'md' }}>
{moment(history.updatedAt).format(
'ddd MM/DD/yyyy HH:mm:ss',
)}
</Typography>
<Chip>{history.state === '1' ? 'Active' : 'Inactive'}</Chip>
</Box>
</ListItemContent>
</ListItem>
{index < thingsHistory.length - 1 && (
<>
<ListDivider component='li'>
{/* time between two completion: */}
{index < thingsHistory.length - 1 &&
thingsHistory[index + 1].createdAt && (
<Typography level='body3' color='text.tertiary'>
{formatTimeDifference(
history.createdAt,
thingsHistory[index + 1].createdAt,
)}{' '}
before
</Typography>
)}
</ListDivider>
</>
)}
</>
))}
</List>
</Box>
{/* Load more Button */}
<Box
sx={{

17
src/views/Things/ThingsView.jsx
View file

@ -190,7 +190,8 @@ const ThingsView = () => {
const [confirmModelConfig, setConfirmModelConfig] = useState({})
const [isSnackbarOpen, setIsSnackbarOpen] = useState(false)
const [snackBarMessage, setSnackBarMessage] = useState('')
const [snackbarMessage, setSnackbarMessage] = useState('')
const [snackbarColor, setSnackbarColor] = useState('success')
useEffect(() => {
// fetch things
@ -222,7 +223,8 @@ const ThingsView = () => {
}
})
})
setSnackBarMessage('Thing saved successfully')
setSnackbarMessage('Thing saved successfully')
setSnackbarColor('success')
setIsSnackbarOpen(true)
}
const handleEditClick = thing => {
@ -246,7 +248,12 @@ const ThingsView = () => {
)
currentThings.splice(thingIndex, 1)
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({})
@ -280,7 +287,7 @@ const ThingsView = () => {
})
})
}
setSnackBarMessage('Thing state updated successfully')
setSnackbarMessage('Thing state updated successfully')
setIsSnackbarOpen(true)
}
@ -366,11 +373,11 @@ const ThingsView = () => {
}}
autoHideDuration={3000}
variant='soft'
color='success'
color={snackbarColor}
size='lg'
invertedColors
>
<Typography level='title-md'>{snackBarMessage}</Typography>
<Typography level='title-md'>{snackbarMessage}</Typography>
</Snackbar>
</Container>
)