ON-40405 # add useGoogle hook

src/form-elements/FormElementGoogleAddress.tsx

@@ -1,14 +1,13 @@
 import * as React from 'react'
 import { FormTypes, GoogleTypes } from '@oneblink/types'
-import { useJsApiLoader } from '@react-google-maps/api'
+import { OneBlinkAppsError, Sentry } from '@oneblink/apps'
 
 import AutocompleteDropdown from '../components/renderer/AutocompleteDropdown'
 import FormElementLabelContainer from '../components/renderer/FormElementLabelContainer'
-import useGoogleMapsApiKeyKey from '../hooks/useGoogleMapsApiKey'
+import useGoogle from '../hooks/useGoogle'
 import useIsMounted from '../hooks/useIsMounted'
 import useElementAriaDescribedby from '../hooks/useElementAriaDescribedby'
 import { FormElementValueChangeHandler, IsDirtyProps } from '../types/form'
-import { OneBlinkAppsError, Sentry } from '@oneblink/apps'
 
 type Props = {
  formId: number
@@ -37,12 +36,7 @@ function FormElementGoogleAddress({
  const [isLoadingAddressDetails, setIsLoadingAddressDetails] =
  React.useState(false)
 
- const googleMapsApiKey = useGoogleMapsApiKeyKey()
-
- const { isLoaded } = useJsApiLoader({
- googleMapsApiKey: googleMapsApiKey ?? '',
- libraries: ['maps', 'marker', 'places'],
- })
+ const { isLoaded } = useGoogle()
 
  const autocompleteService = React.useMemo(() => {
  if (isLoaded) {

src/form-elements/FormElementLocation.tsx

@@ -2,15 +2,16 @@ import * as React from 'react'
 import { FormTypes } from '@oneblink/types'
 import { Sentry } from '@oneblink/apps'
 import clsx from 'clsx'
-import { GoogleMap, Marker, useJsApiLoader } from '@react-google-maps/api'
+import { GoogleMap, Marker } from '@react-google-maps/api'
 import queryString from 'query-string'
 
 import useBooleanState from '../hooks/useBooleanState'
 import useIsOffline from '../hooks/useIsOffline'
 import * as geolocation from '../services/geolocation'
 import OnLoading from '../components/renderer/OnLoading'
 import defaultCoords from '../services/defaultCoordinates'
-import useGoogleMapsApiKeyKey from '../hooks/useGoogleMapsApiKey'
+import useGoogle from '../hooks/useGoogle'
+import useGoogleMapsApiKey from '../hooks/useGoogleMapsApiKey'
 import FormElementLabelContainer from '../components/renderer/FormElementLabelContainer'
 import { FormElementValueChangeHandler, IsDirtyProps } from '../types/form'
 import { LookupNotificationContext } from '../hooks/useLookupNotification'
@@ -334,7 +335,7 @@ const LocationImage = React.memo(function LocationImage({
 }: {
  location: Coords
 }) {
- const googleMapsApiKey = useGoogleMapsApiKeyKey()
+ const googleMapsApiKey = useGoogleMapsApiKey()
 
  const staticUrl = React.useMemo(() => {
  const center = `${location.latitude},${location.longitude}`
@@ -368,12 +369,7 @@ const LocationPicker = React.memo(function LocationPicker({
  location: Coords
  onChange: (newLocation: Coords) => void
 }) {
- const googleMapsApiKey = useGoogleMapsApiKeyKey()
-
- const { isLoaded } = useJsApiLoader({
- googleMapsApiKey: googleMapsApiKey ?? '',
- libraries: ['maps', 'marker', 'places'],
- })
+ const { isLoaded } = useGoogle()
 
  return (
  <figure className="ob-figure">

src/hooks/useGoogle.ts

@@ -0,0 +1,13 @@
+import { useJsApiLoader } from '@react-google-maps/api'
+import useGoogleMapsApiKey from './useGoogleMapsApiKey'
+
+export default function useGoogle() {
+ const key = useGoogleMapsApiKey()
+
+ const { isLoaded } = useJsApiLoader({
+ googleMapsApiKey: key ?? '',
+ libraries: ['maps', 'marker', 'places'],
+ })
+
+ return { isLoaded }
+}

src/hooks/useGoogleMapsApiKey.ts

@@ -4,6 +4,6 @@ export const GoogleMapsApiKeyContext = React.createContext<string | undefined>(
  undefined,
 )
 
-export default function useGoogleMapsApiKeyKey() {
+export default function useGoogleMapsApiKey() {
  return React.useContext(GoogleMapsApiKeyContext)
 }