20 integrate address search results (#33)

* working API that makes calls to local Flask App

 blocked by CORS on client side due to calling on a localhost - but Flask shows the calls and returns 200 status on the server side so without CORS this would return exactly what we would need

* Successful zoom in for any of top 30 results -
from any given keystroke

* usePlaces hook added to Search.js

* got rid of old code

* quick npx standard fix

* added utils function for projection

* Delete launch.json

* added proj4 to package.json

* fixed warnings

* fixed eslint hasOwnProperty issue

* fix loading issue

* remove launch

* fix gitignore to account for launch.json

* fix launch json

Author: branmkam

.gitignore

@@ -12,6 +12,7 @@
 /build
 
 # misc
+.env
 .DS_Store
 .env.local
 .env.development.local
@@ -21,3 +22,6 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+
+#launch
+/.vscode/launch.json

package-lock.json

@@ -15,6 +15,7 @@
     "axios": "^0.27.2",
     "mapbox-gl": "npm:empty-npm-package@^1.0.0",
     "maplibre-gl": "^2.4.0",
+    "proj4": "^2.8.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-map-gl": "^7.0.19",
@@ -63,4 +64,4 @@
     "gh-pages": "^4.0.0",
     "standard": "^17.0.0"
   }
-}
+}

package.json

@@ -10,7 +10,7 @@ function MapUpMap (props) {
 
   useEffect(() => {
     if (mapRef.current) {
-      mapRef.current.flyTo({ center: location, zoom: 16, essential: true })
+      mapRef.current.flyTo({ center: location, zoom: 18, essential: true })
     }
   }, [location])
 
@@ -36,5 +36,3 @@ function MapUpMap (props) {
 }
 
 export default MapUpMap
-
-// calc function CSS (100%-60px-90px)

src/MapUpMap.js

@@ -3,6 +3,8 @@ import { styled, alpha } from '@mui/material/styles'
 import InputBase from '@mui/material/InputBase'
 import SearchIcon from '@mui/icons-material/Search'
 import Autocomplete from '@mui/material/Autocomplete'
+import { toLatLng } from './utils/utils'
+import usePlaces from './hooks/usePlaces'
 
 const SearchContainer = styled('div')(({ theme }) => ({
   position: 'relative',
@@ -44,15 +46,10 @@ const StyledInputBase = styled(InputBase)(({ theme }) => ({
   }
 }))
 
-const testData = [
-  { label: 'Ordnance Survey', location: [-1.471061, 50.9382] },
-  { label: 'Bradford on Avon', location: [-2.249391, 51.347659] },
-  { label: 'Geovation', location: [-0.099754, 51.52435] },
-  { label: 'Berwick-upon-Tweed', location: [-2.00477, 55.768824] }
-]
-
 function Search (props) {
   const { setLocation } = props
+  const { loading, places, searchPlaces } = usePlaces([])
+
   return (
     <SearchContainer>
       <SearchIconWrapper>
@@ -61,14 +58,23 @@ function Search (props) {
       <Autocomplete
         disablePortal
         id='combo-box-demo'
-        options={testData}
-        getOptionLabel={option => option.label}
-        style={{ width: 300 }}
+        options={places}
+        filterOptions={(x) => x}
+        getOptionLabel={option => option.ADDRESS ? option.ADDRESS : ''}
+        style={{ width: 500 }}
         renderInput={params => {
           const { InputLabelProps, InputProps, ...rest } = params
           return <StyledInputBase {...params.InputProps} {...rest} />
         }}
-        onChange={(event, newValue) => { if (newValue.location) { setLocation(newValue.location) } }}
+        onChange={(event, newValue) => {
+          if (newValue.X_COORDINATE && !loading) {
+            const latlng = toLatLng({ ea: newValue.X_COORDINATE, no: newValue.Y_COORDINATE })
+            setLocation([latlng.lng, latlng.lat])
+          }
+        }}
+        onInputChange={(event, newValue) => {
+          searchPlaces(newValue)
+        }}
       />
     </SearchContainer>
   )

src/Search.js

@@ -0,0 +1,7 @@
+import axios from 'axios'
+// initializing the axios instance with custom configs
+const api = axios.create({
+  baseURL: 'http://127.0.0.1:5000' // to replace with AWS URL once online
+})
+
+export default api

src/api/configs/axiosConfigs.js

@@ -0,0 +1,35 @@
+export function defineCancelApiObject (apiObject) {
+  // an object that will contain a cancellation handler
+  // associated to each API property name in the apiObject API object
+  const cancelApiObject = {}
+
+  // each property in the apiObject API layer object
+  // is associated with a function that defines an API call
+
+  // this loop iterates over each API property name
+  Object.getOwnPropertyNames(apiObject).forEach((apiPropertyName) => {
+    const cancellationControllerObject = {
+      controller: undefined
+    }
+
+    // associating the request cancellation handler with the API property name
+    cancelApiObject[apiPropertyName] = {
+      handleRequestCancellation: () => {
+        // if the controller already exists,
+        // canceling the request
+        if (cancellationControllerObject.controller) {
+          // canceling the request and returning this custom message
+          cancellationControllerObject.controller.abort()
+        }
+
+        // generating a new controller
+        // with the AbortController factory
+        cancellationControllerObject.controller = new AbortController()
+
+        return cancellationControllerObject.controller
+      }
+    }
+  })
+
+  return cancelApiObject
+}

src/api/configs/axiosUtils.js

@@ -0,0 +1,21 @@
+// big thank you to https://semaphoreci.com/blog/api-layer-react
+
+import api from './configs/axiosConfigs'
+import { defineCancelApiObject } from './configs/axiosUtils'
+
+export const PlacesAPI = {
+  autofill: async function (input, cancel = false) {
+    const response = await api.request({
+      url: `/places/${input}`,
+      method: 'GET',
+      // retrieving the signal value by using the property name
+      signal: cancel ? cancelApiObject[this.autofill.name].handleRequestCancellation().signal : undefined
+    })
+
+    // returning the data from API
+    return response.data
+  }
+}
+
+// defining the cancel API object for PlacesAPI
+const cancelApiObject = defineCancelApiObject(PlacesAPI)

src/api/placesAPI.js

@@ -0,0 +1,22 @@
+import { PlacesAPI } from '../api/placesAPI'
+import { useState } from 'react'
+
+const usePlaces = () => {
+  const [loading, setLoading] = useState(false)
+  const [places, setPlaces] = useState([])
+
+  const searchPlaces = (search) => {
+    PlacesAPI.autofill(search).then((response) => {
+      setLoading(true)
+      return response
+    })
+      .then((response) => {
+        setLoading(false)
+        setPlaces(response)
+      })
+  }
+
+  return { loading, places, searchPlaces }
+}
+
+export default usePlaces

src/hooks/usePlaces.js

@@ -0,0 +1,48 @@
+import proj4 from 'proj4'
+
+// All borrowed from the os-transform GitHub repository
+
+const _maxBounds = {
+  projected: [[0.0, 0.0], [699999.9, 1299999.9]],
+  geographic: [[-8.74, 49.84], [1.96, 60.9]]
+}
+
+/**
+ * Return latlng from an input easting + northing.
+ * @param {object} coordinates - The easting + northing to be transformed.
+ * @param {integer} decimals - [optional] The specified number of decimal places.
+ */
+export function toLatLng (coordinates, decimals = 7) {
+  const test = _checkBounds(coordinates)
+  if (!test.valid) {
+    console.log(test.message)
+    return {}
+  }
+
+  proj4.defs('EPSG:27700', '+proj=tmerc +lat_0=49 +lon_0=-2 +k=0.9996012717 +x_0=400000 +y_0=-100000 +ellps=airy +datum=OSGB36 +units=m +no_defs')
+  const point = proj4('EPSG:27700', 'EPSG:4326', [coordinates.ea, coordinates.no])
+
+  const lng = Number(point[0].toFixed(decimals))
+  const lat = Number(point[1].toFixed(decimals))
+
+  return { lat, lng }
+}
+
+export function _checkBounds (coordinates) {
+  let isValid = true
+  if (Object.prototype.hasOwnProperty.call(coordinates, 'ea') && Object.prototype.hasOwnProperty.call(coordinates, 'no')) {
+    if ((coordinates.ea < _maxBounds.projected[0][0] || coordinates.ea > _maxBounds.projected[1][0]) ||
+            (coordinates.no < _maxBounds.projected[0][1] || coordinates.no > _maxBounds.projected[1][1])) {
+      isValid = false
+    }
+  } else if (Object.prototype.hasOwnProperty.call(coordinates, 'lat') && Object.prototype.hasOwnProperty.call(coordinates, 'lng')) {
+    if ((coordinates.lng < _maxBounds.geographic[0][0] || coordinates.lng > _maxBounds.geographic[1][0]) ||
+            (coordinates.lat < _maxBounds.geographic[0][1] || coordinates.lat > _maxBounds.geographic[1][1])) {
+      isValid = false
+    }
+  }
+
+  const message = isValid ? '' : 'Coordinates out of range.'
+
+  return { valid: isValid, message }
+}