5 filtrere eller sortering av steder

package.json

@@ -11,6 +11,7 @@
   },
   "dependencies": {
     "@tanstack/react-query": "^5.102.8",
+    "country-codes-list": "^3.2.0",
     "react": "^19.2.8",
     "react-dom": "^19.2.8"
   },

src/components/ViewCity.tsx

@@ -1,12 +1,13 @@
 import useGetWeather from "../hooks/fetchWeather/useGetWeather"
-import useGetCityCoordinates from "../hooks/useGetCityCoordinates"
+import useGetCityCoordinates from "../hooks/fetchCities/useGetCityCoordinates"
 
 interface ViewCityProp {
   city: string
 }
 
 export default function ViewCity(arg: ViewCityProp) {
-  const data = useGetCityCoordinates(arg.city)
+  const cityFilter = { cityName: arg.city }
+  const data = useGetCityCoordinates(cityFilter)
 
   const { isLoading, error, result } = useGetWeather(
     data.result[0]?.latitude,

src/hooks/fetchCities/types.ts

@@ -0,0 +1,47 @@
+export type citySearchResult = {
+  results: {
+    name: string
+    latitude: number
+    longitude: number
+    elevation: number
+    timezone: string
+  }[]
+}
+
+export const countryCodes = [
+  "AU",
+  "AT",
+  "AZ",
+  "BE",
+  "BR",
+  "CA",
+  "CN",
+  "DK",
+  "FI",
+  "FR",
+  "DE",
+  "GR",
+  "HU",
+  "IE",
+  "IT",
+  "JP",
+  "MX",
+  "NL",
+  "NO",
+  "PL",
+  "PT",
+  "RU",
+  "ES",
+  "SE",
+  "CH",
+  "TR",
+  "UK",
+  "US",
+] as const
+
+export type CountryCode = (typeof countryCodes)[number]
+
+export type citySearchFilter = {
+  cityName: string
+  countryCode?: CountryCode
+}

src/hooks/fetchCities/useGetCityCoordinates.ts

@@ -0,0 +1,20 @@
+import { useQuery } from "@tanstack/react-query"
+import type { citySearchResult, citySearchFilter } from "./types"
+
+const useGetCityCoordinates = (filter: citySearchFilter) => {
+  const queryString = `?name=${filter.cityName}${filter.countryCode ? `&countryCode=${filter.countryCode}` : ""}`
+
+  const { isLoading, error, data } = useQuery({
+    queryKey: ["citySearch", filter.cityName],
+    queryFn: () =>
+      fetch(
+        `https://geocoding-api.open-meteo.com/v1/search${queryString}`
+      ).then((res) => res.json() as Promise<citySearchResult>),
+  })
+
+  const result = data?.results ?? []
+
+  return { isLoading, error, result }
+}
+
+export default useGetCityCoordinates