[feat] legg til søk med debounce

src/App.tsx

@@ -6,28 +6,35 @@ import { SearchBar } from './components/SearchBar';
 import { CountryDetailPage } from './pages/CountryDetailPage';
 import type { Country } from './types/country';
 import { GET_COUNTRIES } from './graphql/countries';
+import { useDebounce } from './hooks/useDebounce';
 
 function App() {
   const [selectedCode, setSelectedCode] = useState<string | null>(null);
 
+  const [searchText, setSearchText] = useState('');
+  const search = useDebounce(searchText.trim(), 300);
+
   const { loading, error, data } = useQuery<{
     countries: { items: Country[]; totalCount: number };
   }>(GET_COUNTRIES, {
-    variables: { limit: 20, offset: 0 },
+    variables: { search: search || null, limit: 20, offset: 0 },
   });
 
-  if (loading) return <p>Loading countries...</p>;
-  if (error) return <p>Error loading countries: {error.message}</p>;
-
   const countries = data?.countries.items ?? [];
   const selectedCountry = countries.find((country) => country.code === selectedCode) ?? null;
 
   return (
     <>
       <h1>Countries</h1>
-      {!selectedCode && <SearchBar />}
+      {!selectedCode && <SearchBar value={searchText} onChange={setSearchText} />}
       {selectedCode && selectedCountry ? (
         <CountryDetailPage country={selectedCountry} onBack={() => setSelectedCode(null)} />
+      ) : error ? (
+        <p>Error loading countries: {error.message}</p>
+      ) : loading ? (
+        <p>Loading countries...</p>
+      ) : countries.length === 0 ? (
+        <p>No countries found.</p>
       ) : (
         <CountryList countries={countries} onSelect={(country) => setSelectedCode(country.code)} />
       )}

src/components/SearchBar.tsx

@@ -1,8 +1,19 @@
-export function SearchBar() {
+interface SearchBarProps {
+  value: string;
+  onChange: (value: string) => void;
+}
+
+export function SearchBar({ value, onChange }: SearchBarProps) {
   return (
     <search>
       <label htmlFor="country-search">Search for countries</label>
-      <input type="search" id="country-search" placeholder="e.g. Norway" />
+      <input
+        type="search"
+        id="country-search"
+        placeholder="e.g. Norway"
+        value={value}
+        onChange={(event) => onChange(event.target.value)}
+      />
     </search>
   );
 }

src/graphql/countries.ts

@@ -1,8 +1,8 @@
 import { gql } from '@apollo/client';
 
 export const GET_COUNTRIES = gql`
-  query GetCountries($limit: Int!, $offset: Int!) {
-    countries(limit: $limit, offset: $offset) {
+  query GetCountries($search: String, $limit: Int!, $offset: Int!) {
+    countries(search: $search, limit: $limit, offset: $offset) {
       items {
         code
         name

src/hooks/useDebounce.ts

@@ -0,0 +1,12 @@
+import { useEffect, useState } from 'react';
+
+export function useDebounce<T>(value: T, delayMs: number): T {
+  const [debounced, setDebounced] = useState(value);
+
+  useEffect(() => {
+    const timer = setTimeout(() => setDebounced(value), delayMs);
+    return () => clearTimeout(timer);
+  }, [value, delayMs]);
+
+  return debounced;
+}