Restructure components folder

src/music-catalogue-ui/components/albumEditor.js → src/music-catalogue-ui/components/albums/albumEditor.js

@@ -1,11 +1,9 @@
 import styles from "./albumEditor.module.css";
 import pages from "@/helpers/navigation";
-import catalogues from "@/helpers/catalogues";
-import FormInputField from "./formInputField";
-import CatalogueSelector from "./catalogueSelector";
+import FormInputField from "../common/formInputField";
 import { apiCreateAlbum, apiUpdateAlbum } from "@/helpers/apiAlbums";
 import { useState, useCallback } from "react";
-import GenreSelector from "./genreSelector";
+import GenreSelector from "../genres/genreSelector";
 
 /**
  * Component to render an album editor, excluding purchase details that are

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

@@ -2,10 +2,10 @@ import styles from "./albumPurchaseDetails.module.css";
 import DatePicker from "react-datepicker";
 import { useState, useCallback } from "react";
 import CurrencyInput from "react-currency-input-field";
-import config from "../config.json";
+import config from "@/config.json";
 import pages from "@/helpers/navigation";
 import { apiSetAlbumPurchaseDetails } from "@/helpers/apiAlbums";
-import RetailerSelector from "./retailerSelector";
+import RetailerSelector from "../retailers/retailerSelector";
 
 /**
  * Form to set the album purchase details for an album

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

@@ -1,8 +1,8 @@
 import pages from "@/helpers/navigation";
 import DeleteAlbumActionIcon from "./deleteAlbumActionIcon";
 import AlbumWishListActionIcon from "./albumWishListActionIcon";
-import CurrencyFormatter from "./currencyFormatter";
-import DateFormatter from "./dateFormatter";
+import CurrencyFormatter from "../common/currencyFormatter";
+import DateFormatter from "../common/dateFormatter";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faCoins, faPenToSquare } from "@fortawesome/free-solid-svg-icons";
 import { useCallback } from "react";

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

@@ -1,5 +1,5 @@
 import React, { useCallback, useState } from "react";
-import Login from "./login";
+import Login from "./login/login";
 import pages from "@/helpers/navigation";
 import ComponentPicker from "./componentPicker";
 import { apiClearToken } from "@/helpers/apiToken";

src/music-catalogue-ui/components/artistEditor.js → src/music-catalogue-ui/components/artists/artistEditor.js

@@ -1,6 +1,6 @@
 import styles from "./artistEditor.module.css";
 import pages from "@/helpers/navigation";
-import FormInputField from "./formInputField";
+import FormInputField from "../common/formInputField";
 import { useState, useCallback } from "react";
 import { apiCreateArtist, apiUpdateArtist } from "@/helpers/apiArtists";
 

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

@@ -1,4 +1,4 @@
-import config from "../config.json";
+import config from "@/config.json";
 
 /**
  * Format a value as currency using the locale from the config file

src/music-catalogue-ui/components/dateAndTimeFormatter.js → src/music-catalogue-ui/components/common/dateAndTimeFormatter.js

@@ -1,4 +1,4 @@
-import config from "../config.json";
+import config from "@/config.json";
 
 /**
  * Format a value as a date and time using the locale from the config file

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

@@ -1,4 +1,4 @@
-import config from "../config.json";
+import config from "@/config.json";
 
 /**
  * Format a value as a date using the locale from the config file

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

@@ -1,22 +1,22 @@
 import pages from "@/helpers/navigation";
-import ArtistList from "./artistList";
-import AlbumList from "./albumList";
-import TrackList from "./trackList";
-import LookupAlbum from "./lookupAlbum";
-import ExportCatalogue from "./exportCatalogue";
-import GenreStatusReport from "./genreStatisticsReport";
-import JobStatusReport from "./jobStatusReport";
-import AlbumPurchaseDetails from "./albumPurchaseDetails";
-import ArtistStatisticsReport from "./artistStatisticsReport";
-import MonthlySpendReport from "./monthlySpendReport";
-import GenreList from "./genreList";
-import RetailerList from "./retailerList";
-import RetailerDetails from "./retailerDetails";
-import RetailerEditor from "./retailerEditor";
-import TrackEditor from "./trackEditor";
-import AlbumEditor from "./albumEditor";
-import ArtistEditor from "./artistEditor";
-import RetailerStatisticsReport from "./retailerStatisticsReport";
+import ArtistList from "./artists/artistList";
+import AlbumList from "./albums/albumList";
+import TrackList from "./tracks/trackList";
+import LookupAlbum from "./search/lookupAlbum";
+import ExportCatalogue from "./dataexchange/exportCatalogue";
+import GenreStatusReport from "./reports/genreStatisticsReport";
+import JobStatusReport from "./reports/jobStatusReport";
+import AlbumPurchaseDetails from "./albums/albumPurchaseDetails";
+import ArtistStatisticsReport from "./reports/artistStatisticsReport";
+import MonthlySpendReport from "./reports/monthlySpendReport";
+import GenreList from "./genres/genreList";
+import RetailerList from "./retailers/retailerList";
+import RetailerDetails from "./retailers/retailerDetails";
+import RetailerEditor from "./retailers/retailerEditor";
+import TrackEditor from "./tracks/trackEditor";
+import AlbumEditor from "./albums/albumEditor";
+import ArtistEditor from "./artists/artistEditor";
+import RetailerStatisticsReport from "./reports/retailerStatisticsReport";
 
 /**
  * Component using the current context to select and render the current page

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

@@ -1,7 +1,7 @@
 import styles from "./export.module.css";
 import { useCallback, useState } from "react";
 import { apiRequestCatalogueExport } from "@/helpers/apiDataExchange";
-import FormInputField from "./formInputField";
+import FormInputField from "../common/formInputField";
 
 /**
  * Component to prompt for an export file name and request an export of the catalogue

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

@@ -53,10 +53,24 @@ const MenuBar = ({ navigate, logout }) => {
         <a onClick={() => navigate({ page: pages.export })}>Export</a>
         <a href="#">Import</a>
         <a onClick={() => navigate({ page: pages.lookup })}>Search</a>
-
         <div className={styles.dropdown}>
           <button className={styles.dropbtn}>
-            Browse
+            Equipment
+            <div className={styles.dropdownArrowContainer}>
+              <FontAwesomeIcon icon={faCaretDown} />
+            </div>
+          </button>
+          <div className={styles.dropdownContent}>
+            <a>Equipment</a>
+            <a>Wish List</a>
+            <a>Equipment Types</a>
+            <a>Manufacturers</a>
+            <a onClick={() => navigate({ page: pages.retailers })}>Retailers</a>
+          </div>
+        </div>
+        <div className={styles.dropdown}>
+          <button className={styles.dropbtn}>
+            Music
             <div className={styles.dropdownArrowContainer}>
               <FontAwesomeIcon icon={faCaretDown} />
             </div>

src/music-catalogue-ui/components/artistStatisticsReport.js → src/music-catalogue-ui/components/reports/artistStatisticsReport.js

@@ -1,12 +1,12 @@
 import React, { useCallback, useState } from "react";
-import styles from "./reports.module.css";
+import styles from "@/components/reports/reports.module.css";
 import catalogues from "@/helpers/catalogues";
 import "react-datepicker/dist/react-datepicker.css";
 import { apiArtistStatisticsReport } from "@/helpers/apiReports";
 import ArtistStatisticsRow from "./artistStatisticsRow";
 import ReportExportControls from "./reportExportControls";
 import { apiRequestAristStatisticsExport } from "@/helpers/apiDataExchange";
-import CatalogueSelector from "./catalogueSelector";
+import CatalogueSelector from "../common/catalogueSelector";
 
 /**
  * Component to display the artist statistics report page and its results

src/music-catalogue-ui/components/artistStatisticsRow.js → src/music-catalogue-ui/components/reports/artistStatisticsRow.js

@@ -1,4 +1,4 @@
-import CurrencyFormatter from "./currencyFormatter";
+import CurrencyFormatter from "../common/currencyFormatter";
 
 /**
  * Component to render a row containing the details for a single artist statistics record

src/music-catalogue-ui/components/genreStatisticsReport.js → src/music-catalogue-ui/components/reports/genreStatisticsReport.js

@@ -6,7 +6,7 @@ import { apiGenreStatisticsReport } from "@/helpers/apiReports";
 import GenreStatisticsRow from "./genreStatisticsRow";
 import ReportExportControls from "./reportExportControls";
 import { apiRequestGenreStatisticsExport } from "@/helpers/apiDataExchange";
-import CatalogueSelector from "./catalogueSelector";
+import CatalogueSelector from "../common/catalogueSelector";
 
 /**
  * Component to display the genre statistics report page and its results

src/music-catalogue-ui/components/genreStatisticsRow.js → src/music-catalogue-ui/components/reports/genreStatisticsRow.js

@@ -1,4 +1,4 @@
-import CurrencyFormatter from "./currencyFormatter";
+import CurrencyFormatter from "../common/currencyFormatter";
 
 /**
  * Component to render a row containing the details for a single genre statistics record

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

@@ -1,5 +1,5 @@
 import React, { useCallback, useState } from "react";
-import styles from "./reports.module.css";
+import styles from "@/components/reports/reports.module.css";
 import DatePicker from "react-datepicker";
 import "react-datepicker/dist/react-datepicker.css";
 import { apiJobStatusReport } from "@/helpers/apiReports";

src/music-catalogue-ui/components/jobStatusRow.js → src/music-catalogue-ui/components/reports/jobStatusRow.js

@@ -1,4 +1,4 @@
-import DateAndTimeFormatter from "./dateAndTimeFormatter";
+import DateAndTimeFormatter from "../common/dateAndTimeFormatter";
 
 /**
  * Component to render a row containing the details of a single job status record

src/music-catalogue-ui/components/monthlySpendReport.js → src/music-catalogue-ui/components/reports/monthlySpendReport.js

@@ -1,5 +1,5 @@
 import React, { useState, useCallback } from "react";
-import styles from "./reports.module.css";
+import styles from "@/components/reports/reports.module.css";
 import useMonthlySpend from "@/hooks/useMonthlySpend";
 import MonthlySpendReportRow from "./monthlySpendReportRow";
 import ReportExportControls from "./reportExportControls";

src/music-catalogue-ui/components/monthlySpendReportRow.js → src/music-catalogue-ui/components/reports/monthlySpendReportRow.js

@@ -1,4 +1,4 @@
-import CurrencyFormatter from "./currencyFormatter";
+import CurrencyFormatter from "../common/currencyFormatter";
 
 /**
  * Component to render a row containing the details for a single monthly spending record

src/music-catalogue-ui/components/reportExportControls.js → src/music-catalogue-ui/components/reports/reportExportControls.js

@@ -1,4 +1,4 @@
-import styles from "./reports.module.css";
+import styles from "@/components/reports/reports.module.css";
 import { useState } from "react";
 
 /**

src/music-catalogue-ui/components/retailerStatisticsReport.js → src/music-catalogue-ui/components/reports/retailerStatisticsReport.js

@@ -1,12 +1,12 @@
 import React, { useCallback, useState } from "react";
-import styles from "./reports.module.css";
+import styles from "@/components/reports/reports.module.css";
 import catalogues from "@/helpers/catalogues";
 import "react-datepicker/dist/react-datepicker.css";
 import { apiRetailerStatisticsReport } from "@/helpers/apiReports";
 import RetailerStatisticsRow from "./retailerStatisticsRow";
 import ReportExportControls from "./reportExportControls";
 import { apiRequestRetailerStatisticsExport } from "@/helpers/apiDataExchange";
-import CatalogueSelector from "./catalogueSelector";
+import CatalogueSelector from "../common/catalogueSelector";
 
 /**
  * Component to display the retailer statistics report page and its results

src/music-catalogue-ui/components/retailerStatisticsRow.js → src/music-catalogue-ui/components/reports/retailerStatisticsRow.js

@@ -1,4 +1,4 @@
-import CurrencyFormatter from "./currencyFormatter";
+import CurrencyFormatter from "../common/currencyFormatter";
 
 /**
  * Component to render a row containing the details for a single retailer statistics record

src/music-catalogue-ui/components/retailerDetails.js → src/music-catalogue-ui/components/retailers/retailerDetails.js

@@ -1,5 +1,5 @@
 import pages from "@/helpers/navigation";
-import LocationMap from "./locationMap";
+import LocationMap from "../common/locationMap";
 import styles from "./retailerDetails.module.css";
 
 /**

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

@@ -2,7 +2,7 @@ import styles from "./retailerEditor.module.css";
 import pages from "@/helpers/navigation";
 import { useState, useCallback } from "react";
 import { apiCreateRetailer, apiUpdateRetailer } from "@/helpers/apiRetailers";
-import FormInputField from "./formInputField";
+import FormInputField from "../common/formInputField";
 import { geocodeAddress } from "@/helpers/geocoder";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faGlobe } from "@fortawesome/free-solid-svg-icons";

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

@@ -1,6 +1,6 @@
 import styles from "./trackEditor.module.css";
 import pages from "@/helpers/navigation";
-import FormInputField from "./formInputField";
+import FormInputField from "../common/formInputField";
 import { useState, useCallback } from "react";
 import { apiCreateTrack, apiUpdateTrack } from "@/helpers/apiTracks";
 

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

@@ -1,4 +1,4 @@
-import config from "../config.json";
+import config from "@/config.json";
 import { apiReadResponseData } from "./apiUtils";
 import { apiGetPostHeaders, apiGetHeaders } from "./apiHeaders";
 

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

@@ -1,4 +1,4 @@
-import config from "../config.json";
+import config from "@/config.json";
 import { apiReadResponseData } from "./apiUtils";
 import { apiGetHeaders, apiGetPostHeaders } from "./apiHeaders";
 

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

@@ -1,4 +1,4 @@
-import config from "../config.json";
+import config from "@/config.json";
 
 /**
  * Authenticate with the Music Catalogue REST API

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

@@ -1,4 +1,4 @@
-import config from "../config.json";
+import config from "@/config.json";
 import { apiGetPostHeaders } from "./apiHeaders";
 
 /**

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

@@ -1,4 +1,4 @@
-import config from "../config.json";
+import config from "@/config.json";
 import { apiReadResponseData } from "./apiUtils";
 import { apiGetPostHeaders } from "./apiHeaders";
 

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

@@ -1,4 +1,4 @@
-import config from "../config.json";
+import config from "@/config.json";
 import { apiGetHeaders } from "./apiHeaders";
 import { apiReadResponseData, apiFormatDateTime } from "./apiUtils";
 

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

@@ -1,4 +1,4 @@
-import config from "../config.json";
+import config from "@/config.json";
 import { apiReadResponseData } from "./apiUtils";
 import { apiGetPostHeaders, apiGetHeaders } from "./apiHeaders";
 

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

@@ -1,4 +1,4 @@
-import config from "../config.json";
+import config from "@/config.json";
 import { apiGetHeaders } from "./apiHeaders";
 
 /**

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

@@ -1,4 +1,4 @@
-import config from "../config.json";
+import config from "@/config.json";
 import { apiReadResponseData } from "./apiUtils";
 import { apiGetPostHeaders, apiGetHeaders } from "./apiHeaders";
 

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

@@ -1,5 +1,5 @@
 import secrets from "@/helpers/secrets";
-import config from "../config.json";
+import config from "@/config.json";
 import { setDefaults, geocode, RequestType } from "react-geocode";
 import { getStorageValue } from "./storage";