wip: Attempt lookup api

src/components/SpaceControls.tsx

@@ -2,6 +2,7 @@ import React, { ReactNode, useMemo, useState } from 'react'
 import { connect, Dispatch } from 'react-redux'
 
 import { State, Space, ActionType } from '~singletons/interfaces'
+import { useSpaceLabel } from '~singletons/lookup'
 import { getDmsStrings } from '~util/dms'
 import { Popover, PopoverTrigger, PopoverWrapper, usePopover } from './Popover'
 import { LatLongFields } from './SpaceControls/LatLongFields'
@@ -31,10 +32,11 @@ const SpaceControls = ({ space, setSpace }: Props): JSX.Element => {
 
 const SpaceDisplay = ({ space }: { space: Space }): JSX.Element => {
   if (!space) throw new Error('Unreachable')
-  const strings = useMemo(
+  const dmsStrings = useMemo(
     () => getDmsStrings(space.latitude, space.longitude),
     [space.latitude, space.longitude],
   )
+  const spaceLabel = useSpaceLabel(space)
   return (
     <div style={{ display: 'inline-block', padding: '4px 8px' }}>
       <div
@@ -43,16 +45,18 @@ const SpaceDisplay = ({ space }: { space: Space }): JSX.Element => {
           fontSize: '14px',
         }}
       >
-        {strings.lat} | {strings.long}
+        {dmsStrings.lat} | {dmsStrings.long}
       </div>
-      {/* <div
-        style={{
-          fontSize: '12px',
-          color: 'rgba(0, 0, 0, 0.6)',
-        }}
-      >
-        Seattle, WA, USA
-      </div> */}
+      {spaceLabel && (
+        <div
+          style={{
+            fontSize: '12px',
+            color: 'rgba(0, 0, 0, 0.6)',
+          }}
+        >
+          {spaceLabel}
+        </div>
+      )}
     </div>
   )
 }

src/main.tsx

@@ -1,3 +1,5 @@
+import 'regenerator-runtime/runtime'
+
 import React from 'react'
 import ReactDOM from 'react-dom'
 import { Provider } from 'react-redux'

src/singletons/lookup.ts

@@ -0,0 +1,81 @@
+import { useEffect, useState } from 'react'
+import { Space } from './interfaces'
+
+const API_URL = 'http://api.positionstack.com/v1'
+const API_LOL = [
+  'a',
+  'c',
+  'c',
+  'e',
+  's',
+  's',
+  '_',
+  'k',
+  'e',
+  'y',
+  '=',
+  '2',
+  '2',
+  'e',
+  'c',
+  '9',
+  '0',
+  'd',
+  '2',
+  'f',
+  '6',
+  '2',
+  '6',
+  '3',
+  '9',
+  'd',
+  '3',
+  'e',
+  '5',
+  '3',
+  '2',
+  '6',
+  '2',
+  '6',
+  '1',
+  '3',
+  '3',
+  'a',
+  'e',
+  '3',
+  '6',
+  '6',
+  '8',
+].join('')
+
+export const useSpaceLabel = (space: Space): string | undefined => {
+  const [label, setLabel] = useState<string>()
+  useEffect(() => {
+    lookupSpaceLabel(space).then((result) => setLabel(result))
+  }, [space])
+  return label
+}
+
+const lookupSpaceLabel = async ({
+  latitude,
+  longitude,
+}: Space): Promise<string | undefined> => {
+  /**
+   * Note TODO
+   * API request forwards to HTTPS
+   * Which, I gotta pay for
+   * This seems to happen in Chrome by default?
+   * Testing in Postman, it doesn't
+   * Wtf
+   */
+
+  const url = `${API_URL}/reverse?${API_LOL}&query=${latitude},${longitude}`
+  const response = await fetch(url, { referrerPolicy: 'unsafe-url' })
+  const json = await response.json()
+
+  console.log(json)
+
+  if (json.data && json.data.results && json.data.results[0]) {
+    return json.data.results[0].label
+  }
+}