Added ability to add new tracks via the UI

README.md

@@ -186,6 +186,12 @@ MusicCatalogue.LookupTool --lookup "John Coltrane" "Blue Train" catalogue
 <img src="diagrams/track-list.png" alt="Track List" width="600">
 
 - Clicking on the artist name in any row in the track list or clicking on the "Back" button returns to the album list for that artist
+- Clicking on the "Delete" icon will prompt for confirmation and, if the action is confirmed, will delete the track
+- Clicking on the "Edit" icon opens the track editor to edit the track properties:
+
+<img src="diagrams/track-editor.png" alt="Track List" width="600">
+
+- Clicking on the "Add" button at the bottom of the track list will open a blank track editor to add and save a new track
 
 #### Browsing By Genre
 

docker/ui/Dockerfile

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

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

@@ -90,7 +90,7 @@ const RetailerEditor = ({ retailer, navigate, logout }) => {
         );
       }
 
-      // If all's well, display a confirmation message. Otherwise, show an error
+      // If all's well, navigate back to the retailers page. Otherwise, show an error
       if (updatedRetailer == null) {
         const action = retailer.Id <= 0 ? "adding" : "updating";
         setError(`An error occurred ${action} the retailer`);

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

@@ -8,16 +8,20 @@ const TrackEditor = ({ track, album, artist, navigate, logout }) => {
   // Split the track's formatted duration on the ":"
   let initialMinutes = null;
   let initialSeconds = null;
-  if (track.formattedDuration != null) {
+  if (track != null && track.formattedDuration != null) {
     const elements = track.formattedDuration.split(":");
     if (elements.length > 0) {
       initialMinutes = elements[0];
       initialSeconds = elements[1];
     }
   }
 
-  const [title, setTitle] = useState(track.title);
-  const [number, setNumber] = useState(track.number);
+  // Get initial values for the other properties
+  const initialTitle = track != null ? track.title : null;
+  const initialNumber = track != null ? track.number : null;
+
+  const [title, setTitle] = useState(initialTitle);
+  const [number, setNumber] = useState(initialNumber);
   const [minutes, setMinutes] = useState(initialMinutes);
   const [seconds, setSeconds] = useState(initialSeconds);
   const [error, setError] = useState("");
@@ -38,11 +42,10 @@ const TrackEditor = ({ track, album, artist, navigate, logout }) => {
         const durationSeconds = Number(seconds);
         const duration = 1000 * (60 * durationMinutes + durationSeconds);
 
-        // Either add or update the track, depending on whether they currently
-        // have an ID
+        // Either add or update the track, depending on whether there's an
+        // existing track or not
         let updatedTrack = null;
-        if (track.id <= 0) {
-          // Invalid ID, so create a new track
+        if (track == null) {
           updatedTrack = await apiCreateTrack(
             title,
             number,
@@ -51,7 +54,6 @@ const TrackEditor = ({ track, album, artist, navigate, logout }) => {
             logout
           );
         } else {
-          // Has a valid ID, so update an existing track
           updatedTrack = await apiUpdateTrack(
             track.id,
             title,

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

@@ -2,6 +2,7 @@ import { useCallback } from "react";
 import useTracks from "@/hooks/useTracks";
 import TrackRow from "./trackRow";
 import pages from "@/helpers/navigation";
+import styles from "./trackList.module.css";
 
 /**
  * Component to render the list of tracks for the specified album
@@ -64,6 +65,20 @@ const TrackList = ({ artist, album, isWishList, navigate, logout }) => {
       <button className="btn btn-primary" onClick={() => navigateBack()}>
         &lt; {backButtonText}
       </button>
+      <div className={styles.trackListAddButton}>
+        <button
+          className="btn btn-primary"
+          onClick={() =>
+            navigate({
+              page: pages.trackEditor,
+              artist: artist,
+              album: album,
+            })
+          }
+        >
+          Add
+        </button>
+      </div>
     </>
   );
 };

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

@@ -0,0 +1,3 @@
+.trackListAddButton {
+  float: right;
+}