Refactor API helper into one API helper per entity type

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

@@ -0,0 +1,93 @@
+import styles from "./albumPurchaseDetails.module.css";
+import DatePicker from "react-datepicker";
+import { useState } from "react";
+import CurrencyInput from "react-currency-input-field";
+import config from "../config.json";
+
+/**
+ * Form to set the album purchase details for an album
+ * @param {*} artist
+ * @param {*} album
+ * @param {*} isWishList
+ * @param {*} navigate
+ * @param {*} logout
+ */
+const AlbumPurchaseDetails = ({ artist, album, navigate, logout }) => {
+  // Get the retailer name and purchase date from the album
+  const retailerObject = album["retailer"];
+  const retailerName = retailerObject != null ? retailerObject["name"] : null;
+  const currentPurchaseDate =
+    album.purchased != null ? new Date(album.purchased) : new Date();
+
+  // Set up state
+  const [purchaseDate, setPurchaseDate] = useState(currentPurchaseDate);
+  const [price, setPrice] = useState(album.price);
+  const [retailer, setRetailer] = useState(retailerName);
+
+  return (
+    <>
+      <div className="row mb-2 pageTitle">
+        <h5 className="themeFontColor text-center">
+          {album.title} - {artist.name} - Purchase Details
+        </h5>
+      </div>
+      <div className={styles.purchaseDetailsFormContainer}>
+        <div className={styles.purchaseDetailsForm}>
+          <div>
+            {album.isWishListItem == true ? (
+              <></>
+            ) : (
+              <div className="form-group mt-3">
+                <label className={styles.purchaseDetailsFormLabel}>
+                  Purchase Date
+                </label>
+                <div>
+                  <DatePicker
+                    selected={purchaseDate}
+                    onChange={(date) => setPurchaseDate(date)}
+                  />
+                </div>
+              </div>
+            )}
+            <div className="form-group mt-3">
+              <label className={styles.purchaseDetailsFormLabel}>Price</label>
+              <div>
+                <CurrencyInput
+                  placeholder="Price"
+                  name="price"
+                  defaultValue={price}
+                  decimalsLimit={2}
+                  allowNegativeValue={false}
+                  disableAbbreviations={true}
+                  intlConfig={{
+                    locale: config.region.locale,
+                    currency: config.region.currency,
+                  }}
+                  onValueChange={(value, _) => setPrice(value)}
+                />
+              </div>
+            </div>
+            <div className="form-group mt-3">
+              <label className={styles.purchaseDetailsFormLabel}>
+                Retailer
+              </label>
+              <input
+                className="form-control mt-1"
+                placeholder="Retailer Name"
+                name="retailer"
+                value={retailer}
+                onChange={(e) => setRetailer(e.target.value)}
+              />
+            </div>
+            <div className="d-grid gap-2 mt-3"></div>
+            <div className={styles.purchaseDetailsButton}>
+              <button className="btn btn-primary">Save</button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </>
+  );
+};
+
+export default AlbumPurchaseDetails;

src/music-catalogue-ui/components/albumPurchaseDetails.module.css

