Added normal/wish list navigation and data retrieval

davewalker5 · Nov 10, 2023 · eaea1e3 · eaea1e3
1 parent 6c69b39
commit eaea1e3
Show file tree

Hide file tree

Showing 14 changed files with 123 additions and 54 deletions.
diff --git a/src/music-catalogue-ui/components/albumList.js b/src/music-catalogue-ui/components/albumList.js
@@ -5,11 +5,19 @@ import { apiDeleteAlbum, apiFetchAlbumsByArtist } from "@/helpers/api";
 
 /**
  * Component to render the table of all albums by the specified artist
- * @param {*} param0
+ * @param {*} artist
+ * @param {*} isWishList
+ * @param {*} navigate
+ * @param {*} logout
  * @returns
  */
-const AlbumList = ({ artist, navigate, logout }) => {
-  const { albums, setAlbums } = useAlbums(artist.id, logout);
+const AlbumList = ({ artist, isWishList, navigate, logout }) => {
+  const { albums, setAlbums } = useAlbums(artist.id, isWishList, logout);
+
+  // Set the page title to reflect whether we're viewing the wish list
+  const title = isWishList
+    ? `Wish List for ${artist.name}`
+    : `Albums by ${artist.name}`;
 
   /* Callback to prompt for confirmation and delete an album */
   const confirmDeleteAlbum = useCallback(
@@ -27,18 +35,22 @@ const AlbumList = ({ artist, navigate, logout }) => {
         const result = await apiDeleteAlbum(album.id, logout);
         if (result) {
           // Successful, so refresh the album list
-          const fetchedAlbums = await apiFetchAlbumsByArtist(artist.id, logout);
+          const fetchedAlbums = await apiFetchAlbumsByArtist(
+            artist.id,
+            isWishList,
+            logout
+          );
           setAlbums(fetchedAlbums);
         }
       }
     },
-    [artist, setAlbums, logout]
+    [artist, isWishList, setAlbums, logout]
   );
 
   return (
     <>
       <div className="row mb-2 pageTitle">
-        <h5 className="themeFontColor text-center">Albums by {artist.name}</h5>
+        <h5 className="themeFontColor text-center">{title}</h5>
       </div>
       <table className="table table-hover">
         <thead>
@@ -57,6 +69,7 @@ const AlbumList = ({ artist, navigate, logout }) => {
               id={a.id}
               artist={artist}
               album={a}
+              isWishList={isWishList}
               navigate={navigate}
               deleteAlbum={confirmDeleteAlbum}
             />

diff --git a/src/music-catalogue-ui/components/albumRow.js b/src/music-catalogue-ui/components/albumRow.js
@@ -4,22 +4,26 @@ import { faTrashAlt } from "@fortawesome/free-solid-svg-icons";
 
 /**
  * Component to render a row containing the details of a single album
- * @param {*} param0
+ * @param {*} artist
+ * @param {*} album
+ * @param {*} isWishList
+ * @param {*} navigate
+ * @param {*} deleteAlbum
  * @returns
  */
-const AlbumRow = ({ artist, album, navigate, deleteAlbum }) => {
+const AlbumRow = ({ artist, album, isWishList, navigate, deleteAlbum }) => {
   return (
     <tr>
-      <td onClick={() => navigate(pages.tracks, artist, album)}>
+      <td onClick={() => navigate(pages.tracks, artist, album, isWishList)}>
         {artist.name}
       </td>
-      <td onClick={() => navigate(pages.tracks, artist, album)}>
+      <td onClick={() => navigate(pages.tracks, artist, album, isWishList)}>
         {album.title}
       </td>
-      <td onClick={() => navigate(pages.tracks, artist, album)}>
+      <td onClick={() => navigate(pages.tracks, artist, album, isWishList)}>
         {album.genre}
       </td>
-      <td onClick={() => navigate(pages.tracks, artist, album)}>
+      <td onClick={() => navigate(pages.tracks, artist, album, isWishList)}>
         {album.released}
       </td>
       <td>

diff --git a/src/music-catalogue-ui/components/app.js b/src/music-catalogue-ui/components/app.js
@@ -10,6 +10,7 @@ const defaultContext = {
   page: pages.artists,
   artist: null,
   album: null,
+  isWishList: false,
 };
 
 const App = () => {
@@ -20,11 +21,12 @@ const App = () => {
   const [context, setContext] = useState(defaultContext);
 
   // Callback to set the context
-  const navigate = useCallback((page, artist, album) => {
+  const navigate = useCallback((page, artist, album, isWishList) => {
     setContext({
       page: page,
       artist: artist,
       album: album,
+      isWishList: isWishList,
     });
   }, []);
 

diff --git a/src/music-catalogue-ui/components/artistList.js b/src/music-catalogue-ui/components/artistList.js
@@ -5,21 +5,21 @@ import pages from "@/helpers/navigation";
 
 /**
  * Component to render a table listing all the artists in the catalogue
- * @param {*} param0
+ * @param {*} isWishList
+ * @param {*} navigate
+ * @param {*} logout
  * @returns
  */
-const ArtistList = ({ navigate, logout }) => {
-  const { artists, setArtists } = useArtists(logout);
+const ArtistList = ({ isWishList, navigate, logout }) => {
+  const { artists, setArtists } = useArtists(isWishList, logout);
 
-  // Callback to navigate to the lookup page
-  const lookup = useCallback(() => {
-    navigate(pages.lookup, null, null);
-  }, [navigate]);
+  // Set the page title to reflect whether we're viewing the wish list
+  const title = isWishList ? "Wish List Artists" : "Artists";
 
   return (
     <>
       <div className="row mb-2 pageTitle">
-        <h5 className="themeFontColor text-center">Artists</h5>
+        <h5 className="themeFontColor text-center">{title}</h5>
       </div>
       <table className="table table-hover">
         <thead>
@@ -32,7 +32,12 @@ const ArtistList = ({ navigate, logout }) => {
         {artists != null && (
           <tbody>
             {artists.map((a) => (
-              <ArtistRow key={a.id} artist={a} navigate={navigate} />
+              <ArtistRow
+                key={a.id}
+                artist={a}
+                isWishList={isWishList}
+                navigate={navigate}
+              />
             ))}
           </tbody>
         )}

diff --git a/src/music-catalogue-ui/components/artistRow.js b/src/music-catalogue-ui/components/artistRow.js
@@ -2,12 +2,14 @@ import pages from "@/helpers/navigation";
 
 /**
  * Component to render a row containing the details for a single artist
- * @param {*} param0
+ * @param {*} artist
+ * @param {*} isWishList
+ * @param {*} navigate
  * @returns
  */
-const ArtistRow = ({ artist, navigate }) => {
+const ArtistRow = ({ artist, isWishList, navigate }) => {
   return (
-    <tr onClick={() => navigate(pages.albums, artist, null)}>
+    <tr onClick={() => navigate(pages.albums, artist, null, isWishList)}>
       <td>{artist.name}</td>
       <td>{artist.albumCount}</td>
       <td>{artist.trackCount}</td>

diff --git a/src/music-catalogue-ui/components/componentPicker.js b/src/music-catalogue-ui/components/componentPicker.js
@@ -9,17 +9,26 @@ import JobStatusReport from "./jobStatusReport";
 /**
  * Component using the current page name to render the components required
  * by that page
- * @param {*} param0
+ * @param {*} context
+ * @param {*} navigate
+ * @param {*} logout
  * @returns
  */
 const ComponentPicker = ({ context, navigate, logout }) => {
   switch (context.page) {
     case pages.artists:
-      return <ArtistList navigate={navigate} logout={logout} />;
+      return (
+        <ArtistList
+          isWishList={context.isWishList}
+          navigate={navigate}
+          logout={logout}
+        />
+      );
     case pages.albums:
       return (
         <AlbumList
           artist={context.artist}
+          isWishList={context.isWishList}
           navigate={navigate}
           logout={logout}
         />
@@ -29,6 +38,7 @@ const ComponentPicker = ({ context, navigate, logout }) => {
         <TrackList
           artist={context.artist}
           album={context.album}
+          isWishList={context.isWishList}
           navigate={navigate}
           logout={logout}
         />

diff --git a/src/music-catalogue-ui/components/lookupAlbum.js b/src/music-catalogue-ui/components/lookupAlbum.js
@@ -5,7 +5,8 @@ import { apiFetchArtistById, apiLookupAlbum } from "@/helpers/api";
 
 /**
  * Component to render the album lookup page
- * @param {*} param0
+ * @param {*} navigate
+ * @param {*} logout
  * @returns
  */
 const LookupAlbum = ({ navigate, logout }) => {
@@ -25,7 +26,8 @@ const LookupAlbum = ({ navigate, logout }) => {
       const artist = await apiFetchArtistById(album.artistId, logout);
       if (artist != null) {
         // Navigate to the track list
-        navigate(pages.tracks, artist, album);
+        // TODO: Set the isWishList flag from the form
+        navigate(pages.tracks, artist, album, false);
       } else {
         setErrorMessage(`Artist with id ${album.artistId} not found`);
       }

diff --git a/src/music-catalogue-ui/components/menuBar.js b/src/music-catalogue-ui/components/menuBar.js
@@ -12,7 +12,7 @@ const MenuBar = ({ navigate, logout }) => {
             src="./logo.png"
             alt="Music Catalogue"
             className={styles.logo}
-            onClick={() => navigate(pages.artists, null, null)}
+            onClick={() => navigate(pages.artists, null, null, false)}
           />
         </div>
         <div className={styles.title}>Music Catalogue</div>
@@ -25,15 +25,22 @@ const MenuBar = ({ navigate, logout }) => {
             </div>
           </button>
           <div className={styles.dropdownContent}>
-            <a onClick={() => navigate(pages.jobStatusReport, null, null)}>
+            <a
+              onClick={() => navigate(pages.jobStatusReport, null, null, false)}
+            >
               Job Status
             </a>
           </div>
         </div>
-        <a onClick={() => navigate(pages.export, null, null)}>Export</a>
+        <a onClick={() => navigate(pages.export, null, null, false)}>Export</a>
         <a href="#">Import</a>
-        <a onClick={() => navigate(pages.lookup, null, null)}>Search</a>
-        <a onClick={() => navigate(pages.artists, null, null)}>Artists</a>
+        <a onClick={() => navigate(pages.lookup, null, null, false)}>Search</a>
+        <a onClick={() => navigate(pages.artists, null, null, true)}>
+          Wish List
+        </a>
+        <a onClick={() => navigate(pages.artists, null, null, false)}>
+          Artists
+        </a>
       </div>
     </>
   );

diff --git a/src/music-catalogue-ui/components/trackList.js b/src/music-catalogue-ui/components/trackList.js
@@ -5,23 +5,35 @@ import pages from "@/helpers/navigation";
 
 /**
  * Component to render the list of tracks for the specified album
- * @param {*} param0
+ * @param {*} artist
+ * @param {*} album
+ * @param {*} isWishList
+ * @param {*} navigate
+ * @param {*} logout
  * @returns
  */
-const TrackList = ({ artist, album, navigate, logout }) => {
+const TrackList = ({ artist, album, isWishList, navigate, logout }) => {
   const { tracks, setTracks } = useTracks(album.id, logout);
 
+  // Set the page title to reflect whether we're viewing the wish list
+  const title = isWishList
+    ? `${artist.name} - ${album.title} (Wish List)`
+    : `${artist.name} - ${album.title}`;
+
+  // Set the back button text to indicate whether we're viewing the wish list
+  const backButtonText = isWishList
+    ? `Back to Wish List for ${artist.name}`
+    : `Back to Albums by ${artist.name}`;
+
   // Backwards navigation callback
   const navigateBack = useCallback(() => {
-    navigate(pages.albums, artist, null);
-  }, [navigate, artist]);
+    navigate(pages.albums, artist, null, isWishList);
+  }, [navigate, artist, isWishList]);
 
   return (
     <>
       <div className="row mb-2 pageTitle">
-        <h5 className="themeFontColor text-center">
-          {artist.name} - {album.title}
-        </h5>
+        <h5 className="themeFontColor text-center">{title}</h5>
       </div>
       <table className="table table-hover">
         <thead>
@@ -40,13 +52,14 @@ const TrackList = ({ artist, album, navigate, logout }) => {
               artist={artist}
               album={album}
               track={t}
+              isWishList={isWishList}
               navigate={navigate}
             />
           ))}
         </tbody>
       </table>
       <button className="btn btn-primary" onClick={() => navigateBack()}>
-        &lt; Back to Albums By {artist.name}
+        &lt; {backButtonText}
       </button>
     </>
   );

diff --git a/src/music-catalogue-ui/components/trackRow.js b/src/music-catalogue-ui/components/trackRow.js
@@ -6,13 +6,13 @@ import pages from "@/helpers/navigation";
  * @param {*} param0
  * @returns
  */
-const TrackRow = ({ artist, album, track, navigate }) => {
+const TrackRow = ({ artist, album, track, isWishList, navigate }) => {
   return (
     <tr>
       <td>{album.title}</td>
       <td
         className={styles.artist}
-        onClick={() => navigate(pages.albums, artist, null)}
+        onClick={() => navigate(pages.albums, artist, null, isWishList)}
       >
         {artist.name}
       </td>

diff --git a/src/music-catalogue-ui/helpers/api.js b/src/music-catalogue-ui/helpers/api.js
@@ -146,12 +146,13 @@ const apiAuthenticate = async (username, password) => {
 
 /**
  * Fetch a list of all artists from the Music Catalogue REST API
+ * @param {*} isWishList
  * @param {*} logout
  * @returns
  */
-const apiFetchAllArtists = async (logout) => {
+const apiFetchAllArtists = async (isWishList, logout) => {
   // Call the API to get a list of all artists
-  const url = `${config.api.baseUrl}/artists/`;
+  const url = `${config.api.baseUrl}/artists/${isWishList}`;
   const response = await fetch(url, {
     method: "GET",
     headers: apiGetHeaders(),
@@ -200,12 +201,14 @@ const apiFetchArtistById = async (artistId, logout) => {
  * Fetch a list of albums by the specified artist from the Music Catalogue
  * REST API
  * @param {*} artistId
+ * @param {*} isWishList
  * @param {*} logout
  * @returns
  */
-const apiFetchAlbumsByArtist = async (artistId, logout) => {
+const apiFetchAlbumsByArtist = async (artistId, isWishList, logout) => {
   // Call the API to get a list of all albums by the specified artist
-  const url = `${config.api.baseUrl}/albums/artist/${artistId}`;
+  const url = `${config.api.baseUrl}/albums/artist/${artistId}/${isWishList}`;
+  console.log(url);
   const response = await fetch(url, {
     method: "GET",
     headers: apiGetHeaders(),

diff --git a/src/music-catalogue-ui/helpers/navigation.js b/src/music-catalogue-ui/helpers/navigation.js
@@ -1,6 +1,8 @@
 const pages = {
   artists: "Artists",
+  wishlistArtists: "WishlistArtists",
   albums: "Albums",
+  wishlistAlbums: "wishlistAlbums",
   tracks: "Tracks",
   lookup: "Lookup",
   export: "Export",