Refactor album wish list management components

src/music-catalogue-ui/components/albumRow.js

@@ -1,7 +1,6 @@
 import pages from "@/helpers/navigation";
-import DeleteAlbum from "./deleteAlbum";
-import AddAlbumToWishList from "./addAlbumToWishList";
-import AddAlbumToCatalogue from "./addAlbumToCatalogue";
+import DeleteAlbumActionIcon from "./deleteAlbumActionIcon";
+import AlbumWishListActionIcon from "./albumWishListActionIcon";
 
 /**
  * Component to render a row containing the details of a single album
@@ -36,29 +35,21 @@ const AlbumRow = ({
         {album.released}
       </td>
       <td>
-        <DeleteAlbum
+        <DeleteAlbumActionIcon
           album={album}
           isWishList={isWishList}
           logout={logout}
           setAlbums={setAlbums}
         />
       </td>
       <td>
-        {isWishList == false ? (
-          <AddAlbumToWishList
-            artistId={artist.id}
-            album={album}
-            logout={logout}
-            setAlbums={setAlbums}
-          />
-        ) : (
-          <AddAlbumToCatalogue
-            artistId={artist.id}
-            album={album}
-            logout={logout}
-            setAlbums={setAlbums}
-          />
-        )}
+        <AlbumWishListActionIcon
+          artistId={artist.id}
+          album={album}
+          isWishList={isWishList}
+          logout={logout}
+          setAlbums={setAlbums}
+        />
       </td>
     </tr>
   );

src/music-catalogue-ui/components/albumWishListActionIcon.js

@@ -0,0 +1,37 @@
+import { useCallback } from "react";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import {
+  faHeartCirclePlus,
+  faRecordVinyl,
+} from "@fortawesome/free-solid-svg-icons";
+import { apiSetAlbumWishListFlag, apiFetchAlbumsByArtist } from "@/helpers/api";
+
+const AlbumWishListActionIcon = ({
+  artistId,
+  album,
+  isWishList,
+  logout,
+  setAlbums,
+}) => {
+  // Set the icon depending on the direction in which the album will move
+  const icon = isWishList ? faRecordVinyl : faHeartCirclePlus;
+
+  /* Callback to move an album between the wish list and catalogue */
+  const setAlbumWishListFlag = useCallback(async () => {
+    // Move the album to the wish list
+    const result = await apiSetAlbumWishListFlag(album, !isWishList, logout);
+    if (result) {
+      // Successful, so refresh the album list
+      const fetchedAlbums = await apiFetchAlbumsByArtist(
+        artistId,
+        isWishList,
+        logout
+      );
+      setAlbums(fetchedAlbums);
+    }
+  }, [artistId, album, isWishList, logout, setAlbums]);
+
+  return <FontAwesomeIcon icon={icon} onClick={setAlbumWishListFlag} />;
+};
+
+export default AlbumWishListActionIcon;

src/music-catalogue-ui/components/deleteAlbum.js → src/music-catalogue-ui/components/deleteAlbumActionIcon.js

@@ -3,7 +3,7 @@ import { apiDeleteAlbum, apiFetchAlbumsByArtist } from "@/helpers/api";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faTrashAlt } from "@fortawesome/free-solid-svg-icons";
 
-const DeleteAlbum = ({ album, isWishList, logout, setAlbums }) => {
+const DeleteAlbumActionIcon = ({ album, isWishList, logout, setAlbums }) => {
   /* Callback to prompt for confirmation and delete an album */
   const confirmDeleteAlbum = useCallback(
     async (e, album) => {
@@ -40,4 +40,4 @@ const DeleteAlbum = ({ album, isWishList, logout, setAlbums }) => {
   );
 };
 
-export default DeleteAlbum;
+export default DeleteAlbumActionIcon;