@@ -0,0 +1,21 @@
+.purchaseDetailsFormContainer {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.purchaseDetailsForm {
+  width: 420px;
+  padding-top: 20px;
+  padding-bottom: 20px;
+}
+
+.purchaseDetailsFormLabel {
+  font-size: 14px;
+  font-weight: 600;
+  color: rgb(34, 34, 34);
+}
+
+.purchaseDetailsButton {
+  float: right;
+}

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

@@ -3,6 +3,8 @@ import DeleteAlbumActionIcon from "./deleteAlbumActionIcon";
 import AlbumWishListActionIcon from "./albumWishListActionIcon";
 import CurrencyFormatter from "./currencyFormatter";
 import DateFormatter from "./dateFormatter";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faCoins } from "@fortawesome/free-solid-svg-icons";
 
 /**
  * Component to render a row containing the details of a single album
@@ -67,6 +69,14 @@ const AlbumRow = ({
           setAlbums={setAlbums}
         />
       </td>
+      <td>
+        <FontAwesomeIcon
+          icon={faCoins}
+          onClick={() =>
+            navigate(pages.albumPurchaseDetails, artist, album, false)
+          }
+        />
+      </td>
     </tr>
   );
 };

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

@@ -4,8 +4,20 @@ import {
   faHeartCirclePlus,
   faRecordVinyl,
 } from "@fortawesome/free-solid-svg-icons";
-import { apiSetAlbumWishListFlag, apiFetchAlbumsByArtist } from "@/helpers/api";
+import {
+  apiSetAlbumWishListFlag,
+  apiFetchAlbumsByArtist,
+} from "@/helpers/apiAlbums";
 
+/**
+ * Icon and associated action to move an album between the catalogue and wish list
+ * @param {*} artistId
+ * @param {*} album
+ * @param {*} isWishList
+ * @param {*} logout
+ * @param {*} setAlbums
+ * @returns
+ */
 const AlbumWishListActionIcon = ({
   artistId,
   album,

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

@@ -2,7 +2,7 @@ import React, { useCallback, useState } from "react";
 import Login from "./login";
 import pages from "@/helpers/navigation";
 import ComponentPicker from "./componentPicker";
-import { apiClearToken } from "@/helpers/api";
+import { apiClearToken } from "@/helpers/apiToken";
 import useIsLoggedIn from "@/hooks/useIsLoggedIn";
 import MenuBar from "./menuBar";
 

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

@@ -1,7 +1,5 @@
-import { useCallback } from "react";
 import useArtists from "@/hooks/useArtists";
 import ArtistRow from "./artistRow";
-import pages from "@/helpers/navigation";
 
 /**
  * Component to render a table listing all the artists in the catalogue

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

@@ -5,6 +5,7 @@ import TrackList from "./trackList";
 import LookupAlbum from "./lookupAlbum";
 import ExportCatalogue from "./exportCatalogue";
 import JobStatusReport from "./jobStatusReport";
+import AlbumPurchaseDetails from "./albumPurchaseDetails";
 
 /**
  * Component using the current page name to render the components required
@@ -49,6 +50,15 @@ const ComponentPicker = ({ context, navigate, logout }) => {
       return <ExportCatalogue logout={logout} />;
     case pages.jobStatusReport:
       return <JobStatusReport logout={logout} />;
+    case pages.albumPurchaseDetails:
+      return (
+        <AlbumPurchaseDetails
+          artist={context.artist}
+          album={context.album}
+          navigate={navigate}
+          logout={logout}
+        />
+      );
     default:
       return <span />;
   }

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

@@ -1,5 +1,10 @@
 import config from "../config.json";
 
+/**
+ * Format a value as currency using the locale from the config file
+ * @param {*} param0
+ * @returns
+ */
 const CurrencyFormatter = ({ value, renderZeroAsBlank }) => {
   // Check there's a value to format
   if (value != null && (value > 0 || !renderZeroAsBlank)) {

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

@@ -1,5 +1,10 @@
 import config from "../config.json";
 
+/**
+ * Format a value as a date using the locale from the config file
+ * @param {*} param0
+ * @returns
+ */
 const DateFormatter = ({ value }) => {
   // Check there's a value to format
   if (value != null) {

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

@@ -1,8 +1,17 @@
 import { useCallback } from "react";
-import { apiDeleteAlbum, apiFetchAlbumsByArtist } from "@/helpers/api";
+import { apiDeleteAlbum, apiFetchAlbumsByArtist } from "@/helpers/apiAlbums";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faTrashAlt } from "@fortawesome/free-solid-svg-icons";
 
+/**
+ * Icon and associated action to delete an album
+ * @param {*} artistId
+ * @param {*} album
+ * @param {*} isWishList
+ * @param {*} logout
+ * @param {*} setAlbums
+ * @returns
+ */
 const DeleteAlbumActionIcon = ({
   artistId,
   album,

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

@@ -1,7 +1,12 @@
 import styles from "./exportCatalogue.module.css";
 import { useCallback, useState } from "react";
-import { apiRequestExport } from "@/helpers/api";
+import { apiRequestExport } from "@/helpers/apiDataExchange";
 
+/**
+ * Component to prompt for an export file name and request an export of the catalogue
+ * @param {*} logout
+ * @returns
+ */
 const ExportCatalogue = ({ logout }) => {
   const [fileName, setFileName] = useState("");
   const [message, setMessage] = useState("");

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

@@ -2,9 +2,14 @@ import React, { useCallback, useState } from "react";
 import styles from "./jobStatusReport.module.css";
 import DatePicker from "react-datepicker";
 import "react-datepicker/dist/react-datepicker.css";
-import { apiJobStatusReport } from "@/helpers/api";
+import { apiJobStatusReport } from "@/helpers/apiReports";
 import JobStatusRow from "./jobStatusRow";
 
+/**
+ * Component to display the job status search page and its results
+ * @param {*} logout
+ * @returns
+ */
 const JobStatusReport = ({ logout }) => {
   const [startDate, setStartDate] = useState(new Date());
   const [endDate, setEndDate] = useState(new Date());

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

@@ -1,6 +1,7 @@
 import styles from "./login.module.css";
 import { React, useState, useCallback } from "react";
-import { apiAuthenticate, apiSetToken } from "@/helpers/api";
+import { apiAuthenticate } from "@/helpers/apiAuthenticate";
+import { apiSetToken } from "@/helpers/apiToken";
 
 /**
  * Component to render the login page

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

@@ -1,7 +1,8 @@
 import styles from "./lookupAlbum.module.css";
 import pages from "@/helpers/navigation";
 import { useCallback, useState } from "react";
-import { apiFetchArtistById, apiLookupAlbum } from "@/helpers/api";
+import { apiFetchArtistById } from "@/helpers/apiArtists";
+import { apiLookupAlbum } from "@/helpers/apiAlbums";
 import Select from "react-select";
 
 /**

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

@@ -3,6 +3,12 @@ import pages from "../helpers/navigation";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faCaretDown } from "@fortawesome/free-solid-svg-icons";
 
+/**
+ * Component to render the menu bar
+ * @param {*} navigate
+ * @param {*} logout
+ * @returns
+ */
 const MenuBar = ({ navigate, logout }) => {
   return (
     <>