Added the Genre Editor

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

@@ -45,6 +45,8 @@ const DeleteAlbumActionIcon = ({
               logout
             );
             setAlbums(fetchedAlbums);
+          } else {
+            setError(`Failed to delete album ${album.title}`);
           }
         } catch (ex) {
           setError(`Error deleting the album: ${ex.message}`);

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

@@ -11,6 +11,7 @@ import ArtistStatisticsReport from "./reports/artistStatisticsReport";
 import MonthlySpendReport from "./reports/monthlySpendReport";
 import GenreAlbumsReport from "./reports/genreAlbumsReport";
 import GenreList from "./genres/genreList";
+import GenreEditor from "./genres/genreEditor";
 import RetailerList from "./retailers/retailerList";
 import RetailerDetails from "./retailers/retailerDetails";
 import RetailerEditor from "./retailers/retailerEditor";
@@ -103,6 +104,14 @@ const ComponentPicker = ({ context, navigate, logout }) => {
           logout={logout}
         />
       );
+    case pages.genreEditor:
+      return (
+        <GenreEditor
+          genre={context.genre}
+          navigate={navigate}
+          logout={logout}
+        />
+      );
     case pages.lookup:
       return <LookupAlbum navigate={navigate} logout={logout} />;
     case pages.retailers:

src/music-catalogue-ui/components/genres/deleteGenreActionIcon.js

@@ -0,0 +1,50 @@
+import { useCallback } from "react";
+import { apiDeleteGenre, apiFetchGenres } from "@/helpers/api/apiGenres";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faTrashAlt } from "@fortawesome/free-solid-svg-icons";
+
+/**
+ * Icon and associated action to delete a genre
+ * @param {*} genre
+ * @param {*} logout
+ * @param {*} setGenres
+ * @param {*} setError
+ * @returns
+ */
+const DeleteGenreActionIcon = ({ genre, logout, setGenres, setError }) => {
+  /* Callback to prompt for confirmation and delete a genre */
+  const confirmDeleteGenre = useCallback(
+    async (e) => {
+      // Prevent the default action associated with the click event
+      e.preventDefault();
+
+      // Show a confirmation message and get the user response
+      const message = `This will delete the genre "${genre.name}" - click OK to confirm`;
+      const result = confirm(message);
+
+      // If they've confirmed the deletion ...
+      if (result) {
+        try {
+          // ... delete the genre and confirm the API call was successful
+          const result = await apiDeleteGenre(genre.id, logout);
+          if (result) {
+            // Successful, so refresh the genre list
+            const fetchedGenres = await apiFetchGenres(null, logout);
+            setGenres(fetchedGenres);
+          } else {
+            setError(`Failed to delete genre ${genre.name}`);
+          }
+        } catch (ex) {
+          setError(`Error deleting the genre: ${ex.message}`);
+        }
+      }
+    },
+    [genre, logout, setGenres, setError]
+  );
+
+  return (
+    <FontAwesomeIcon icon={faTrashAlt} onClick={(e) => confirmDeleteGenre(e)} />
+  );
+};
+
+export default DeleteGenreActionIcon;

src/music-catalogue-ui/components/genres/genreEditor.js

@@ -0,0 +1,101 @@
+import styles from "./genreEditor.module.css";
+import pages from "@/helpers/navigation";
+import FormInputField from "../common/formInputField";
+import { apiCreateGenre, apiUpdateGenre } from "@/helpers/api/apiGenres";
+import { useState, useCallback } from "react";
+
+/**
+ * Component to render a genre editor
+ * @param {*} genre
+ * @param {*} navigate
+ * @param {*} logout
+ * @returns
+ */
+const GenreEditor = ({ genre, navigate, logout }) => {
+  // Setup state
+  const initialName = genre != null ? genre.name : "";
+  const [name, setName] = useState(initialName);
+  const [error, setError] = useState("");
+
+  const saveGenre = useCallback(
+    async (e) => {
+      // Prevent the default action associated with the click event
+      e.preventDefault();
+
+      // Clear pre-existing errors
+      setError("");
+
+      try {
+        // Either add or update the genre, depending on whether there's an
+        // existing album or not
+        let updatedGenre = null;
+        if (genre == null) {
+          // Create the genre
+          updatedGenre = await apiCreateGenre(name, logout);
+        } else {
+          // Update the existing genre
+          updatedGenre = await apiUpdateGenre(genre.id, name, logout);
+        }
+
+        // Go back to the genre, which should reflect the updated details
+        navigate({
+          page: pages.genres,
+        });
+      } catch (ex) {
+        setError(`Error saving the updated genre details: ${ex.message}`);
+      }
+    },
+    [genre, name, navigate, logout]
+  );
+
+  // Set the page title
+  const pageTitle = genre != null ? `Genre - ${genre.name}` : `New Genre`;
+
+  return (
+    <>
+      <div className="row mb-2 pageTitle">
+        <h5 className="themeFontColor text-center">{pageTitle}</h5>
+      </div>
+      <div className={styles.genreEditorFormContainer}>
+        <form className={styles.genreEditorForm}>
+          <div className="row">
+            {error != "" ? (
+              <div className={styles.genreEditorError}>{error}</div>
+            ) : (
+              <></>
+            )}
+          </div>
+          <div className="row align-items-start">
+            <FormInputField
+              label="Name"
+              name="name"
+              value={name}
+              setValue={setName}
+            />
+          </div>
+          <div className="d-grid gap-2 mt-3"></div>
+          <div className="d-grid gap-2 mt-3"></div>
+          <div className={styles.genreEditorButton}>
+            <button className="btn btn-primary" onClick={(e) => saveGenre(e)}>
+              Save
+            </button>
+          </div>
+          <div className={styles.genreEditorButton}>
+            <button
+              className="btn btn-primary"
+              onClick={() =>
+                navigate({
+                  page: pages.genres,
+                })
+              }
+            >
+              Cancel
+            </button>
+          </div>
+        </form>
+      </div>
+    </>
+  );
+};
+
+export default GenreEditor;

