Adding toast notifications

frontend/src/app/album/[id]/page.tsx

@@ -8,7 +8,7 @@ import { TimeUtils } from '@/utils/time.util';
 import { createSong, deleteSong, getAlbum, getSong, updateSong, revalidateAlbum } from '@/app/actions';
 import Button from 'react-bootstrap/Button';
 import Modal from 'react-bootstrap/Modal';
-import { IconButton } from '@mui/material';
+import { Alert, Snackbar, IconButton } from '@mui/material';
 import { AddCircleOutline, Delete, Edit } from '@mui/icons-material';
 
 export default function Page() {
@@ -25,6 +25,11 @@ export default function Page() {
   const [formSongTrackNumber, setFormSongTrackNumber] = useState("");
   const [formModalTitle, setFormModalTitle] = useState("Add Song");
   const [formModalButtonLabel, setFormModalButtonLabel] = useState("Add");
+  const [showSnackbar, setShowSnackbar] = useState(false);
+  const handleCloseSnackbar = () => setShowSnackbar(false);
+  const handleOpenSnackbar = () => setShowSnackbar(true);
+  const [snackbarSuccess, setSnackbarSuccess] = useState(true);
+  const [snackbarMessage, setSnackbarMessage] = useState("");
 
   useEffect(() => {
     async function fetchAlbum(albumId: string) {
@@ -33,7 +38,7 @@ export default function Page() {
         const data = await getAlbum(parseInt(albumId));
         setAlbum(data);
       } catch (error) {
-        console.error(`Error getting album with id ${albumId}`, error);
+        console.error(`Error getting album with id ${albumId}:`, error);
       }
     }
     fetchAlbum(albumId);
@@ -47,14 +52,16 @@ export default function Page() {
     try {
       if (formData.get('id') == "") {
         await createSong(formData);
+        handleSnackbar(`Successfully created Song with ID ${formData.get("id")}`, true);
       } else {
         await updateSong(formData);
+        handleSnackbar(`Successfully updated Song with ID ${formData.get("id")}`, true);
       }
       revalidateAlbum();
       const data = await getAlbum(parseInt(albumId));
       setAlbum(data);
     } catch (error) {
-      console.error("Error creating Song: ", error);
+        handleSnackbar(`Error creating Song: ${error}`, false);
     }
   }
 
@@ -83,12 +90,10 @@ export default function Page() {
         setFormSongTrackNumber(data.trackNumber);
         handleShow();
       } catch (error) {
-        console.error(`Error getting song with ID ${songId}:`, error);
+        handleSnackbar(`Error getting song with ID ${songId}: ${error}`, false);
       }
-      revalidateAlbum();
-      const data = await getAlbum(parseInt(albumId));
-      setAlbum(data);
     } else {
+      handleSnackbar(`Couldn't get ID of clicked element`, false);
       console.error("Couldn't get ID of clicked element");
     }
   }
@@ -99,16 +104,22 @@ export default function Page() {
       try {
         await deleteSong(parseInt(songId));
       } catch (error) {
-        console.error(`Error deleting song with ID ${songId}:`, error);
+        handleSnackbar(`Error deleting song with ID ${songId}: ${error}`, false);
       }
       revalidateAlbum();
       const data = await getAlbum(parseInt(albumId));
       setAlbum(data);
     } else {
-      console.error("Couldn't get ID of clicked element");
+      handleSnackbar(`Couldn't get ID of clicked element`, false);
     }
   }
 
+  const handleSnackbar = async (message: string, severity: boolean) => {
+    setSnackbarMessage(message);
+    setSnackbarSuccess(severity);
+    handleOpenSnackbar();
+  }
+
   if (!album) return <div>Loading...</div>
 
   return (
@@ -188,6 +199,18 @@ export default function Page() {
         </Button>
       </Modal.Footer>
     </Modal>
+
+    <Snackbar open={showSnackbar} autoHideDuration={6000} onClose={handleCloseSnackbar}>
+      <Alert
+        onClose={handleCloseSnackbar}
+        severity={snackbarSuccess ? 'success' : 'warning'}
+        variant="filled"
+        sx={{ width: '100%' }}
+      >
+        {snackbarMessage}
+      </Alert>
+    </Snackbar>
+
     </>
   );
 }

frontend/src/app/album/page.tsx

@@ -6,7 +6,7 @@ import { Album } from '@/entities/album.entity';
 import { createAlbum, deleteAlbum, getAlbum, getAlbums, updateAlbum, revalidateAlbums } from '@/app/actions';
 import Button from 'react-bootstrap/Button';
 import Modal from 'react-bootstrap/Modal';
-import { IconButton } from '@mui/material';
+import { Alert, Snackbar, IconButton } from '@mui/material';
 import { AddCircleOutline, Delete, Edit } from '@mui/icons-material';
 
 export default function Page() {
@@ -20,6 +20,11 @@ export default function Page() {
   const [formAlbumGenre, setFormAlbumGenre] = useState("");
   const [formModalTitle, setFormModalTitle] = useState("Add Album");
   const [formModalButtonLabel, setFormModalButtonLabel] = useState("Add");
+  const [showSnackbar, setShowSnackbar] = useState(false);
+  const handleCloseSnackbar = () => setShowSnackbar(false);
+  const handleOpenSnackbar = () => setShowSnackbar(true);
+  const [snackbarSuccess, setSnackbarSuccess] = useState(true);
+  const [snackbarMessage, setSnackbarMessage] = useState("");
 
   useEffect(() => {
     async function fetchAlbums() {
@@ -28,7 +33,7 @@ export default function Page() {
         const data = await getAlbums();
         setAlbums(data);
       } catch (error) {
-        console.error("Error getting albums: ", error);
+        handleSnackbar(`Error getting albums: ${error}`, false);
       }
     }
     fetchAlbums();
@@ -42,14 +47,16 @@ export default function Page() {
     try {
       if (formData.get('id') == "") {
         await createAlbum(formData);
+        handleSnackbar(`Successfully created Album with ID ${formData.get("id")}`, true);
       } else {
         await updateAlbum(formData);
+        handleSnackbar(`Successfully updated Album with ID ${formData.get("id")}`, true);
       }
       revalidateAlbums();
       const data = await getAlbums();
       setAlbums(data);
     } catch (error) {
-      console.error("Error creating Album: ", error);
+      handleSnackbar(`Error creating Album: ${error}`, false);
     }
   }
 
@@ -76,13 +83,10 @@ export default function Page() {
         setFormAlbumGenre(data.genre);
         handleShow();
       } catch (error) {
-        console.error(`Error getting album with ID ${id}:`, error);
+        handleSnackbar(`Error getting Album with ID ${id}: ${error}`, false);
       }
-      revalidateAlbums();
-      const data = await getAlbums();
-      setAlbums(data);
     } else {
-      console.error("Couldn't get ID of clicked element");
+      handleSnackbar(`Couldn't get ID of clicked element`, false);
     }
   }
 
@@ -91,17 +95,25 @@ export default function Page() {
     if (id) {
       try {
         await deleteAlbum(parseInt(id));
+        handleSnackbar(`Successfully deleted Album with ID ${id}`, true);
       } catch (error) {
-        console.error(`Error deleting album with ID ${id}:`, error);
+        handleSnackbar(`Error deleting Album with ID ${id}: ${error}`, false);
       }
       revalidateAlbums();
       const data = await getAlbums();
       setAlbums(data);
     } else {
-      console.error("Couldn't get ID of clicked element");
+      handleSnackbar(`Couldn't get ID of clicked element`, false);
     }
   }
 
+  const handleSnackbar = async (message: string, severity: boolean) => {
+    setSnackbarMessage(message);
+    setSnackbarSuccess(severity);
+    handleOpenSnackbar();
+
+  }
+
   if (!albums) return <div>Loading...</div>
 
   return (
@@ -185,6 +197,18 @@ export default function Page() {
         </Button>
       </Modal.Footer>
     </Modal>
+
+    <Snackbar open={showSnackbar} autoHideDuration={6000} onClose={handleCloseSnackbar}>
+      <Alert
+        onClose={handleCloseSnackbar}
+        severity={snackbarSuccess ? 'success' : 'warning'}
+        variant="filled"
+        sx={{ width: '100%' }}
+      >
+        {snackbarMessage}
+      </Alert>
+    </Snackbar>
+
     </>
   );
 }