Add retailer address geocoding

README.md

@@ -134,17 +134,18 @@ MusicCatalogue.LookupTool --lookup "John Coltrane" "Blue Train" catalogue
 
 ### Configuration
 
-- The UI uses a simple "config.json" file containing the base URL for the Music Catalogue web service, a Google Maps API key for retailer location maps and locale settings used by the UI:
+- The UI uses a simple "config.json" file containing the base URL for the Music Catalogue web service and locale settings used by the UI and during address geocoding:
 
 ```json
 {
   "api": {
-    "baseUrl": "http://localhost:8098",
-    "mapsApiKey": ""
+    "baseUrl": "http://localhost:8098"
   },
   "region": {
     "locale": "en-GB",
-    "currency": "GBP"
+    "currency": "GBP",
+    "geocodingLanguage": "en",
+    "geocodingRegion": "GB"
   }
 }
 ```
@@ -228,8 +229,7 @@ MusicCatalogue.LookupTool --lookup "John Coltrane" "Blue Train" catalogue
 
 <img src="diagrams/retailer-editor.png" alt="Retailer Details" width="600">
 
-- Currently, the latitude and longitude (required to display the map) must be derived using external resources and then entered manually
-- The intention is to add postcode geocoding to the next release
+- Clicking on the globe icon next to the postcode entry will geocode the current address and populate the latitude and longitude with the results
 
 ### Album Lookup
 

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

@@ -3,6 +3,9 @@ import pages from "../helpers/navigation";
 import { useState, useCallback } from "react";
 import { apiUpdateRetailer } from "@/helpers/apiRetailers";
 import FormInputField from "./formInputField";
+import { geocodeAddress } from "@/helpers/geocoder";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faGlobe } from "@fortawesome/free-solid-svg-icons";
 
 const RetailerEditor = ({ retailer, navigate, logout }) => {
   const [name, setName] = useState(retailer.name);
@@ -17,6 +20,31 @@ const RetailerEditor = ({ retailer, navigate, logout }) => {
   const [webSite, setWebSite] = useState(retailer.webSite);
   const [error, setError] = useState("");
 
+  // Callback to geocode the address
+  const geocode = useCallback(
+    async (e) => {
+      // Prevent the default action associated with the click event
+      e.preventDefault();
+
+      // Geocode the address
+      const location = await geocodeAddress(
+        address1,
+        address2,
+        town,
+        county,
+        postCode,
+        country
+      );
+
+      // If we have an address, set the latitude and longitude
+      if (location != null) {
+        setLatitude(location.lat);
+        setLongitude(location.lng);
+      }
+    },
+    [address1, address2, town, county, postCode, country]
+  );
+
   /* Callback to save retailer details */
   const saveRetailer = useCallback(
     async (e) => {
@@ -133,12 +161,23 @@ const RetailerEditor = ({ retailer, navigate, logout }) => {
           </div>
           <div className="row align-items-start">
             <div className="col">
-              <FormInputField
-                label="Postcode"
-                name="postCode"
-                value={postCode}
-                setValue={setPostCode}
-              />
+              <div className="form-group mt-3">
+                <label className={styles.retailerEditorInputLabel}>
+                  Postcode
+                </label>
+                <FontAwesomeIcon
+                  icon={faGlobe}
+                  className={styles.retailerEditorGeocode}
+                  onClick={(e) => geocode(e)}
+                />
+                <input
+                  className="form-control"
+                  placeholder="Postcode"
+                  name="postcode"
+                  value={postCode}
+                  onChange={(e) => setPostCode(e.target.value)}
+                />
+              </div>
             </div>
             <div className="col">
               <FormInputField

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

@@ -19,3 +19,7 @@
   font-weight: bold;
   color: red;
 }
+
+.retailerEditorGeocode {
+  margin-left: 10px;
+}

src/music-catalogue-ui/config.json

@@ -4,6 +4,8 @@
   },
   "region": {
     "locale": "en-GB",
-    "currency": "GBP"
+    "currency": "GBP",
+    "geocodingLanguage": "en",
+    "geocodingRegion": "GB"
   }
 }

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

@@ -0,0 +1,43 @@
+import secrets from "@/helpers/secrets";
+import config from "../config.json";
+import { setDefaults, geocode, RequestType } from "react-geocode";
+import { getStorageValue } from "./storage";
+
+const geocodeAddress = async (
+  address1,
+  address2,
+  town,
+  county,
+  postcode,
+  country
+) => {
+  // This sets default values for language and region for geocoding requests.
+  const apiKey = getStorageValue(secrets.mapsApiKey);
+  setDefaults({
+    key: apiKey,
+    language: config.region.geocodingLanguage,
+    region: config.region.geocodingRegion,
+  });
+
+  // Construct an address from its components
+  const address = [
+    address1,
+    address1,
+    address2,
+    town,
+    county,
+    postcode,
+    country,
+  ].join(",");
+
+  try {
+    // Geocode the address
+    const response = await geocode(RequestType.ADDRESS, address);
+    const location = response.results[0].geometry.location;
+    return location;
+  } catch {
+    return null;
+  }
+};
+
+export { geocodeAddress };

src/music-catalogue-ui/package.json

@@ -20,6 +20,7 @@
     "react-currency-input-field": "^3.6.12",
     "react-datepicker": "^4.21.0",
     "react-dom": "^18",
+    "react-geocode": "^1.0.0-alpha.1",
     "react-select": "^5.8.0"
   },
   "devDependencies": {