Create search bar

src/App.tsx

@@ -2,14 +2,19 @@ import { useState } from "react"
 import "./App.css"
 import LocationList from "./components/location-list"
 import ViewCity from "./components/ViewCity"
+import SearchBar from "./components/SearchBar"
 
 function App() {
   const [selectedCity, setSelectedCity] = useState<string>("Sørumsand")
+  const handleSearch = (query: string) => {
+    setSelectedCity(query)
+  }
 
   return (
     <>
       <section id="center">
         <LocationList onCitySelect={setSelectedCity} />
+        <SearchBar onSearch={handleSearch} />
         <ViewCity city={selectedCity} />
       </section>
       <section id="spacer"></section>

src/components/SearchBar.tsx

@@ -0,0 +1,118 @@
+import { useState } from "react"
+import { useQuery } from "@tanstack/react-query"
+import type { quickCityResult } from "../hooks/fetchCities/types"
+
+type SearchBarProps = {
+  onSearch: (query: string) => void
+}
+
+export default function SearchBar({ onSearch }: SearchBarProps) {
+  const [value, setValue] = useState("")
+
+  const { data } = useQuery({
+    queryKey: ["citySuggestions", value],
+    queryFn: () =>
+      fetch(
+        `https://geocoding-api.open-meteo.com/v1/search?name=${value}&count=4&language=no`
+      ).then((res) => res.json()),
+    enabled: value.length >= 2,
+  })
+  const results = data?.results ?? []
+  const handleSubmit = (e: React.SubmitEvent) => {
+    e.preventDefault()
+
+    if (!value.trim()) return
+
+    onSearch(value.trim())
+  }
+
+  const countryCodeToFlag = (code: string) => {
+    if (!code) return "🌍"
+
+    return code
+      .toUpperCase()
+      .split("")
+      .map((c) => String.fromCodePoint(127397 + c.charCodeAt(0)))
+      .join("")
+  }
+
+  return (
+    <div
+      style={{
+        display: "flex",
+        flexDirection: "column",
+        width: "100%",
+        alignItems: "center",
+      }}
+    >
+      <form
+        onSubmit={handleSubmit}
+        style={{
+          width: "100%",
+        }}
+      >
+        <input
+          type="search"
+          placeholder="Søk etter sted..."
+          value={value}
+          onChange={(e) => setValue(e.target.value)}
+          style={{
+            width: "80%",
+            padding: "12px 18px",
+            borderRadius: "999px",
+            border: "none",
+            outline: "none",
+            fontSize: "1rem",
+            backgroundColor: "#ffffff",
+            boxShadow: "0 4px 12px rgba(0,0,0,0.12)",
+          }}
+        />
+      </form>
+
+      {results.length > 0 && (
+        <div
+          style={{
+            width: "80%",
+            background: "white",
+            borderRadius: "16px",
+            boxShadow: "0 10px 25px rgba(0,0,0,0.15)",
+            zIndex: 100,
+          }}
+        >
+          {results.map((city: quickCityResult) => (
+            <button
+              key={`${city.latitude}-${city.longitude}`}
+              type="button"
+              onClick={() => {
+                onSearch(city.name)
+                setValue("")
+              }}
+              style={{
+                width: "100%",
+                padding: "12px 16px",
+                border: "none",
+                background: "white",
+                textAlign: "left",
+                cursor: "pointer",
+                display: "flex",
+                justifyContent: "space-between",
+              }}
+            >
+              <span>
+                {countryCodeToFlag(city.country_code)} {city.name}
+              </span>
+              <span
+                style={{
+                  color: "#666",
+                  fontSize: "0.9rem",
+                }}
+              >
+                {city.country}
+              </span>
+            </button>
+          ))}
+        </div>
+      )}
+    </div>
+  )
+}

src/components/ViewCity.tsx

@@ -22,12 +22,15 @@ export default function ViewCity(arg: ViewCityProp) {
   const firstTimeStep = result?.properties.timeseries[0]
   const windSpeed = firstTimeStep?.data.instant.details?.wind_speed
   const temperature = firstTimeStep?.data.instant.details?.air_temperature
+  const country = data.result[0]?.country
 
   return (
     <div>
-      <div>Været i {arg.city}</div>
-      <p>Temperatur: {temperature}</p>
-      <p>Vindhastighet: {windSpeed}</p>
+      <div>
+        Været i {arg.city}, {country}
+      </div>
+      <p>Temperatur: {temperature}°C</p>
+      <p>Vindhastighet: {windSpeed} m/s</p>
     </div>
   )
 }

src/hooks/fetchCities/types.ts

@@ -5,9 +5,21 @@ export type citySearchResult = {
     longitude: number
     elevation: number
     timezone: string
+    country: string
+    country_code: string
   }[]
 }
 
+export type quickCityResult = {
+  name: string
+  latitude: number
+  longitude: number
+  elevation: number
+  timezone: string
+  country: string
+  country_code: string
+}
+
 export const countryCodes = [
   "AU",
   "AT",

src/hooks/fetchCities/useGetCityCoordinates.ts

@@ -2,7 +2,7 @@ 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 queryString = `?name=${filter.cityName}${filter.countryCode ? `&countryCode=${filter.countryCode}` : ""}&language=no`
 
   const { isLoading, error, data } = useQuery({
     queryKey: ["citySearch", filter.cityName],

tests/components/ViewCity.test.tsx

@@ -45,9 +45,9 @@ describe("ViewCity", () => {
 
     render(<ViewCity city="Oslo" />)
 
-    expect(screen.getByText("Været i Oslo")).toBeTruthy()
-    expect(screen.getByText("Temperatur: 12.5")).toBeTruthy()
-    expect(screen.getByText("Vindhastighet: 4.2")).toBeTruthy()
+    expect(screen.getByText("Været i Oslo,")).toBeTruthy()
+    expect(screen.getByText("Temperatur: 12.5°C")).toBeTruthy()
+    expect(screen.getByText("Vindhastighet: 4.2 m/s")).toBeTruthy()
     expect(mockUseGetCityCoordinates).toHaveBeenCalledWith({ cityName: "Oslo" })
     expect(mockUseGetWeather).toHaveBeenCalledWith(59.9, 10.7)
   })

tests/hooks/fetchCities/useGetCityCoordinates.test.ts

@@ -29,13 +29,17 @@ it("should fetch the city search results", async () => {
         longitude: 69,
         elevation: 420,
         timezone: "Europe/Oslo",
+        country: "Norge",
+        country_code: "NO",
       },
       {
         name: "Oslo",
         latitude: 0,
         longitude: 0,
         elevation: 10,
         timezone: "America/Chicago",
+        country: "USA",
+        country_code: "US",
       },
     ],
   }
@@ -61,6 +65,6 @@ it("should fetch the city search results", async () => {
 
   expect(fetchMock).toHaveBeenCalledTimes(1)
   expect(fetchMock).toHaveBeenCalledWith(
-    "https://geocoding-api.open-meteo.com/v1/search?name=Oslo"
+    "https://geocoding-api.open-meteo.com/v1/search?name=Oslo&language=no"
   )
 })