Merge pull request #41 from davewalker5/MC-256-Purchase-Retailer-Bug

Fixup purchase details retailer selection bug

docker/ui/Dockerfile

@@ -1,6 +1,6 @@
 FROM node:20-alpine
-COPY musiccatalogue.ui-1.25.0.0 /opt/musiccatalogue.ui-1.25.0.0
-WORKDIR /opt/musiccatalogue.ui-1.25.0.0
+COPY musiccatalogue.ui-1.26.0.0 /opt/musiccatalogue.ui-1.26.0.0
+WORKDIR /opt/musiccatalogue.ui-1.26.0.0
 RUN npm install
 RUN npm run build
 ENTRYPOINT [ "npm", "start" ]

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

@@ -5,8 +5,7 @@ import CurrencyInput from "react-currency-input-field";
 import config from "../config.json";
 import pages from "@/helpers/navigation";
 import { apiSetAlbumPurchaseDetails } from "@/helpers/apiAlbums";
-import Select from "react-select";
-import useRetailers from "@/hooks/useRetailers";
+import RetailerSelector from "./retailerSelector";
 
 /**
  * Form to set the album purchase details for an album
@@ -17,22 +16,12 @@ import useRetailers from "@/hooks/useRetailers";
  * @param {*} logout
  */
 const AlbumPurchaseDetails = ({ artist, album, navigate, logout }) => {
-  const { retailers: retailers, setRetailers } = useRetailers(logout);
-
-  // Construct the options for the retailer drop-down
-  let options = [];
-  for (let i = 0; i < retailers.length; i++) {
-    options = [
-      ...options,
-      { value: retailers[i].id, label: retailers[i].name },
-    ];
-  }
-
   // Get the initial retailer selection and purchase date
   let initialRetailer = null;
   let initialPurchaseDate = new Date();
   if (album != null) {
-    initialRetailer = options.find((x) => x.value == album.retailerId);
+    initialRetailer = album.retailer;
+
     if (album.purchased != null) {
       initialPurchaseDate = new Date(album.purchased);
     }
@@ -54,7 +43,7 @@ const AlbumPurchaseDetails = ({ artist, album, navigate, logout }) => {
       const updatedPurchaseDate =
         album.isWishListItem == false ? purchaseDate : null;
       const updatedPrice = price != undefined ? price : null;
-      const updatedRetailerId = retailer != null ? retailer.value.id : null;
+      const updatedRetailerId = retailer != null ? retailer.id : null;
 
       // Apply the updates
       const updatedAlbum = await apiSetAlbumPurchaseDetails(
@@ -129,10 +118,10 @@ const AlbumPurchaseDetails = ({ artist, album, navigate, logout }) => {
                 Retailer
               </label>
               <div>
-                <Select
-                  value={retailer}
-                  onChange={setRetailer}
-                  options={options}
+                <RetailerSelector
+                  initialRetailer={retailer}
+                  retailerChangedCallback={setRetailer}
+                  logout={logout}
                 />
               </div>
             </div>

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

@@ -22,10 +22,8 @@ const GenreSelector = ({ initialGenre, genreChangedCallback, logout }) => {
 
   // Determine the initial selection
   let selectedOption = null;
-  let initialInput = null;
   if (initialGenre != null) {
     selectedOption = options.find((x) => x.value === initialGenre.id);
-    initialInput = initialGenre.name;
   }
 
   // Set up state
@@ -34,8 +32,8 @@ const GenreSelector = ({ initialGenre, genreChangedCallback, logout }) => {
   // Callback to update the genre state and notify the parent component
   // that the genre has changed
   const genreChanged = (e) => {
-    const updatedSelection = options.find((x) => x.value === e.value);
     // Update local state with the selection from the drop-down
+    const updatedSelection = options.find((x) => x.value === e.value);
     setGenre(updatedSelection);
 
     // Notify the parent component with a genre object

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

@@ -0,0 +1,62 @@
+import Select from "react-select";
+import useRetailers from "@/hooks/useRetailers";
+import { useState } from "react";
+
+/**
+ * Component to display the retailer selector
+ * @param {*} initialRetailer
+ * @param {*} retailerChangedCallback
+ * @param {*} logout
+ * @returns
+ */
+const RetailerSelector = ({
+  initialRetailer,
+  retailerChangedCallback,
+  logout,
+}) => {
+  const { retailers, setRetailers } = useRetailers(logout);
+
+  let options = [];
+  if (retailers.length > 0) {
+    // Construct the options for the retailers drop-down
+    for (let i = 0; i < retailers.length; i++) {
+      options = [
+        ...options,
+        { value: retailers[i].id, label: retailers[i].name },
+      ];
+    }
+  }
+
+  // Determine the initial selection
+  let selectedOption = null;
+  if (initialRetailer != null) {
+    selectedOption = options.find((x) => x.value === initialRetailer.id);
+  }
+
+  // Set up state
+  const [retailer, setRetailer] = useState(selectedOption);
+
+  // Callback to update the genre state and notify the parent component
+  // that the genre has changed
+  const retailerChanged = (e) => {
+    // Update local state with the selected option
+    const updatedSelection = options.find((x) => x.value === e.value);
+    setRetailer(updatedSelection);
+
+    // Notify the parent component with a partial retailer object
+    retailerChangedCallback({
+      id: updatedSelection.value,
+      name: updatedSelection.label,
+    });
+  };
+
+  return (
+    <Select
+      value={selectedOption}
+      onChange={retailerChanged}
+      options={options}
+    />
+  );
+};
+
+export default RetailerSelector;

src/music-catalogue-ui/helpers/apiAlbums.js

@@ -215,9 +215,6 @@ const apiLookupAlbum = async (
  * @returns
  */
 const apiSetAlbumWishListFlag = async (album, wishListFlag, logout) => {
-  // Update the album properties
-  album.isWishListItem = wishListFlag;
-
   // Send the update request to the API and return the response
   const response = await apiUpdateAlbum(
     album.id,
@@ -226,7 +223,7 @@ const apiSetAlbumWishListFlag = async (album, wishListFlag, logout) => {
     album.title,
     album.released,
     album.coverUrl,
-    album.isWishListItem,
+    wishListFlag,
     album.purchased,
     album.price,
     album.retailerId,
@@ -251,11 +248,6 @@ const apiSetAlbumPurchaseDetails = async (
   retailerId,
   logout
 ) => {
-  // Update the purchase details
-  album.purchased = purchaseDate;
-  album.price = price;
-  album.retailerId = retailerId;
-
   // Send the update request to the API and return the response
   const response = await apiUpdateAlbum(
     album.id,
@@ -265,9 +257,9 @@ const apiSetAlbumPurchaseDetails = async (
     album.released,
     album.coverUrl,
     album.isWishListItem,
-    album.purchased,
-    album.price,
-    album.retailerId,
+    purchaseDate,
+    price,
+    retailerId,
     logout
   );
   return response;

src/music-catalogue-ui/hooks/useRetailers.js

@@ -24,7 +24,7 @@ const useRetailers = (logout) => {
     fetchReetailers();
   }, [logout]);
 
-  return { retailers: retailers, setRetailers: setRetailers };
+  return { retailers, setRetailers };
 };
 
 export default useRetailers;