Add alert component

website/app/collection/albums/page.tsx

@@ -1,5 +1,6 @@
 'use client'
 
+import AlertComponent, { AlertEntry } from "@/components/alerts";
 import { apiGetCollectionAlbums } from "@/components/apiclient";
 import { useLoginStateContext } from "@/components/loginstateprovider";
 import { APIAlbum } from "@/util/models/album";
@@ -12,6 +13,7 @@ export default function CollectionAlbumsPage() {
   const router = useRouter();
 
   const [albums, setAlbums] = useState([] as APIAlbum[]);
+  const [alerts, setAlerts] = useState([] as AlertEntry[]);
 
   useEffect(() => {
     // wait for credentials to be loaded
@@ -31,8 +33,8 @@ export default function CollectionAlbumsPage() {
         setAlbums(res.data as APIAlbum[]);
       })
       .catch(err => {
+        setAlerts([...alerts, { severity: "error", message: "Error fetching albums, see console for details." }]);
         console.error(err);
-        // TODO UI error popup
       })
   }, [loginState]);
 
@@ -42,6 +44,8 @@ export default function CollectionAlbumsPage() {
 
   return (
     <Box sx={{ height: 1 }}>
+      <AlertComponent alerts={alerts} setAlerts={setAlerts} />
+
       <Box sx={{ padding: 2 }}>
         <Typography variant="h6">Albums</Typography>
       </Box>

website/app/collection/artists/page.tsx

@@ -1,5 +1,6 @@
 'use client'
 
+import AlertComponent, { AlertEntry } from "@/components/alerts";
 import { apiGetCollectionArtists } from "@/components/apiclient";
 import { useLoginStateContext } from "@/components/loginstateprovider";
 import { APIArtist } from "@/util/models/artist";
@@ -12,6 +13,7 @@ export default function CollectionArtistsPage() {
   const router = useRouter();
 
   const [artists, setArtists] = useState([] as APIArtist[]);
+  const [alerts, setAlerts] = useState([] as AlertEntry[]);
 
   useEffect(() => {
     // wait for credentials to be loaded
@@ -25,14 +27,14 @@ export default function CollectionArtistsPage() {
       return;
     }
 
-    // load albums
+    // load artists
     apiGetCollectionArtists(loginState.loggedInUserUuid)
       .then(res => {
         setArtists(res.data as APIArtist[]);
       })
       .catch(err => {
+        setAlerts([...alerts, { severity: "error", message: "Error fetching artists, see console for details." }]);
         console.error(err);
-        // TODO UI error popup
       })
   }, [loginState]);
 
@@ -42,6 +44,8 @@ export default function CollectionArtistsPage() {
 
   return (
     <Box sx={{ height: 1 }}>
+      <AlertComponent alerts={alerts} setAlerts={setAlerts} />
+
       <Box sx={{ padding: 2 }}>
         <Typography variant="h6">Artists</Typography>
       </Box>

website/app/collection/page.tsx

@@ -11,13 +11,15 @@ import { LazyLoadImage } from 'react-lazy-load-image-component';
 
 import '@/components/tracktable.css';
 import { useLoginStateContext } from "@/components/loginstateprovider";
+import AlertComponent, { AlertEntry } from "@/components/alerts";
 
 export default function CollectionPage() {
   const appState = useAppStateContext();
   const loginState = useLoginStateContext();
   const router = useRouter();
 
   const [tracks, setTracks] = useState([] as APITrack[]);
+  const [alerts, setAlerts] = useState([] as AlertEntry[]);
 
   useEffect(() => {
     // wait for credentials to be loaded
@@ -37,8 +39,8 @@ export default function CollectionPage() {
         setTracks(res.data as APITrack[]);
       })
       .catch(err => {
+        setAlerts([...alerts, { severity: "error", message: "Error fetching tracks, see console for details." }]);
         console.error(err);
-        // TODO UI error popup
       });
   }, [loginState]);
 
@@ -52,6 +54,8 @@ export default function CollectionPage() {
 
   return (
     <Box sx={{ height: 1 }}>
+      <AlertComponent alerts={alerts} setAlerts={setAlerts} />
+
       <Box sx={{ padding: 2 }}>
         <Typography variant="h6">Tracks</Typography>
       </Box>

website/app/collection/upload/page.tsx

@@ -8,12 +8,14 @@ import { useDropzone } from 'react-dropzone'
 
 import '@/app/collection/upload/style.css';
 import { apiPostCollectionTracks } from "@/components/apiclient";
+import AlertComponent, { AlertEntry } from "@/components/alerts";
 
 export default function CollectionUploadPage() {
   const router = useRouter();
   const loginState = useLoginStateContext();
 
   const [files, setFiles] = useState<any[]>([]);
+  const [alerts, setAlerts] = useState([] as AlertEntry[]);
 
   const onDrop = useCallback((acceptedFiles: any) => {
     console.log(acceptedFiles);
@@ -44,13 +46,16 @@ export default function CollectionUploadPage() {
           setFiles(newFiles);
         })
         .catch(err => {
-          // TODO display error popup
+          setAlerts([...alerts, { severity: "error", message: "Error uploading file, see console for details." }]);
+          console.error(err);
         });
     }
   };
 
   return (
     <Box sx={{ height: 1 }}>
+      <AlertComponent alerts={alerts} setAlerts={setAlerts} />
+
       <Box sx={{ padding: 2 }}>
         <Typography variant="h6">Upload</Typography>
 

website/app/login/page.tsx

@@ -1,7 +1,7 @@
 'use client'
 
+import AlertComponent, { AlertEntry } from "@/components/alerts";
 import { apiPostLogin } from "@/components/apiclient";
-import { useAppStateContext } from "@/components/appstateprovider";
 import { useLoginStateContext } from "@/components/loginstateprovider";
 import { Box, Button, Container, TextField, Typography } from "@mui/material";
 import Link from "next/link";
@@ -11,6 +11,7 @@ import { useState } from "react";
 export default function LoginPage() {
   const [username, setUsername] = useState("");
   const [password, setPassword] = useState("");
+  const [alerts, setAlerts] = useState<AlertEntry[]>([]);
 
   const loginState = useLoginStateContext();
 
@@ -23,12 +24,15 @@ export default function LoginPage() {
         router.push('/');
       })
       .catch(err => {
-        // TODO display popup with error message
+        setAlerts([...alerts, { severity: "error", message: "Invalid credentials!" }]);
+        console.error(err);
       });
   };
 
   return (
     <Container maxWidth="xs">
+      <AlertComponent alerts={alerts} setAlerts={setAlerts} />
+
       <Box 
         sx={{
           my: 4,

website/app/page.tsx

@@ -1,6 +1,5 @@
 'use client'
 
-import { useAppStateContext } from "@/components/appstateprovider";
 import { useLoginStateContext } from "@/components/loginstateprovider";
 import { useRouter } from "next/navigation";
 import { useEffect } from "react";

website/app/register/page.tsx

@@ -5,11 +5,13 @@ import { Box, Button, Container, TextField, Typography } from "@mui/material";
 import Link from "next/link";
 import { useState } from "react";
 import { useRouter } from "next/navigation";
+import AlertComponent, { AlertEntry } from "@/components/alerts";
 
 export default function RegisterPage() {
   const [username, setUsername] = useState("");
   const [password, setPassword] = useState("");
   const [confirmPassword, setConfirmPassword] = useState("");
+  const [alerts, setAlerts] = useState([] as AlertEntry[]);
 
   const router = useRouter();
 
@@ -19,12 +21,15 @@ export default function RegisterPage() {
         router.push('/login');
       })
       .catch(err => {
-        // TODO display popup with error message
+        setAlerts([...alerts, { severity: "error", message: "Issue with registration, see console for details." }]);
+        console.error(err);
       });
   };
 
   return (
     <Container maxWidth="xs">
+      <AlertComponent alerts={alerts} setAlerts={setAlerts} />
+
       <Box 
         sx={{
           my: 4,

website/components/alerts.tsx

@@ -0,0 +1,31 @@
+import { Alert, AlertColor, Snackbar } from "@mui/material";
+
+export type AlertEntry = {
+  severity: AlertColor
+  message: string
+};
+
+export default function AlertComponent({ alerts, setAlerts }: { alerts: AlertEntry[], setAlerts: any }) {
+
+  const closeAlert = (alert: AlertEntry) => {
+    return () => setAlerts(alerts.filter(a => alert != a));
+  }
+
+  return (
+    <>
+      {
+        alerts.map((alert, index) => (
+          <Snackbar 
+            key={index} 
+            open={true}
+            anchorOrigin={{ vertical: 'top', horizontal: 'right' }}
+          >
+            <Alert severity={alert.severity} onClose={closeAlert(alert)} sx={{ width: '100%' }}>
+              {alert.message}
+            </Alert>
+          </Snackbar>
+        ))
+      }
+    </>
+  );
+}