Add filtering of countries in search

package.json

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

src/components/FilterDropdown.tsx

@@ -0,0 +1,33 @@
+import { countryCodes } from "../hooks/fetchCities/types"
+import type { CountryCode } from "../hooks/fetchCities/types"
+import { findOneByCode } from "country-codes-list"
+
+export type FilterDropdownProps = {
+  selectedCountryCode?: CountryCode | undefined
+  dropdownChangeHandler: (newCountryCode: string) => void
+}
+
+export const FilterDropdown = ({
+  selectedCountryCode,
+  dropdownChangeHandler,
+}: FilterDropdownProps) => {
+  return (
+    <div>
+      <p>Filter by country:</p>
+      <select
+        name="countrySelect"
+        value={selectedCountryCode ?? "ALL"}
+        onChange={(event) => dropdownChangeHandler(event.target.value)}
+      >
+        <option id="dropdown-option-ALL" value="ALL">
+          All
+        </option>
+        {countryCodes.map((code) => (
+          <option id={`dropdown-option-${code}`} value={code}>
+            {findOneByCode(code)?.countryNameEn}
+          </option>
+        ))}
+      </select>
+    </div>
+  )
+}

src/components/SearchBar.tsx

@@ -1,23 +1,55 @@
-import { useState } from "react"
-import { useQuery } from "@tanstack/react-query"
-import type { quickCityResult } from "../hooks/fetchCities/types"
+import { useEffect, useState } from "react"
+import { countryCodes } from "../hooks/fetchCities/types"
+import type { CountryCode, quickCityResult } from "../hooks/fetchCities/types"
+import { FilterDropdown } from "./FilterDropdown"
+import useGetCityCoordinates from "../hooks/fetchCities/useGetCityCoordinates"
+import { useDebounce } from "@uidotdev/usehooks"
+
+const COUNTRY_CODE_FILTER_STORAGE_KEY = "countryCodeFilter"
+
+const getInitialCountryCodeFilter = (): CountryCode | undefined => {
+  const storedCountryCode = sessionStorage.getItem(
+    COUNTRY_CODE_FILTER_STORAGE_KEY
+  )
+
+  return countryCodes.includes(storedCountryCode as CountryCode)
+    ? (storedCountryCode as CountryCode)
+    : undefined
+}
 
 type SearchBarProps = {
   onSearch: (query: string) => void
 }
 
 export default function SearchBar({ onSearch }: SearchBarProps) {
   const [value, setValue] = useState("")
+  const [countryCodeFilter, setCountryCodeFilter] = useState<
+    CountryCode | undefined
+  >(getInitialCountryCodeFilter)
+  const deboucedSearch = useDebounce(value, 400)
 
-  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,
+  useEffect(() => {
+    if (countryCodeFilter) {
+      sessionStorage.setItem(COUNTRY_CODE_FILTER_STORAGE_KEY, countryCodeFilter)
+    } else {
+      sessionStorage.removeItem(COUNTRY_CODE_FILTER_STORAGE_KEY)
+    }
+  }, [countryCodeFilter])
+
+  const handleUpdateCountryCodeDropdown = (newCountryCode: string) => {
+    if (newCountryCode === "ALL") {
+      setCountryCodeFilter(undefined)
+    } else {
+      setCountryCodeFilter(newCountryCode as CountryCode)
+    }
+  }
+
+  const { result } = useGetCityCoordinates({
+    cityName: deboucedSearch,
+    countryCode: countryCodeFilter,
+    conditionalEnable: deboucedSearch.length >= 2,
   })
-  const results = data?.results ?? []
+
   const handleSubmit = (e: React.SubmitEvent) => {
     e.preventDefault()
 
@@ -48,7 +80,9 @@ export default function SearchBar({ onSearch }: SearchBarProps) {
       <form
         onSubmit={handleSubmit}
         style={{
-          width: "100%",
+          width: "80%",
+          display: "flex",
+          gap: 10,
         }}
       >
         <input
@@ -67,9 +101,13 @@ export default function SearchBar({ onSearch }: SearchBarProps) {
             boxShadow: "0 4px 12px rgba(0,0,0,0.12)",
           }}
         />
+        <FilterDropdown
+          selectedCountryCode={countryCodeFilter}
+          dropdownChangeHandler={handleUpdateCountryCodeDropdown}
+        />
       </form>
 
-      {results.length > 0 && (
+      {result.length > 0 && (
         <div
           style={{
             width: "80%",
@@ -79,7 +117,7 @@ export default function SearchBar({ onSearch }: SearchBarProps) {
             zIndex: 100,
           }}
         >
-          {results.map((city: quickCityResult) => (
+          {result.map((city: quickCityResult) => (
             <button
               key={`${city.latitude}-${city.longitude}`}
               type="button"

src/hooks/fetchCities/types.ts

@@ -1,3 +1,5 @@
+import type { QueryBooleanOption } from "@tanstack/react-query"
+
 export type citySearchResult = {
   results: {
     name: string
@@ -55,5 +57,6 @@ export type CountryCode = (typeof countryCodes)[number]
 
 export type citySearchFilter = {
   cityName: string
-  countryCode?: CountryCode
+  countryCode?: CountryCode | undefined
+  conditionalEnable?: QueryBooleanOption<unknown, Error, string[]>
 }

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

tests/hooks/fetchCities/useGetCityCoordinates.test.ts

@@ -65,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&language=no"
+    "https://geocoding-api.open-meteo.com/v1/search?name=Oslo&count=4&language=no"
   )
 })