Add location details to map screen

frontend/src/components/steps/location/Map.js

@@ -1,6 +1,6 @@
-import { useState } from "react"
+import { useState, useEffect } from "react"
-
 import { MapContainer, TileLayer, Marker, useMapEvents } from 'react-leaflet'
+import LocationRepository from '../../../repository/LocationRepository'
 
 const NZ_BOUNDS = [
   [-47.204642, 165.344238],
@@ -36,21 +36,41 @@ const fitNZBounds = (map) => {
   map.fitBounds(NZ_BOUNDS);
 }
 
-function CoordinatesDisplay(props) {
+function LocationDetailsDisplay(props) {
+  const [locationDetails, setLocationDetails] = useState({})
+
+  useEffect(() => {
+    if (props.filters["coordinates"]) {
+      LocationRepository.getLocationData(props.filters).then(result => {
+        setLocationDetails(result);
+    })
+  }
+  }, [props.filters, props.filters.coordinates] );
+
   const savedCoordinates = props.filters["coordinates"];
-  return savedCoordinates ? (
+
-    <div className='coordinates-display'>
+  if (savedCoordinates) {
-      <strong>Latitude:</strong> {savedCoordinates.lat} <br />
+    const soilString = `${locationDetails.soil_name} (${locationDetails.soil_code})`
-      <strong>Longitude:</strong> {savedCoordinates.lng}
+    return (
-    </div>
+      <div className='coordinates-display'>
-  ) : null;
+        <strong>Latitude:</strong> {savedCoordinates.lat} <br />
+        <strong>Longitude:</strong> {savedCoordinates.lng}  <br />
+        <strong>Address:</strong> {locationDetails.full_address} <br />
+        <strong>Ecological Region:</strong> {locationDetails.ecological_region}  <br />
+        <strong>Ecological District:</strong> {locationDetails.ecological_district} <br />
+        <strong>Soil Order:</strong> {locationDetails.soil_name ? soilString : ""}
+      </div>
+    )
+  }
+
+  return null
 }
 
 
 export default function Map(props) {
   return (
     <div className="map-container">
-      <CoordinatesDisplay {...props} />
+      <LocationDetailsDisplay {...props} />
       <MapContainer scrollWheelZoom={true} whenCreated={fitNZBounds}>
         <TileLayer
           attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'