remove geonames api call from frontend, make request backend route

nowcommunity · Nov 29, 2024 · c57300c · c57300c
1 parent 5f33793
commit c57300c
Show file tree

Hide file tree

Showing 7 changed files with 61 additions and 82 deletions.
diff --git a/backend/src/api-tests/geonames-api.test.ts b/backend/src/api-tests/geonames-api.test.ts
@@ -1,5 +1,5 @@
 import { afterAll, describe, it, expect } from '@jest/globals'
-import type { ParsedGeoname } from '../routes/geonames-api'
+import type { ParsedGeoname } from '../../../frontend/src/backendTypes'
 import { send } from './utils'
 import { pool } from '../utils/db'
 

diff --git a/backend/src/api-tests/geonames-api/data.ts b/backend/src/api-tests/geonames-api/data.ts
@@ -1,4 +1,4 @@
-import type { ParsedGeoname } from '../../routes/geonames-api'
+import type { ParsedGeoname } from '../../../../frontend/src/backendTypes'
 
 export const localities: ParsedGeoname[] = [
   { countryName: 'Finland', lat: 63.05484, lng: 24.75291, name: 'Kumpula' },

diff --git a/backend/src/routes/geonames-api.ts b/backend/src/routes/geonames-api.ts
@@ -1,34 +1,7 @@
 import { Router, Request } from 'express'
 import { GEONAMES_USERNAME } from '../utils/config'
 import { logger } from '../utils/logger'
-
-export type Geoname = {
-  adminCode01: string
-  lng: string | number
-  geonameId: number
-  toponymName: string
-  countryId: string
-  fcl: string
-  population: number
-  countryCode: string
-  name: string
-  fclName: string
-  adminCodes1: {
-    ISO3166_2: string
-  }
-  countryName: string
-  fcodeName: string
-  adminName1: string
-  lat: string | number
-  fcode: string
-}
-
-export type GeonamesJSON = {
-  totalResultsCount: number
-  geonames: Geoname[]
-}
-
-export type ParsedGeoname = Pick<Geoname, 'name' | 'countryName' | 'lat' | 'lng'>
+import { GeonamesJSON, ParsedGeoname } from '../../../frontend/src/backendTypes'
 
 const router = Router()
 

diff --git a/frontend/src/backendTypes.d.ts b/frontend/src/backendTypes.d.ts
@@ -300,3 +300,31 @@ type ValidationErrorItem = {
   name: string
   error: string
 }
+
+type Geoname = {
+  adminCode01: string
+  lng: number
+  geonameId: number
+  toponymName: string
+  countryId: string
+  fcl: string
+  population: number
+  countryCode: string
+  name: string
+  fclName: string
+  adminCodes1: {
+    ISO3166_2: string
+  }
+  countryName: string
+  fcodeName: string
+  adminName1: string
+  lat: number
+  fcode: string
+}
+
+export type GeonamesJSON = {
+  totalResultsCount: number
+  geonames: Geoname[]
+}
+
+export type ParsedGeoname = Pick<Geoname, 'name' | 'countryName' | 'lat' | 'lng'>
diff --git a/frontend/src/components/Map/CoordinateSelectionMap.tsx b/frontend/src/components/Map/CoordinateSelectionMap.tsx
@@ -4,6 +4,8 @@ import { TextField, List, ListItem, ListItemButton, ListItemText, Box, Button }
 import 'leaflet/dist/leaflet.css'
 import markerIconPng from 'leaflet/dist/images/marker-icon.png'
 import { Icon } from 'leaflet'
+import { useLazyGetGeonamesQuery } from '../../redux/geonamesReducer'
+import { ParsedGeoname } from '../../backendTypes'
 
 type Coordinate = {
   lat: number
@@ -58,62 +60,21 @@ const LocationSearch = ({
   setViewCoordinates: CoordinateSetter
   setMarkerCoordinates: CoordinateSetter
 }) => {
-  type Location = {
-    name: string
-    country: string
-    latitude: number
-    longitude: number
-  }
-
   const [searchBoxValue, setSearchBoxValue] = useState('')
-  const [resultsList, setResultsList] = useState<Location[]>([])
-
-  const handleSearch = async () => {
-    const username = String(import.meta.env.VITE_GEONAMES_USERNAME)
-    const url = `https://secure.geonames.org/searchJSON?q=${searchBoxValue}&maxRows=5&username=${username}`
+  const [resultsList, setResultsList] = useState<ParsedGeoname[]>([])
 
-    type Geoname = {
-      adminCode01: string
-      lng: string
-      geonameId: number
-      toponymName: string
-      countryId: string
-      fcl: string
-      population: number
-      countryCode: string
-      name: string
-      fclName: string
-      adminCodes1: {
-        ISO3166_2: string
-      }
-      countryName: string
-      fcodeName: string
-      adminName1: string
-      lat: string
-      fcode: string
-    }
-    type GeoNamesJSON = {
-      totalResultsCount: number
-      geonames: Geoname[]
-    }
+  const [getGeonames] = useLazyGetGeonamesQuery()
 
-    try {
-      const result = (await (await fetch(url)).json()) as GeoNamesJSON
-      const locations = result.geonames.map(geoname => ({
-        name: geoname.name,
-        country: geoname.countryName,
-        latitude: Number(geoname.lat),
-        longitude: Number(geoname.lng),
-      }))
-      setResultsList(locations)
-    } catch (error) {
-      throw new Error('Location search failed')
+  const handleSearch = async (search: string) => {
+    const { data } = await getGeonames(search)
+    if (data) {
+      setResultsList(data?.locations)
     }
   }
 
   const handleKeyDown = (event: KeyboardEvent) => {
     if (event.key === 'Enter') {
-      void handleSearch()
+      void handleSearch(searchBoxValue)
     }
   }
 
@@ -128,7 +89,7 @@ const LocationSearch = ({
           onKeyDown={handleKeyDown}
           placeholder="Search for a place..."
         />
-        <Button variant="contained" onClick={() => void handleSearch()}>
+        <Button variant="contained" onClick={() => void handleSearch(searchBoxValue)}>
           {'Search'}
         </Button>
       </Box>
@@ -137,11 +98,11 @@ const LocationSearch = ({
           <ListItem key={index} sx={{ backgroundColor: 'lightgray' }}>
             <ListItemButton
               onClick={() => {
-                setViewCoordinates({ lat: result.latitude, lng: result.longitude })
-                setMarkerCoordinates({ lat: result.latitude, lng: result.longitude })
+                setViewCoordinates({ lat: result.lat, lng: result.lng })
+                setMarkerCoordinates({ lat: result.lat, lng: result.lng })
               }}
             >
-              <ListItemText primary={`${result.name}, ${result.country}`} />
+              <ListItemText primary={`${result.name}, ${result.countryName}`} />
             </ListItemButton>
           </ListItem>
         ))}

diff --git a/frontend/src/redux/api.ts b/frontend/src/redux/api.ts
@@ -63,6 +63,7 @@ export const api = createApi({
     'timebound',
     'timebounds',
     'author',
+    'geoname',
   ],
   baseQuery: baseQueryWithReauth,
   endpoints: () => ({}),

diff --git a/frontend/src/redux/geonamesReducer.ts b/frontend/src/redux/geonamesReducer.ts
@@ -0,0 +1,16 @@
+import { api } from './api'
+import { ParsedGeoname } from '../backendTypes'
+
+const geonamesApi = api.injectEndpoints({
+  endpoints: builder => ({
+    getGeonames: builder.query<{ locations: ParsedGeoname[] }, string>({
+      query: search => ({
+        url: `/geonames-api`,
+        method: 'POST',
+        body: { locationName: search },
+      }),
+    }),
+  }),
+})
+
+export const { useLazyGetGeonamesQuery } = geonamesApi