src/music-catalogue-ui/components/genres/genreEditor.module.css

@@ -0,0 +1,27 @@
+.genreEditorFormContainer {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.genreEditorForm {
+  width: 80%;
+  padding-top: 20px;
+  padding-bottom: 20px;
+}
+
+.genreEditorFormLabel {
+  font-size: 14px;
+  font-weight: 600;
+  color: rgb(34, 34, 34);
+}
+
+.genreEditorButton {
+  margin-left: 10px;
+  float: right;
+}
+
+.genreEditorError {
+  font-weight: bold;
+  color: red;
+}

src/music-catalogue-ui/components/genres/genreList.js

@@ -1,6 +1,8 @@
+import styles from "./genreList.module.css";
 import pages from "@/helpers/navigation";
 import useGenres from "@/hooks/useGenres";
 import GenreRow from "./genreRow";
+import { useState } from "react";
 
 /**
  * Component to render a table listing all the genres in the catalogue
@@ -11,21 +13,25 @@ import GenreRow from "./genreRow";
  */
 const GenreList = ({ navigate, logout }) => {
   const { genres, setGenres } = useGenres(false, logout);
+  const [error, setError] = useState("");
 
-  // Callback to pass to child components to set the genre
-  const setGenreCallback = (genre) => {
-    navigate({
-      page: pages.artists,
-      genre: genre,
-      filter: "*",
-    });
+  // Callback to pass to child components to set the list of genres
+  const setGenresCallback = (genres) => {
+    setGenres(genres);
   };
 
   return (
     <>
       <div className="row mb-2 pageTitle">
         <h5 className="themeFontColor text-center">Genres</h5>
       </div>
+      <div className="row">
+        {error != "" ? (
+          <div className={styles.genreListError}>{error}</div>
+        ) : (
+          <></>
+        )}
+      </div>
       <table className="table table-hover">
         <thead>
           <tr>
@@ -35,11 +41,31 @@ const GenreList = ({ navigate, logout }) => {
         {genres != null && (
           <tbody>
             {genres.map((g) => (
-              <GenreRow key={g.id} genre={g} setGenre={setGenreCallback} />
+              <GenreRow
+                key={g.id}
+                genre={g}
+                navigate={navigate}
+                logout={logout}
+                setGenres={setGenresCallback}
+                setError={setError}
+              />
             ))}
           </tbody>
         )}
       </table>
+      <div className={styles.genreListAddButton}>
+        <button
+          className="btn btn-primary"
+          onClick={() =>
+            navigate({
+              page: pages.genreEditor,
+              genre: null,
+            })
+          }
+        >
+          Add
+        </button>
+      </div>
     </>
   );
 };

src/music-catalogue-ui/components/genres/genreList.module.css

@@ -0,0 +1,9 @@
+.genreListAddButton {
+  float: right;
+}
+
+.genreListError {
+  font-weight: bold;
+  color: red;
+  text-align: center;
+}

src/music-catalogue-ui/components/genres/genreRow.js

@@ -1,13 +1,40 @@
+import DeleteGenreActionIcon from "./deleteGenreActionIcon";
+import pages from "@/helpers/navigation";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faPenToSquare } from "@fortawesome/free-solid-svg-icons";
+
 /**
  * Component to render a row containing the details for a single genre
  * @param {*} genre
- * @param {*} setGenre
+ * @param {*} navigate
+ * @param {*} logout
+ * @param {*} setGenres
+ * @param {*} setError
  * @returns
  */
-const GenreRow = ({ genre, setGenre }) => {
+const GenreRow = ({ genre, navigate, logout, setGenres, setError }) => {
   return (
     <tr>
-      <td onClick={() => setGenre(genre)}>{genre.name}</td>
+      <td>{genre.name}</td>
+      <td>
+        <DeleteGenreActionIcon
+          genre={genre}
+          logout={logout}
+          setGenres={setGenres}
+          setError={setError}
+        />
+      </td>
+      <td>
+        <FontAwesomeIcon
+          icon={faPenToSquare}
+          onClick={() =>
+            navigate({
+              page: pages.genreEditor,
+              genre: genre,
+            })
+          }
+        />
+      </td>
     </tr>
   );
 };