chore: Refactor ThingsHistory component and add styling improvements

2 files changed, 55 insertions, 46 deletions

diff --git a/src/views/Things/ThingsHistory.jsx b/src/views/Things/ThingsHistory.jsx
index 4b32b0e..c043a55 100644
--- a/src/views/Things/ThingsHistory.jsx
+++ b/src/views/Things/ThingsHistory.jsx
@@ -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={{
diff --git a/src/views/Things/ThingsView.jsx b/src/views/Things/ThingsView.jsx
index 8b2beb6..69b3a88 100644
--- a/src/views/Things/ThingsView.jsx
+++ b/src/views/Things/ThingsView.jsx
@@ -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>
   )