ON-40874 # Fixed reverse geocode not supporting sections

oneblink · May 31, 2024 · 19bfcaa · 19bfcaa
1 parent 85e1a22
commit 19bfcaa
Show file tree

Hide file tree

Showing 3 changed files with 52 additions and 59 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -11,6 +11,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 - injected options referenced from another page not being injected into HTML
 - ArcGIS web map layer panel showing if map is loaded on another page
+- reverse geocode not supporting sections
 
 ### Added
 

diff --git a/src/components/renderer/OneBlinkFormElements.tsx b/src/components/renderer/OneBlinkFormElements.tsx
@@ -730,7 +730,15 @@ const FormElementSwitch = React.memo(function OneBlinkFormElement({
  element={element}
  onLookup={onLookup}
  >
- <ReverseGeocode value={value} element={element} onLookup={onLookup}>
+ <ReverseGeocode
+ value={value}
+ element={element}
+ onChange={
+ onChange as React.ComponentProps<
+ typeof ReverseGeocode
+ >['onChange']
+ }
+ >
  <FormElementLocation
  id={id}
  element={element}

diff --git a/src/components/renderer/ReverseGeocode.tsx b/src/components/renderer/ReverseGeocode.tsx
@@ -1,14 +1,14 @@
 import * as React from 'react'
 
-import { FormTypes, SubmissionTypes } from '@oneblink/types'
+import { FormTypes, GeoscapeTypes } from '@oneblink/types'
 import { formService, OneBlinkAppsError } from '@oneblink/apps'
 import { formElementsService } from '@oneblink/sdk-core'
 
 import { parseLocationValue } from '../../form-elements/FormElementLocation'
 import useFormSubmissionModel from '../../hooks/useFormSubmissionModelContext'
 import useFormDefinition from '../../hooks/useFormDefinition'
 import useFormIsReadOnly from '../../hooks/useFormIsReadOnly'
-import { FormElementLookupHandler } from '../../types/form'
+import { FormElementValueChangeHandler } from '../../types/form'
 import useIsOffline from '../../hooks/useIsOffline'
 
 type ReverseGeocodeContextValue = {
@@ -23,12 +23,14 @@ const ReverseGeocodeContext = React.createContext<ReverseGeocodeContextValue>({
 export default function ReverseGeocode({
  value,
  element,
- onLookup,
+ onChange,
  children,
 }: React.PropsWithChildren<{
  value: unknown
  element: FormTypes.LocationElement
- onLookup: FormElementLookupHandler
+ onChange: FormElementValueChangeHandler<
+ GeoscapeTypes.GeoscapeAddress | string
+ >
 }>) {
  const coords = React.useMemo(() => parseLocationValue(value), [value])
  const [reverseGeocodingState, setReverseGeocodingState] =
@@ -43,71 +45,57 @@ export default function ReverseGeocode({
 
  const formattedAddressElement = React.useMemo(() => {
  if (element.reverseGeocoding?.formattedAddressElementId) {
- return formElementsService.findFormElement(
- formSubmissionModel.elements,
- (el) => el.id === element.reverseGeocoding?.formattedAddressElementId,
- )
+ return formElementsService
+ .flattenFormElements(formSubmissionModel.elements)
+ .find(
+ (el) => el.id === element.reverseGeocoding?.formattedAddressElementId,
+ )
  }
  }, [
  element.reverseGeocoding?.formattedAddressElementId,
  formSubmissionModel.elements,
  ])
 
- const mergeReverseGeocodeData = React.useCallback(
- (reverseGeocodeResult: SubmissionTypes.S3SubmissionData['submission']) => {
- onLookup(({ submission, elements, executedLookups }) => {
- return {
- elements,
- submission: {
- ...submission,
- ...reverseGeocodeResult,
- },
- executedLookups,
- }
- })
- },
- [onLookup],
- )
-
  React.useEffect(() => {
+ if (formIsReadOnly || !coords || !formattedAddressElement) {
+ return
+ }
+
  const abortController = new AbortController()
  const effect = async () => {
- setReverseGeocodingState({ isReverseGeocoding: true })
  try {
- if (coords && formattedAddressElement) {
- if (element.reverseGeocoding && formattedAddressElement) {
- const mergeReverseGeocodeResult: SubmissionTypes.S3SubmissionData['submission'] =
- {}
- const { reverseGeocodeResult } =
- await formService.getGeoscapeReverseGeocoding({
- lat: coords.latitude,
- lng: coords.longitude,
- formId: formDefinition.id,
- abortSignal: abortController.signal,
+ setReverseGeocodingState({ isReverseGeocoding: true })
+ const { reverseGeocodeResult } =
+ await formService.getGeoscapeReverseGeocoding({
+ lat: coords.latitude,
+ lng: coords.longitude,
+ formId: formDefinition.id,
+ abortSignal: abortController.signal,
+ })
+ switch (formattedAddressElement.type) {
+ case 'text': {
+ if (reverseGeocodeResult.addressDetails?.formattedAddress) {
+ onChange(formattedAddressElement, {
+ value: reverseGeocodeResult.addressDetails?.formattedAddress,
  })
- switch (formattedAddressElement.type) {
- case 'text': {
- if (reverseGeocodeResult.addressDetails?.formattedAddress) {
- mergeReverseGeocodeResult[formattedAddressElement.name] =
- reverseGeocodeResult.addressDetails?.formattedAddress
- }
- break
- }
- case 'geoscapeAddress': {
- mergeReverseGeocodeResult[formattedAddressElement.name] =
- reverseGeocodeResult
- break
- }
- }
- if (!abortController.signal.aborted) {
- mergeReverseGeocodeData(mergeReverseGeocodeResult)
  }
+ break
+ }
+ case 'geoscapeAddress': {
+ onChange(formattedAddressElement, {
+ value: reverseGeocodeResult,
+ })
+ break
  }
  }
  setReverseGeocodingState({
  isReverseGeocoding: false,
  })
  } catch (e) {
+ if (abortController.signal.aborted) {
+ return
+ }
+ console.warn('Error attempting to reverse geocode location', e)
  let errorMsg = 'Could not find your address.'
  if (e instanceof OneBlinkAppsError && e.httpStatusCode !== 404) {
  errorMsg = e.message
@@ -124,20 +112,16 @@ export default function ReverseGeocode({
  }
  }
 
- if (!formIsReadOnly) {
- effect()
- }
+ effect()
 
  return () => abortController.abort()
  }, [
  coords,
- element.reverseGeocoding,
  formDefinition.id,
- formDefinition.organisationId,
+ formIsReadOnly,
  formattedAddressElement,
- mergeReverseGeocodeData,
  isOffline,
- formIsReadOnly,
+ onChange,
  ])
 
  return (