tabris/music-collection
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Adding toast notifications
All checks were successful
Music Collection CI Workflow / test (./backend) (push) Successful in 34s
Details
Music Collection CI Workflow / test (./frontend) (push) Successful in 38s
Details
Music Collection CI Workflow / build-and-push-images (./backend/Dockerfile, git.anatid.net/tabris/music-collection-backend, ./backend) (push) Successful in 51s
Details
Music Collection CI Workflow / build-and-push-images (./frontend/Dockerfile, git.anatid.net/tabris/music-collection-frontend, ./frontend) (push) Successful in 1m48s
Details
Music Collection CI Workflow / deploy (push) Successful in 23s
Details

Browse Source
This commit is contained in:
Phill Pover 2025-04-07 10:10:09 +01:00
parent 8299929e71
commit 13f8cbb3ec
2 changed files with 66 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

41
frontend/src/app/album/[id]/page.tsx
View File

@ -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>
</>
);
}

44
frontend/src/app/album/page.tsx
View File

@ -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>
</>
);
}