@@ -21,15 +47,18 @@ const AlbumList = ({ artist, navigate, logout }) => {
Album Title |
Genre |
Released |
+
|
- {albums.map((a) => (
+ {(albums ?? []).map((a) => (
))}
diff --git a/src/music-catalogue-ui/components/albumRow.js b/src/music-catalogue-ui/components/albumRow.js
index 4602c02..661aff8 100644
--- a/src/music-catalogue-ui/components/albumRow.js
+++ b/src/music-catalogue-ui/components/albumRow.js
@@ -1,17 +1,33 @@
import pages from "@/helpers/navigation";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faTrashAlt } from "@fortawesome/free-solid-svg-icons";
/**
* Component to render a row containing the details of a single album
* @param {*} param0
* @returns
*/
-const AlbumRow = ({ artist, album, navigate }) => {
+const AlbumRow = ({ artist, album, navigate, deleteAlbum }) => {
return (
-
navigate(pages.tracks, artist, album)}>
- {artist.name} |
- {album.title} |
- {album.genre} |
- {album.released} |
+
+ navigate(pages.tracks, artist, album)}>
+ {artist.name}
+ |
+ navigate(pages.tracks, artist, album)}>
+ {album.title}
+ |
+ navigate(pages.tracks, artist, album)}>
+ {album.genre}
+ |
+ navigate(pages.tracks, artist, album)}>
+ {album.released}
+ |
+
+ deleteAlbum(e, album)}
+ />
+ |
);
};
diff --git a/src/music-catalogue-ui/helpers/api.js b/src/music-catalogue-ui/helpers/api.js
index 63816c1..ee999d1 100644
--- a/src/music-catalogue-ui/helpers/api.js
+++ b/src/music-catalogue-ui/helpers/api.js
@@ -231,7 +231,7 @@ const apiFetchAlbumsByArtist = async (artistId, logout) => {
* @returns
*/
const apiFetchAlbumById = async (albumId, logout) => {
- // Call the API to get the details for the specifiedf album
+ // Call the API to get the details for the specified album
const url = `${config.api.baseUrl}/albums/${albumId}`;
const response = await fetch(url, {
method: "GET",
@@ -250,6 +250,29 @@ const apiFetchAlbumById = async (albumId, logout) => {
}
};
+/**
+ * Delete the album with the specified ID, along with all its tracks
+ * @param {*} albumId
+ * @param {*} logout
+ * @returns
+ */
+const apiDeleteAlbum = async (albumId, logout) => {
+ // Call the API to delete the specified album
+ const url = `${config.api.baseUrl}/albums/${albumId}`;
+ const response = await fetch(url, {
+ method: "DELETE",
+ headers: apiGetHeaders(),
+ });
+
+ if (response.status == 401) {
+ // Unauthorized so the token's likely expired - force a login
+ logout();
+ } else {
+ // Return the response status code
+ return response.ok;
+ }
+};
+
/**
* Look up an album using the REST API, calling the external service for the
* details if not found in the local database
@@ -362,6 +385,7 @@ export {
apiFetchArtistById,
apiFetchAlbumsByArtist,
apiFetchAlbumById,
+ apiDeleteAlbum,
apiLookupAlbum,
apiRequestExport,
apiJobStatusReport,
diff --git a/wireframes/Music Catalogue - v8.00.pdf b/wireframes/Music Catalogue - v8.00.pdf
new file mode 100644
index 0000000..2d9bd09
Binary files /dev/null and b/wireframes/Music Catalogue - v8.00.pdf differ
diff --git a/wireframes/Music Catalogue.bmpr b/wireframes/Music Catalogue.bmpr
index 6c3aeca..6ccb7a0 100644
Binary files a/wireframes/Music Catalogue.bmpr and b/wireframes/Music Catalogue.bmpr differ