feature/Implementere-søk-med-debouncing

backend/src/index.ts

@@ -71,6 +71,7 @@ const typeDefs = `#graphql
     health: String!
 
     wines(
+      search: String
       limit: Int = 20
       offset: Int = 0
     ): WinePage!
@@ -91,8 +92,12 @@ const resolvers = {
   Query: {
     health: () => 'OK',
 
-    wines: async (_: unknown, args: { limit?: number; offset?: number }) => {
+    wines: async (
+      _: unknown,
+      args: { search?: string; limit?: number; offset?: number },
+    ) => {
       const { limit, offset } = readPaging(args);
+      const search = args.search?.trim() || null;
 
       const winesResult = await pool.query(
         `
@@ -112,14 +117,35 @@ const resolvers = {
         JOIN wineries wi ON w.winery_id = wi.id
         JOIN regions r ON w.region_id = r.id
         JOIN countries c ON w.country_code = c.code
+        WHERE (
+          $1::text IS NULL
+          OR w.name ILIKE $1 || '%'
+          OR w.name ILIKE '% ' || $1 || '%'
+          OR wi.name ILIKE $1 || '%'
+          OR wi.name ILIKE '% ' || $1 || '%'
+        )
         ORDER BY w.name, w.id
-        LIMIT $1
-        OFFSET $2
+        LIMIT $2
+        OFFSET $3
         `,
-        [limit, offset],
+        [search, limit, offset],
       );
 
-      const countResult = await pool.query(`SELECT COUNT(*) FROM wines`);
+      const countResult = await pool.query(
+        `
+        SELECT COUNT(*)
+        FROM wines w
+        JOIN wineries wi ON w.winery_id = wi.id
+        WHERE (
+          $1::text IS NULL
+          OR w.name ILIKE $1 || '%'
+          OR w.name ILIKE '% ' || $1 || '%'
+          OR wi.name ILIKE $1 || '%'
+          OR wi.name ILIKE '% ' || $1 || '%'
+        )
+        `,
+        [search],
+      );
 
       return {
         items: winesResult.rows,

client/src/components/WineCatalog.tsx

@@ -2,7 +2,11 @@ import { useEffect, useRef, useState } from 'react';
 import { useQuery } from '@apollo/client/react';
 import WineList from './WineList';
 import Pagination from './Pagination';
-import { WINES_QUERY, type WinesData } from '../graphql/queries';
+import {
+  WINES_QUERY,
+  type WinesData,
+  type WinesVariables,
+} from '../graphql/queries';
 
 export const PAGE_SIZE = 20;
 
@@ -18,12 +22,29 @@ export const PAGE_SIZE = 20;
  */
 export default function WineCatalog() {
   const [page, setPage] = useState(1);
+  const [searchInput, setSearchInput] = useState('');
+  const [search, setSearch] = useState('');
   const offset = (page - 1) * PAGE_SIZE;
 
-  const { data, previousData, loading, error } = useQuery<WinesData>(
-    WINES_QUERY,
-    { variables: { offset, limit: PAGE_SIZE } },
-  );
+  useEffect(() => {
+    const timeoutId = window.setTimeout(() => {
+      setSearch(searchInput.trim());
+      setPage(1);
+    }, 350);
+
+    return () => window.clearTimeout(timeoutId);
+  }, [searchInput]);
+
+  const { data, previousData, loading, error } = useQuery<
+    WinesData,
+    WinesVariables
+  >(WINES_QUERY, {
+    variables: {
+      search: search || null,
+      offset,
+      limit: PAGE_SIZE,
+    },
+  });
 
   const shown = data ?? previousData;
 
@@ -53,6 +74,18 @@ export default function WineCatalog() {
   return (
     // aria-busy tells screen readers the content is being updated
     <div aria-busy={loading}>
+      <div className="wine-search">
+        <label htmlFor="wine-search">Søk etter vin eller produsent</label>
+
+        <input
+          id="wine-search"
+          type="search"
+          value={searchInput}
+          onChange={(event) => setSearchInput(event.target.value)}
+          placeholder="For eksempel Barolo"
+        />
+      </div>
+
       <WineList
         wines={shown.wines.items}
         totalCount={totalCount}

client/src/graphql/queries.ts

@@ -16,8 +16,8 @@ import type { WineListItem } from '../types/wine';
  * never load the whole dataset (scalability and sustainability).
  */
 export const WINES_QUERY = gql`
-  query Wines($offset: Int, $limit: Int) {
-    wines(offset: $offset, limit: $limit) {
+  query Wines($search: String, $offset: Int, $limit: Int) {
+    wines(search: $search, offset: $offset, limit: $limit) {
       totalCount
       items {
         id
@@ -35,3 +35,9 @@ export const WINES_QUERY = gql`
 export type WinesData = {
   wines: { totalCount: number; items: WineListItem[] };
 };
+
+export type WinesVariables = {
+  search?: string | null;
+  offset?: number;
+  limit?: number;
+};