[google-maps-input] Move API key + locale resolving to loader

sanity-io · Oct 6, 2020 · 8dfa784 · 8dfa784
1 parent 096c50c
commit 8dfa784
Show file tree

Hide file tree

Showing 5 changed files with 13 additions and 14 deletions.
diff --git a/packages/@sanity/google-maps-input/.eslintrc b/packages/@sanity/google-maps-input/.eslintrc
@@ -0,0 +1,5 @@
+{
+  "rules": {
+    "react/prop-types": "off"
+  }
+}
diff --git a/packages/@sanity/google-maps-input/src/GeopointInput.tsx b/packages/@sanity/google-maps-input/src/GeopointInput.tsx
@@ -12,8 +12,6 @@ import {GeopointSelect} from './GeopointSelect'
 import {GoogleMapsLoadProxy} from './GoogleMapsLoadProxy'
 import {Geopoint, GeopointSchemaType} from './types'
 
-const locale = (typeof window !== 'undefined' && window.navigator.language) || 'en'
-
 const getStaticImageUrl = value => {
   const loc = `${value.lat},${value.lng}`
   const params = {
@@ -148,15 +146,14 @@ class GeopointInput extends React.Component<InputProps, InputState> {
               isOpen={this.state.modalOpen}
             >
               <div className={styles.dialogInner}>
-                <GoogleMapsLoadProxy apiKey={config.apiKey} locale={locale}>
+                <GoogleMapsLoadProxy>
                   {api => (
                     <GeopointSelect
                       api={api}
                       value={value}
                       onChange={this.handleChange}
                       defaultLocation={config.defaultLocation}
                       defaultZoom={config.defaultZoom}
-                      locale={locale}
                     />
                   )}
                 </GoogleMapsLoadProxy>

diff --git a/packages/@sanity/google-maps-input/src/GeopointSelect.tsx b/packages/@sanity/google-maps-input/src/GeopointSelect.tsx
@@ -7,7 +7,6 @@ const fallbackLatLng: LatLng = {lat: 40.7058254, lng: -74.1180863}
 interface SelectProps {
   api: typeof window.google.maps
   value?: Geopoint
-  locale: string
   onChange: (latLng: google.maps.LatLng) => void
   defaultLocation?: LatLng
   defaultZoom?: number

diff --git a/packages/@sanity/google-maps-input/src/GoogleMapsLoadProxy.tsx b/packages/@sanity/google-maps-input/src/GoogleMapsLoadProxy.tsx
@@ -2,8 +2,6 @@ import React from 'react'
 import {loadGoogleMapsApi} from './loadGoogleMapsApi'
 
 interface LoadProps {
-  apiKey: string
-  locale?: string
   children: (api: typeof window.google.maps) => React.ReactElement
 }
 
@@ -31,8 +29,7 @@ export class GoogleMapsLoadProxy extends React.Component<LoadProps, LoadState> {
       return
     }
 
-    const {apiKey, locale} = this.props
-    loadGoogleMapsApi(apiKey, locale)
+    loadGoogleMapsApi()
       .then(api => this.setState({loading: false, api}))
       .catch(error => this.setState({error}))
   }

diff --git a/packages/@sanity/google-maps-input/src/loadGoogleMapsApi.ts b/packages/@sanity/google-maps-input/src/loadGoogleMapsApi.ts
@@ -1,9 +1,10 @@
+import config from 'config:@sanity/google-maps-input'
+
+const locale = (typeof window !== 'undefined' && window.navigator.language) || 'en'
+
 let loadingPromise: Promise<typeof window.google.maps>
 
-export function loadGoogleMapsApi(
-  apiKey: string,
-  locale?: string
-): Promise<typeof window.google.maps> {
+export function loadGoogleMapsApi(): Promise<typeof window.google.maps> {
   const callbackName = '___sanity_googleMapsApiCallback'
   const selectedLocale = locale || 'en-US'
 
@@ -23,7 +24,7 @@ export function loadGoogleMapsApi(
 
     const script = document.createElement('script')
     script.onerror = reject
-    script.src = `https://maps.googleapis.com/maps/api/js?key=${apiKey}&libraries=places&callback=${callbackName}&language=${selectedLocale}`
+    script.src = `https://maps.googleapis.com/maps/api/js?key=${config.apiKey}&libraries=places&callback=${callbackName}&language=${selectedLocale}`
     document.getElementsByTagName('head')[0].appendChild(script)
   })