From 3087aa2ea122a045952f3e80dfa81b4674b1a614 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jonathan=20M=C3=BCller-Grud?= <jonatsm@stud.ntnu.no>
Date: Mon, 12 Oct 2026 12:14:55 +0200
Subject: [PATCH 1/6] Refactor: Make sighting types match the GraphQL API

Allow null in every UfoSighting field except id, like the Sighting
type in the schem, and show readable fallbacks when values are
missing. Map the URL sort names to the API's SightingSort enum.

Refs #34
---
 frontend/src/components/SightingList.tsx   |  7 ++--
 frontend/src/components/SightingMap.css    |  8 ++++
 frontend/src/components/SightingMap.tsx    | 15 ++++++-
 frontend/src/pages/SightingDetailPage.tsx  |  2 +-
 frontend/src/tests/SightingList.test.tsx   | 31 +++++++++++++-
 frontend/src/tests/SightingMap.test.tsx    | 15 ++++++-
 frontend/src/tests/format-sighting.test.ts | 13 ++++++
 frontend/src/types/ufo-sighting.ts         | 47 ++++++++++++++--------
 frontend/src/utils/filter-sightings.ts     | 10 ++---
 frontend/src/utils/format-sighting.ts      | 14 +++++--
 10 files changed, 129 insertions(+), 33 deletions(-)

diff --git a/frontend/src/components/SightingList.tsx b/frontend/src/components/SightingList.tsx
index 341112c..af8bd6d 100644
--- a/frontend/src/components/SightingList.tsx
+++ b/frontend/src/components/SightingList.tsx
@@ -4,6 +4,7 @@ import {
   formatDate,
   formatDuration,
   formatLocation,
+  formatShape,
 } from '../utils/format-sighting'
 import SightingMap from './SightingMap'
 import './SightingList.css'
@@ -46,21 +47,21 @@ function SightingList({ sightings }: SightingListProps) {
                       {formatLocation(sighting)}
                     </Link>
                   </h2>
-                  <time dateTime={sighting.datetime}>
+                  <time dateTime={sighting.datetime ?? undefined}>
                     {formatDate(sighting.datetime)}
                   </time>
                 </div>
                 <dl className="sighting-list__details">
                   <div>
                     <dt>Shape</dt>
-                    <dd>{sighting.shape}</dd>
+                    <dd>{formatShape(sighting.shape)}</dd>
                   </div>
                   <div>
                     <dt>Duration</dt>
                     <dd>{formatDuration(sighting.durationSeconds)}</dd>
                   </div>
                 </dl>
-                <p>{sighting.comments}</p>
+                {sighting.comments && <p>{sighting.comments}</p>}
               </article>
             </li>
           ))}
diff --git a/frontend/src/components/SightingMap.css b/frontend/src/components/SightingMap.css
index 8a3eb6f..49b21a2 100644
--- a/frontend/src/components/SightingMap.css
+++ b/frontend/src/components/SightingMap.css
@@ -7,3 +7,11 @@
   height: 100%;
   width: 100%;
 }
+
+.sighting-map--empty {
+  display: grid;
+  place-items: center;
+  background: var(--code-bg);
+  color: var(--text);
+  font-size: 15px;
+}
diff --git a/frontend/src/components/SightingMap.tsx b/frontend/src/components/SightingMap.tsx
index 9af6281..029c18d 100644
--- a/frontend/src/components/SightingMap.tsx
+++ b/frontend/src/components/SightingMap.tsx
@@ -35,12 +35,23 @@ function SightingMap({
   zoom = 10,
   className,
 }: SightingMapProps) {
+  const classNames = ['sighting-map', className].filter(Boolean).join(' ')
+
+  // Leaflet throws on a null position, so show a placeholder instead.
+  if (sighting.latitude === null || sighting.longitude === null) {
+    return (
+      <div className={`${classNames} sighting-map--empty`}>
+        <p>No map location</p>
+      </div>
+    )
+  }
+
   const position: [number, number] = [sighting.latitude, sighting.longitude]
 
   return (
     <div
-      className={['sighting-map', className].filter(Boolean).join(' ')}
-      aria-label={`Map showing ${sighting.city}`}
+      className={classNames}
+      aria-label={`Map showing ${formatLocation(sighting)}`}
     >
       <MapContainer
         center={position}
diff --git a/frontend/src/pages/SightingDetailPage.tsx b/frontend/src/pages/SightingDetailPage.tsx
index d77c0a1..bca0d57 100644
--- a/frontend/src/pages/SightingDetailPage.tsx
+++ b/frontend/src/pages/SightingDetailPage.tsx
@@ -68,7 +68,7 @@ function SightingDetailPage() {
       {backLink}
       <header className="sighting-detail__header">
         <h1>{title}</h1>
-        <time dateTime={sighting.datetime}>
+        <time dateTime={sighting.datetime ?? undefined}>
           {formatDate(sighting.datetime)}
         </time>
       </header>
diff --git a/frontend/src/tests/SightingList.test.tsx b/frontend/src/tests/SightingList.test.tsx
index 9db7c21..59d54ec 100644
--- a/frontend/src/tests/SightingList.test.tsx
+++ b/frontend/src/tests/SightingList.test.tsx
@@ -22,10 +22,39 @@ describe('SightingList', () => {
     ).toHaveAttribute('href', '/sightings/1')
     expect(screen.getByText('cylinder')).toBeInTheDocument()
     expect(screen.getByText('45 min')).toBeInTheDocument()
-    expect(screen.getByText(mockSightings[0].comments)).toBeInTheDocument()
+    expect(
+      screen.getByText(/occurred after a Boy Scout meeting/),
+    ).toBeInTheDocument()
     expect(screen.getByTestId('sighting-map')).toBeInTheDocument()
   })
 
+  it('shows fallbacks for fields the API returns as null', () => {
+    render(
+      <MemoryRouter>
+        <SightingList
+          sightings={[
+            {
+              ...mockSightings[0],
+              datetime: null,
+              city: null,
+              state: null,
+              country: null,
+              shape: null,
+              durationSeconds: null,
+              comments: null,
+            },
+          ]}
+        />
+      </MemoryRouter>,
+    )
+
+    expect(
+      screen.getByRole('link', { name: 'Unknown location' }),
+    ).toBeInTheDocument()
+    expect(screen.getByText('Unknown date')).toBeInTheDocument()
+    expect(screen.getAllByText('Unknown')).toHaveLength(2)
+  })
+
   it('uses plural result text and explains when no sightings match', () => {
     render(
       <MemoryRouter>
diff --git a/frontend/src/tests/SightingMap.test.tsx b/frontend/src/tests/SightingMap.test.tsx
index 1855544..e502d86 100644
--- a/frontend/src/tests/SightingMap.test.tsx
+++ b/frontend/src/tests/SightingMap.test.tsx
@@ -58,7 +58,9 @@ describe('SightingMap', () => {
     const sighting = mockSightings[0]
     render(<SightingMap sighting={sighting} />)
 
-    expect(screen.getByLabelText('Map showing San Marcos')).toBeInTheDocument()
+    expect(
+      screen.getByLabelText('Map showing San Marcos, TX, US'),
+    ).toBeInTheDocument()
     expect(screen.getByTestId('map-container')).toHaveAttribute(
       'data-center',
       `${sighting.latitude},${sighting.longitude}`,
@@ -82,6 +84,17 @@ describe('SightingMap', () => {
     expect(screen.getByText('San Marcos, TX, US')).toBeInTheDocument()
   })
 
+  it('shows a placeholder instead of a map when coordinates are missing', () => {
+    render(
+      <SightingMap
+        sighting={{ ...mockSightings[0], latitude: null, longitude: null }}
+      />,
+    )
+
+    expect(screen.getByText('No map location')).toBeInTheDocument()
+    expect(screen.queryByTestId('map-container')).not.toBeInTheDocument()
+  })
+
   it('enables map controls when interactive', () => {
     render(<SightingMap sighting={mockSightings[0]} interactive zoom={11} />)
 
diff --git a/frontend/src/tests/format-sighting.test.ts b/frontend/src/tests/format-sighting.test.ts
index e1771e0..10bf2a7 100644
--- a/frontend/src/tests/format-sighting.test.ts
+++ b/frontend/src/tests/format-sighting.test.ts
@@ -4,6 +4,7 @@ import {
   formatDate,
   formatDuration,
   formatLocation,
+  formatShape,
 } from '../utils/format-sighting'
 
 const sighting: UfoSighting = {
@@ -33,6 +34,18 @@ describe('sighting formatters', () => {
     expect(formatLocation({ ...sighting, state: '', country: '' })).toBe('Oslo')
   })
 
+  it('falls back to readable text when the API returns null', () => {
+    expect(formatDate(null)).toBe('Unknown date')
+    expect(formatDuration(null)).toBe('Unknown')
+    expect(formatShape(null)).toBe('Unknown')
+    expect(formatLocation({ ...sighting, city: null })).toBe(
+      'Unknown location, OS, NO',
+    )
+    expect(
+      formatLocation({ ...sighting, city: null, state: null, country: null }),
+    ).toBe('Unknown location')
+  })
+
   it('formats dates using the English medium date style', () => {
     expect(formatDate('2000-01-02T12:00:00')).toBe(
       new Intl.DateTimeFormat('en', { dateStyle: 'medium' }).format(
diff --git a/frontend/src/types/ufo-sighting.ts b/frontend/src/types/ufo-sighting.ts
index 3689dc3..eace27d 100644
--- a/frontend/src/types/ufo-sighting.ts
+++ b/frontend/src/types/ufo-sighting.ts
@@ -1,25 +1,25 @@
 /**
- * A single UFO sighting report. Fields mirror the columns of the NUFORC
- * sightings CSV so the same shape can be reused once data comes from the
- * GraphQL backend instead of static mock data.
+ * A single UFO sighting report, matching `Sighting` in the GraphQL schema.
+ * Every field but `id` can be null because imported NUFORC rows are
+ * incomplete, e.g. about 1,900 have no shape.
  */
 export interface UfoSighting {
   id: string
-  /** ISO 8601 timestamp of when the sighting happened. */
-  datetime: string
-  city: string
-  /** State or region code, empty when the report has none. */
-  state: string
-  /** Country code, empty when the report has none. */
-  country: string
-  shape: string
-  durationSeconds: number
+  /** Local time where it was seen, no timezone, e.g. 2005-01-01T00:30:00. */
+  datetime: string | null
+  city: string | null
+  /** State or region code. */
+  state: string | null
+  /** Country code. */
+  country: string | null
+  shape: string | null
+  durationSeconds: number | null
   /** Free-text description written by the observer. */
-  comments: string
-  /** ISO 8601 date of when the report was posted. */
-  datePosted: string
-  latitude: number
-  longitude: number
+  comments: string | null
+  /** When the report was posted, same format as `datetime`. */
+  datePosted: string | null
+  latitude: number | null
+  longitude: number | null
 }
 
 // Kept as a runtime list so values read from the URL can be validated.
@@ -37,3 +37,16 @@ export function isSightingSortOption(
 ): value is SightingSortOption {
   return sightingSortOptions.some((option) => option === value)
 }
+
+/** The `SightingSort` enum values in the GraphQL schema. */
+export type SightingSortEnum =
+  'DATE_DESC' | 'DATE_ASC' | 'CITY_ASC' | 'SHAPE_ASC'
+
+// The URL keeps the readable lowercase names. A Record makes TypeScript
+// fail if a sort option is added without an API value.
+export const sightingSortEnum: Record<SightingSortOption, SightingSortEnum> = {
+  'date-desc': 'DATE_DESC',
+  'date-asc': 'DATE_ASC',
+  'city-asc': 'CITY_ASC',
+  'shape-asc': 'SHAPE_ASC',
+}
diff --git a/frontend/src/utils/filter-sightings.ts b/frontend/src/utils/filter-sightings.ts
index c59e2b9..27a0f2a 100644
--- a/frontend/src/utils/filter-sightings.ts
+++ b/frontend/src/utils/filter-sightings.ts
@@ -13,7 +13,7 @@ export function filterSightings(
 
   return sightings.filter((sighting) =>
     [sighting.city, sighting.shape, sighting.comments].some((field) =>
-      field.toLowerCase().includes(normalizedQuery),
+      field?.toLowerCase().includes(normalizedQuery),
     ),
   )
 }
@@ -23,10 +23,10 @@ const comparators: Record<
   (a: UfoSighting, b: UfoSighting) => number
 > = {
   // ISO 8601 strings sort chronologically when compared as strings.
-  'date-desc': (a, b) => b.datetime.localeCompare(a.datetime),
-  'date-asc': (a, b) => a.datetime.localeCompare(b.datetime),
-  'city-asc': (a, b) => a.city.localeCompare(b.city),
-  'shape-asc': (a, b) => a.shape.localeCompare(b.shape),
+  'date-desc': (a, b) => (b.datetime ?? '').localeCompare(a.datetime ?? ''),
+  'date-asc': (a, b) => (a.datetime ?? '').localeCompare(b.datetime ?? ''),
+  'city-asc': (a, b) => (a.city ?? '').localeCompare(b.city ?? ''),
+  'shape-asc': (a, b) => (a.shape ?? '').localeCompare(b.shape ?? ''),
 }
 
 /** Returns a sorted copy so the caller's array is never mutated. */
diff --git a/frontend/src/utils/format-sighting.ts b/frontend/src/utils/format-sighting.ts
index db18eec..c5a09d9 100644
--- a/frontend/src/utils/format-sighting.ts
+++ b/frontend/src/utils/format-sighting.ts
@@ -1,12 +1,15 @@
 import type { UfoSighting } from '../types/ufo-sighting'
 
-export function formatDate(date: string) {
+export function formatDate(date: string | null) {
+  if (!date) return 'Unknown date'
+
   return new Intl.DateTimeFormat('en', {
     dateStyle: 'medium',
   }).format(new Date(date))
 }
 
-export function formatDuration(seconds: number) {
+export function formatDuration(seconds: number | null) {
+  if (seconds === null) return 'Unknown'
   if (seconds < 60) return `${seconds} sec`
 
   const minutes = Math.floor(seconds / 60)
@@ -17,10 +20,15 @@ export function formatDuration(seconds: number) {
 }
 
 export function formatLocation(sighting: UfoSighting) {
+  const city = sighting.city ?? 'Unknown location'
   const region = [sighting.state, sighting.country]
     .filter(Boolean)
     .join(', ')
     .toUpperCase()
 
-  return region ? `${sighting.city}, ${region}` : sighting.city
+  return region ? `${city}, ${region}` : city
+}
+
+export function formatShape(shape: string | null) {
+  return shape ?? 'Unknown'
 }

From 37dcfbed1e8ecd70367a9f648b1166dc8977db43 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jonathan=20M=C3=BCller-Grud?= <jonatsm@stud.ntnu.no>
Date: Mon, 12 Oct 2026 12:17:30 +0200
Subject: [PATCH 2/6] Feat: Add GraphQL query for paginated sightings

Query one page of sightings with search, sort and cursor variables,
including totalCount and pageInfo for the result count and "load
more". Types so useQuery knows the shape of data and variables.

Refs #34
---
 frontend/src/graphql/queries.ts | 58 +++++++++++++++++++++++++++++++++
 1 file changed, 58 insertions(+)

diff --git a/frontend/src/graphql/queries.ts b/frontend/src/graphql/queries.ts
index 535504b..74b4121 100644
--- a/frontend/src/graphql/queries.ts
+++ b/frontend/src/graphql/queries.ts
@@ -1,4 +1,5 @@
 import { gql, type TypedDocumentNode } from '@apollo/client'
+import type { SightingSortEnum, UfoSighting } from '../types/ufo-sighting'
 
 interface HealthQueryData {
   health: string
@@ -13,3 +14,60 @@ export const HEALTH_QUERY: TypedDocumentNode<HealthQueryData> = gql`
     health
   }
 `
+
+export interface SightingsQueryData {
+  sightings: {
+    edges: { cursor: string; node: UfoSighting }[]
+    pageInfo: { hasNextPage: boolean; endCursor: string | null }
+    totalCount: number
+  }
+}
+
+export interface SightingsQueryVariables {
+  search?: string
+  sort?: SightingSortEnum
+  first?: number
+  /** The `endCursor` of the previous page, to fetch the next one. */
+  after?: string | null
+}
+
+/**
+ * One page of sightings matching the search, sorted on the server.
+ * `totalCount` covers all pages, so the UI can show the number of matches
+ * while only downloading the sightings it displays.
+ */
+export const SIGHTINGS_QUERY: TypedDocumentNode<
+  SightingsQueryData,
+  SightingsQueryVariables
+> = gql`
+  query Sightings(
+    $search: String
+    $sort: SightingSort
+    $first: Int
+    $after: String
+  ) {
+    sightings(search: $search, sort: $sort, first: $first, after: $after) {
+      edges {
+        cursor
+        node {
+          id
+          datetime
+          city
+          state
+          country
+          shape
+          durationSeconds
+          comments
+          datePosted
+          latitude
+          longitude
+        }
+      }
+      pageInfo {
+        hasNextPage
+        endCursor
+      }
+      totalCount
+    }
+  }
+`

From ec3704486df4a019e74069afceec6efb0dc096a8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jonathan=20M=C3=BCller-Grud?= <jonatsm@stud.ntnu.no>
Date: Mon, 12 Oct 2026 12:21:30 +0200
Subject: [PATCH 3/6] Feat: Fetch search results from the backend

Replace the in-browswer filtering in useSightingSearch with the
sightings query, so search and sort run on the whole dataset in
the database. Keep the debounce and URL state, and trim the search
so trailing spaces do not send new requests. Tests now check which
requests the page sends instead of how mock data is sorted.

Refs #34
---
 frontend/src/hooks/use-sighting-search.ts |  41 ++++--
 frontend/src/tests/SearchPage.test.tsx    | 155 ++++++++++++----------
 2 files changed, 119 insertions(+), 77 deletions(-)

diff --git a/frontend/src/hooks/use-sighting-search.ts b/frontend/src/hooks/use-sighting-search.ts
index 75fb3f6..237af9a 100644
--- a/frontend/src/hooks/use-sighting-search.ts
+++ b/frontend/src/hooks/use-sighting-search.ts
@@ -1,23 +1,25 @@
+import { useQuery } from '@apollo/client/react'
 import { useMemo } from 'react'
 import { useSearchParams } from 'react-router'
+import { SIGHTINGS_QUERY } from '../graphql/queries'
 import {
   isSightingSortOption,
+  sightingSortEnum,
   type SightingSortOption,
 } from '../types/ufo-sighting'
-import { searchSightings } from '../utils/filter-sightings'
 import { useDebouncedValue } from './use-debounced-value'
-import { useSightings } from './use-sightings'
 
 const SEARCH_DEBOUNCE_MS = 300
 const DEFAULT_SORT: SightingSortOption = 'date-desc'
+const PAGE_SIZE = 20
 
 /**
- * Owns the search query and sort order and derives the matching sightings.
- * Both live in the URL (?q=...&sort=...) so they survive navigating to a
- * detail page and back, a page refresh, and can be shared as a link.
+ * Owns the search query and sort order and fetches the matching sightings
+ * from the backend, which searches and sorts the whole dataset. Both live
+ * in the URL (?q=...&sort=...) so they survive navigating to a detail page
+ * and back, a page refresh, and can be shared as a link.
  */
 export function useSightingSearch() {
-  const sightings = useSightings()
   const [searchParams, setSearchParams] = useSearchParams()
 
   const query = searchParams.get('q') ?? ''
@@ -41,12 +43,31 @@ export function useSightingSearch() {
   const setSort = (nextSort: SightingSortOption) =>
     updateParam('sort', nextSort, DEFAULT_SORT)
 
-  const debouncedQuery = useDebouncedValue(query, SEARCH_DEBOUNCE_MS)
+  // Trimmed before debouncing so "oslo" and "oslo " share one request and
+  // one cache entry. Sort changes are deliberate clicks, so they apply now.
+  const debouncedQuery = useDebouncedValue(query.trim(), SEARCH_DEBOUNCE_MS)
+
+  const { data, loading, error } = useQuery(SIGHTINGS_QUERY, {
+    variables: {
+      search: debouncedQuery || undefined,
+      sort: sightingSortEnum[sort],
+      first: PAGE_SIZE,
+    },
+  })
 
   const results = useMemo(
-    () => searchSightings(sightings, debouncedQuery, sort),
-    [debouncedQuery, sightings, sort],
+    () => data?.sightings.edges.map((edge) => edge.node) ?? [],
+    [data],
   )
 
-  return { query, setQuery, sort, setSort, results }
+  return {
+    query,
+    setQuery,
+    sort,
+    setSort,
+    results,
+    totalCount: data?.sightings.totalCount ?? 0,
+    loading,
+    error,
+  }
 }
diff --git a/frontend/src/tests/SearchPage.test.tsx b/frontend/src/tests/SearchPage.test.tsx
index 6d7799c..6f1cff1 100644
--- a/frontend/src/tests/SearchPage.test.tsx
+++ b/frontend/src/tests/SearchPage.test.tsx
@@ -1,97 +1,118 @@
-import { act, fireEvent, render, screen } from '@testing-library/react'
+import { ApolloClient, ApolloLink, InMemoryCache } from '@apollo/client'
+import { ApolloProvider } from '@apollo/client/react'
+import { fireEvent, render, screen, waitFor } from '@testing-library/react'
 import { MemoryRouter } from 'react-router'
-import { afterEach, describe, expect, it, vi } from 'vitest'
+import { of } from 'rxjs'
+import { describe, expect, it, vi } from 'vitest'
+import { mockSightings } from '../data/mock-sightings'
+import type { SightingsQueryVariables } from '../graphql/queries'
 import SearchPage from '../pages/SearchPage'
 
 vi.mock('../components/SightingMap', () => ({
   default: () => <div data-testid="sighting-map" />,
 }))
 
+/**
+ * Renders the page with a fake backend that records the variables of every
+ * request, so the tests can check what is sent and how often. The search
+ * and sorting themselves happen in the database, so they are not tested
+ * here.
+ */
 function renderSearchPage(initialEntry = '/') {
-  return render(
-    <MemoryRouter initialEntries={[initialEntry]}>
-      <SearchPage />
-    </MemoryRouter>,
+  const requests: SightingsQueryVariables[] = []
+  const link = new ApolloLink((operation) => {
+    requests.push(operation.variables)
+    const search = (operation.variables.search ?? '').toLowerCase()
+    const matches = mockSightings.filter(
+      (sighting) => !search || sighting.city?.toLowerCase().includes(search),
+    )
+    return of({
+      data: {
+        sightings: {
+          __typename: 'SightingConnection',
+          edges: matches.map((node) => ({
+            __typename: 'SightingEdge',
+            cursor: node.id,
+            node: { __typename: 'Sighting', ...node },
+          })),
+          pageInfo: {
+            __typename: 'PageInfo',
+            hasNextPage: false,
+            endCursor: null,
+          },
+          totalCount: matches.length,
+        },
+      },
+    })
+  })
+  const client = new ApolloClient({ link, cache: new InMemoryCache() })
+
+  render(
+    <ApolloProvider client={client}>
+      <MemoryRouter initialEntries={[initialEntry]}>
+        <SearchPage />
+      </MemoryRouter>
+    </ApolloProvider>,
   )
+  return requests
 }
 
-describe('SearchPage', () => {
-  afterEach(() => {
-    vi.useRealTimers()
-  })
-
-  it('loads a query from the URL and filters after the debounce delay', () => {
-    vi.useFakeTimers()
-    renderSearchPage('/?q=Oslo')
+const DEBOUNCE_MS = 300
 
-    expect(screen.getByRole('searchbox')).toHaveValue('Oslo')
-    expect(screen.getByText('1 result')).toBeInTheDocument()
-
-    act(() => vi.advanceTimersByTime(300))
-
-    expect(screen.getByText('1 result')).toBeInTheDocument()
-    expect(screen.getByRole('link', { name: 'Oslo, NO' })).toBeInTheDocument()
-  })
-
-  it('updates displayed results when the search and sort controls change', () => {
-    vi.useFakeTimers()
-    renderSearchPage()
-
-    expect(screen.getByRole('combobox', { name: 'Sort by' })).toHaveValue(
-      'date-desc',
-    )
-    expect(screen.getAllByRole('link')[0]).toHaveTextContent('Bergen, NO')
-
-    fireEvent.change(screen.getByRole('searchbox'), {
-      target: { value: 'Phoenix' },
-    })
-    act(() => vi.advanceTimersByTime(300))
+describe('SearchPage', () => {
+  it('requests the search from the URL with the API sort name', async () => {
+    const requests = renderSearchPage('/?q=oslo')
 
+    expect(screen.getByRole('searchbox')).toHaveValue('oslo')
     expect(
-      screen.getByRole('link', { name: 'Phoenix, AZ, US' }),
+      await screen.findByRole('link', { name: 'Oslo, NO' }),
     ).toBeInTheDocument()
-    expect(screen.getByText('1 result')).toBeInTheDocument()
+    expect(requests).toEqual([{ search: 'oslo', sort: 'DATE_DESC', first: 20 }])
+  })
 
-    fireEvent.change(screen.getByRole('searchbox'), { target: { value: '' } })
-    act(() => vi.advanceTimersByTime(300))
-    fireEvent.change(screen.getByRole('combobox', { name: 'Sort by' }), {
-      target: { value: 'city-asc' },
+  it('sends one request after typing stops, not one per keystroke', async () => {
+    const requests = renderSearchPage()
+    await waitFor(() => expect(requests).toHaveLength(1))
+
+    const searchbox = screen.getByRole('searchbox')
+    for (const value of ['p', 'ph', 'pho', 'phoenix']) {
+      fireEvent.change(searchbox, { target: { value } })
+    }
+
+    await waitFor(() => expect(requests).toHaveLength(2))
+    // Wait out another debounce period to prove no later request follows.
+    await new Promise((resolve) => setTimeout(resolve, DEBOUNCE_MS + 100))
+
+    expect(requests).toHaveLength(2)
+    expect(screen.getAllByRole('link')).toHaveLength(1)
+    expect(requests[1]).toEqual({
+      search: 'phoenix',
+      sort: 'DATE_DESC',
+      first: 20,
     })
-
-    const locations = screen
-      .getAllByRole('link')
-      .map((link) => link.textContent)
-    expect(locations[0]).toBe('Bergen, NO')
-    expect(locations[1]).toBe('Edna, TX, US')
   })
 
-  it('sorts results oldest first', () => {
-    vi.useFakeTimers()
-    renderSearchPage()
+  it('does not send a new request for trailing whitespace', async () => {
+    const requests = renderSearchPage('/?q=oslo')
+    await waitFor(() => expect(requests).toHaveLength(1))
 
-    fireEvent.change(screen.getByRole('combobox', { name: 'Sort by' }), {
-      target: { value: 'date-asc' },
+    fireEvent.change(screen.getByRole('searchbox'), {
+      target: { value: 'oslo ' },
     })
+    await new Promise((resolve) => setTimeout(resolve, DEBOUNCE_MS + 100))
 
-    const locations = screen
-      .getAllByRole('link')
-      .map((link) => link.textContent)
-    expect(locations[0]).toBe('Phoenix, AZ, US')
-    expect(locations[1]).toBe('San Marcos, TX, US')
+    expect(requests).toHaveLength(1)
   })
 
-  it('sorts results newest first', () => {
-    vi.useFakeTimers()
-    renderSearchPage()
+  it('sends the API sort name when the sort changes', async () => {
+    const requests = renderSearchPage()
+    await waitFor(() => expect(requests).toHaveLength(1))
 
     fireEvent.change(screen.getByRole('combobox', { name: 'Sort by' }), {
-      target: { value: 'date-desc' },
+      target: { value: 'city-asc' },
     })
 
-    const locations = screen
-      .getAllByRole('link')
-      .map((link) => link.textContent)
-    expect(locations[0]).toBe('Bergen, NO')
-    expect(locations[1]).toBe('Tromsø, NO')
+    await waitFor(() => expect(requests).toHaveLength(2))
+    expect(requests[1]).toEqual({ sort: 'CITY_ASC', first: 20 })
   })
 })

From 1fafb445e5aff91aff215e29e3af1ba5ba2076ab Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jonathan=20M=C3=BCller-Grud?= <jonatsm@stud.ntnu.no>
Date: Mon, 12 Oct 2026 12:25:15 +0200
Subject: [PATCH 4/6] Feat: Add loading, empty and error states to list

Show a loading message before the first results, keep previous
results visible but dimmed while a new search loads, and show an
error with a retry button if the backend fails.

Refs #34
---
 frontend/src/components/SightingList.css  |  22 ++++-
 frontend/src/components/SightingList.tsx  |  44 +++++++--
 frontend/src/hooks/use-sighting-search.ts |  32 +++++--
 frontend/src/pages/SearchPage.tsx         |  20 ++++-
 frontend/src/tests/SearchPage.test.tsx    |  26 +++++-
 frontend/src/tests/SightingList.test.tsx  | 105 ++++++++++++++++------
 6 files changed, 198 insertions(+), 51 deletions(-)

diff --git a/frontend/src/components/SightingList.css b/frontend/src/components/SightingList.css
index a5d59c1..b2f06c8 100644
--- a/frontend/src/components/SightingList.css
+++ b/frontend/src/components/SightingList.css
@@ -26,6 +26,10 @@
   list-style: none;
   margin: 0;
   padding: 0;
+
+  &[aria-busy='true'] {
+    opacity: 0.6;
+  }
 }
 
 .sighting-list__item {
@@ -116,11 +120,27 @@
   max-width: 76ch;
 }
 
-.sighting-results__empty {
+.sighting-results__message {
   border-bottom: 1px solid var(--border);
   padding: 32px 0;
 }
 
+.sighting-results__retry {
+  margin-top: 16px;
+  border: 0;
+  border-radius: 4px;
+  padding: 11px 18px;
+  color: var(--text-h);
+  background: var(--border);
+  font: inherit;
+  cursor: pointer;
+
+  &:focus-visible {
+    outline: 3px solid var(--accent-border);
+    outline-offset: 2px;
+  }
+}
+
 @media (max-width: 640px) {
   .sighting-results {
     margin-top: 32px;
diff --git a/frontend/src/components/SightingList.tsx b/frontend/src/components/SightingList.tsx
index af8bd6d..9faf4b2 100644
--- a/frontend/src/components/SightingList.tsx
+++ b/frontend/src/components/SightingList.tsx
@@ -11,27 +11,57 @@ import './SightingList.css'
 
 interface SightingListProps {
   sightings: UfoSighting[]
+  /** Matches across all pages, not just the sightings shown. */
+  totalCount: number
+  loading: boolean
+  error: boolean
+  onRetry: () => void
 }
 
-function SightingList({ sightings }: SightingListProps) {
+function SightingList({
+  sightings,
+  totalCount,
+  loading,
+  error,
+  onRetry,
+}: SightingListProps) {
   const location = useLocation()
+  // Nothing to show yet, as opposed to refreshing results already shown.
+  const initialLoad = loading && sightings.length === 0
+
+  let summary = `${totalCount.toLocaleString('en')} ${totalCount === 1 ? 'result' : 'results'}`
+  if (error) summary = ''
+  else if (initialLoad) summary = 'Loading…'
 
   return (
     <section className="sighting-results" aria-labelledby="results-heading">
       <div className="sighting-results__header">
         <h1 id="results-heading">Sightings</h1>
-        <p aria-live="polite">
-          {sightings.length} {sightings.length === 1 ? 'result' : 'results'}
-        </p>
+        <p aria-live="polite">{summary}</p>
       </div>
 
-      {sightings.length === 0 ? (
-        <p className="sighting-results__empty">
+      {error ? (
+        <div className="sighting-results__message" role="alert">
+          <p>Could not load sightings. Check your connection and try again.</p>
+          <button
+            type="button"
+            className="sighting-results__retry"
+            onClick={onRetry}
+          >
+            Try again
+          </button>
+        </div>
+      ) : initialLoad ? (
+        <p className="sighting-results__message">Loading sightings…</p>
+      ) : sightings.length === 0 ? (
+        <p className="sighting-results__message">
           No sightings match your search. Try another city, shape or
           description.
         </p>
       ) : (
-        <ul className="sighting-list">
+        // aria-busy tells screen readers the list is about to change, and
+        // dims it visually while a new search loads.
+        <ul className="sighting-list" aria-busy={loading}>
           {sightings.map((sighting) => (
             <li className="sighting-list__item" key={sighting.id}>
               <SightingMap sighting={sighting} />
diff --git a/frontend/src/hooks/use-sighting-search.ts b/frontend/src/hooks/use-sighting-search.ts
index 237af9a..3ce2494 100644
--- a/frontend/src/hooks/use-sighting-search.ts
+++ b/frontend/src/hooks/use-sighting-search.ts
@@ -47,27 +47,41 @@ export function useSightingSearch() {
   // one cache entry. Sort changes are deliberate clicks, so they apply now.
   const debouncedQuery = useDebouncedValue(query.trim(), SEARCH_DEBOUNCE_MS)
 
-  const { data, loading, error } = useQuery(SIGHTINGS_QUERY, {
-    variables: {
-      search: debouncedQuery || undefined,
-      sort: sightingSortEnum[sort],
-      first: PAGE_SIZE,
+  const { data, previousData, loading, error, refetch } = useQuery(
+    SIGHTINGS_QUERY,
+    {
+      variables: {
+        search: debouncedQuery || undefined,
+        sort: sightingSortEnum[sort],
+        first: PAGE_SIZE,
+      },
     },
-  })
+  )
+
+  // While a new search loads, keep showing the previous results instead of
+  // emptying the list, so the page doesn't flicker on every search.
+  const shownData = data ?? previousData
 
   const results = useMemo(
-    () => data?.sightings.edges.map((edge) => edge.node) ?? [],
-    [data],
+    () => shownData?.sightings.edges.map((edge) => edge.node) ?? [],
+    [shownData],
   )
 
+  // A failed refetch is shown through `error`, so the rejected promise
+  // needs no handling of its own.
+  const retry = () => {
+    refetch().catch(() => {})
+  }
+
   return {
     query,
     setQuery,
     sort,
     setSort,
     results,
-    totalCount: data?.sightings.totalCount ?? 0,
+    totalCount: shownData?.sightings.totalCount ?? 0,
     loading,
     error,
+    retry,
   }
 }
diff --git a/frontend/src/pages/SearchPage.tsx b/frontend/src/pages/SearchPage.tsx
index 450ca9a..208f0d5 100644
--- a/frontend/src/pages/SearchPage.tsx
+++ b/frontend/src/pages/SearchPage.tsx
@@ -3,7 +3,17 @@ import SightingList from '../components/SightingList'
 import { useSightingSearch } from '../hooks/use-sighting-search'
 
 function SearchPage() {
-  const { query, setQuery, sort, setSort, results } = useSightingSearch()
+  const {
+    query,
+    setQuery,
+    sort,
+    setSort,
+    results,
+    totalCount,
+    loading,
+    error,
+    retry,
+  } = useSightingSearch()
 
   return (
     <>
@@ -13,7 +23,13 @@ function SearchPage() {
         sort={sort}
         onSortChange={setSort}
       />
-      <SightingList sightings={results} />
+      <SightingList
+        sightings={results}
+        totalCount={totalCount}
+        loading={loading}
+        error={Boolean(error)}
+        onRetry={retry}
+      />
     </>
   )
 }
diff --git a/frontend/src/tests/SearchPage.test.tsx b/frontend/src/tests/SearchPage.test.tsx
index 6f1cff1..8ebc804 100644
--- a/frontend/src/tests/SearchPage.test.tsx
+++ b/frontend/src/tests/SearchPage.test.tsx
@@ -2,7 +2,7 @@ import { ApolloClient, ApolloLink, InMemoryCache } from '@apollo/client'
 import { ApolloProvider } from '@apollo/client/react'
 import { fireEvent, render, screen, waitFor } from '@testing-library/react'
 import { MemoryRouter } from 'react-router'
-import { of } from 'rxjs'
+import { of, throwError } from 'rxjs'
 import { describe, expect, it, vi } from 'vitest'
 import { mockSightings } from '../data/mock-sightings'
 import type { SightingsQueryVariables } from '../graphql/queries'
@@ -16,12 +16,16 @@ vi.mock('../components/SightingMap', () => ({
  * Renders the page with a fake backend that records the variables of every
  * request, so the tests can check what is sent and how often. The search
  * and sorting themselves happen in the database, so they are not tested
- * here.
+ * here. With `failFirst`, the first request fails like an unreachable
+ * backend would.
  */
-function renderSearchPage(initialEntry = '/') {
+function renderSearchPage(initialEntry = '/', { failFirst = false } = {}) {
   const requests: SightingsQueryVariables[] = []
   const link = new ApolloLink((operation) => {
     requests.push(operation.variables)
+    if (failFirst && requests.length === 1) {
+      return throwError(() => new Error('Network error'))
+    }
     const search = (operation.variables.search ?? '').toLowerCase()
     const matches = mockSightings.filter(
       (sighting) => !search || sighting.city?.toLowerCase().includes(search),
@@ -115,4 +119,20 @@ describe('SearchPage', () => {
     await waitFor(() => expect(requests).toHaveLength(2))
     expect(requests[1]).toEqual({ sort: 'CITY_ASC', first: 20 })
   })
+
+  it('shows an error when the backend fails and loads again on retry', async () => {
+    const requests = renderSearchPage('/?q=oslo', { failFirst: true })
+
+    expect(await screen.findByRole('alert')).toHaveTextContent(
+      'Could not load sightings',
+    )
+
+    fireEvent.click(screen.getByRole('button', { name: 'Try again' }))
+
+    expect(
+      await screen.findByRole('link', { name: 'Oslo, NO' }),
+    ).toBeInTheDocument()
+    expect(screen.queryByRole('alert')).not.toBeInTheDocument()
+    expect(requests).toHaveLength(2)
+  })
 })
diff --git a/frontend/src/tests/SightingList.test.tsx b/frontend/src/tests/SightingList.test.tsx
index 59d54ec..6bbb7f0 100644
--- a/frontend/src/tests/SightingList.test.tsx
+++ b/frontend/src/tests/SightingList.test.tsx
@@ -1,4 +1,5 @@
-import { render, screen } from '@testing-library/react'
+import { fireEvent, render, screen } from '@testing-library/react'
+import type { ComponentProps } from 'react'
 import { MemoryRouter } from 'react-router'
 import { describe, expect, it, vi } from 'vitest'
 import SightingList from '../components/SightingList'
@@ -8,13 +9,30 @@ vi.mock('../components/SightingMap', () => ({
   default: () => <div data-testid="sighting-map" />,
 }))
 
+type Props = ComponentProps<typeof SightingList>
+
+// Defaults to loaded results, so each test only states what it changes.
+function renderList(props: Partial<Props> = {}) {
+  const sightings = props.sightings ?? [mockSightings[0]]
+  const onRetry = vi.fn()
+  render(
+    <MemoryRouter initialEntries={['/?q=Texas']}>
+      <SightingList
+        sightings={sightings}
+        totalCount={sightings.length}
+        loading={false}
+        error={false}
+        onRetry={onRetry}
+        {...props}
+      />
+    </MemoryRouter>,
+  )
+  return { onRetry }
+}
+
 describe('SightingList', () => {
   it('renders sightings, formatted fields, and detail links', () => {
-    render(
-      <MemoryRouter initialEntries={['/?q=Texas']}>
-        <SightingList sightings={[mockSightings[0]]} />
-      </MemoryRouter>,
-    )
+    renderList()
 
     expect(screen.getByText('1 result')).toBeInTheDocument()
     expect(
@@ -28,25 +46,27 @@ describe('SightingList', () => {
     expect(screen.getByTestId('sighting-map')).toBeInTheDocument()
   })
 
+  it('shows the total number of matches, not just the ones loaded', () => {
+    renderList({ totalCount: 80328 })
+
+    expect(screen.getByText('80,328 results')).toBeInTheDocument()
+  })
+
   it('shows fallbacks for fields the API returns as null', () => {
-    render(
-      <MemoryRouter>
-        <SightingList
-          sightings={[
-            {
-              ...mockSightings[0],
-              datetime: null,
-              city: null,
-              state: null,
-              country: null,
-              shape: null,
-              durationSeconds: null,
-              comments: null,
-            },
-          ]}
-        />
-      </MemoryRouter>,
-    )
+    renderList({
+      sightings: [
+        {
+          ...mockSightings[0],
+          datetime: null,
+          city: null,
+          state: null,
+          country: null,
+          shape: null,
+          durationSeconds: null,
+          comments: null,
+        },
+      ],
+    })
 
     expect(
       screen.getByRole('link', { name: 'Unknown location' }),
@@ -56,15 +76,42 @@ describe('SightingList', () => {
   })
 
   it('uses plural result text and explains when no sightings match', () => {
-    render(
-      <MemoryRouter>
-        <SightingList sightings={[]} />
-      </MemoryRouter>,
-    )
+    renderList({ sightings: [] })
 
     expect(screen.getByText('0 results')).toBeInTheDocument()
     expect(
       screen.getByText(/No sightings match your search/),
     ).toBeInTheDocument()
   })
+
+  it('shows a loading message before the first results arrive', () => {
+    renderList({ sightings: [], loading: true })
+
+    expect(screen.getByText('Loading…')).toBeInTheDocument()
+    expect(screen.getByText('Loading sightings…')).toBeInTheDocument()
+    expect(
+      screen.queryByText(/No sightings match your search/),
+    ).not.toBeInTheDocument()
+  })
+
+  it('keeps the previous results visible but busy while a new search loads', () => {
+    renderList({ loading: true })
+
+    expect(screen.getByRole('list')).toHaveAttribute('aria-busy', 'true')
+    expect(
+      screen.getByRole('link', { name: 'San Marcos, TX, US' }),
+    ).toBeInTheDocument()
+  })
+
+  it('shows an error with a retry button instead of the results', () => {
+    const { onRetry } = renderList({ error: true })
+
+    expect(screen.getByRole('alert')).toHaveTextContent(
+      'Could not load sightings',
+    )
+    expect(screen.queryByRole('list')).not.toBeInTheDocument()
+
+    fireEvent.click(screen.getByRole('button', { name: 'Try again' }))
+    expect(onRetry).toHaveBeenCalledOnce()
+  })
 })

From 583ade179a1afe0c3bcb2bc77ff241ffa5d73664 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jonathan=20M=C3=BCller-Grud?= <jonatsm@stud.ntnu.no>
Date: Mon, 12 Oct 2026 12:30:15 +0200
Subject: [PATCH 5/6] Feat: Add "load more" pagination to search results

Fetch the next page with the end cursor and append it in the Apollo
cache, keyed by search, filter and sort so each search keept its own
list. Show "showing X of Y" progress, keep focus on the button
while loading, and offer a retry if a page fails.

Refs #34
---
 frontend/src/components/SightingList.css  |  13 ++-
 frontend/src/components/SightingList.tsx  |  39 +++++++-
 frontend/src/graphql/client.ts            |  36 +++++++-
 frontend/src/hooks/use-sighting-search.ts |  52 ++++++++---
 frontend/src/pages/SearchPage.tsx         |   8 ++
 frontend/src/tests/SearchPage.test.tsx    | 105 ++++++++++++++++++----
 frontend/src/tests/SightingList.test.tsx  |  46 +++++++++-
 7 files changed, 265 insertions(+), 34 deletions(-)

diff --git a/frontend/src/components/SightingList.css b/frontend/src/components/SightingList.css
index b2f06c8..77aa3de 100644
--- a/frontend/src/components/SightingList.css
+++ b/frontend/src/components/SightingList.css
@@ -125,7 +125,14 @@
   padding: 32px 0;
 }
 
-.sighting-results__retry {
+.sighting-results__more {
+  display: grid;
+  justify-items: center;
+  gap: 12px;
+  padding: 32px 0;
+}
+
+.sighting-results__button {
   margin-top: 16px;
   border: 0;
   border-radius: 4px;
@@ -139,6 +146,10 @@
     outline: 3px solid var(--accent-border);
     outline-offset: 2px;
   }
+
+  &[aria-disabled='true'] {
+    cursor: progress;
+  }
 }
 
 @media (max-width: 640px) {
diff --git a/frontend/src/components/SightingList.tsx b/frontend/src/components/SightingList.tsx
index 9faf4b2..6ecd891 100644
--- a/frontend/src/components/SightingList.tsx
+++ b/frontend/src/components/SightingList.tsx
@@ -16,6 +16,10 @@ interface SightingListProps {
   loading: boolean
   error: boolean
   onRetry: () => void
+  hasNextPage: boolean
+  loadingMore: boolean
+  loadMoreFailed: boolean
+  onLoadMore: () => void
 }
 
 function SightingList({
@@ -24,12 +28,22 @@ function SightingList({
   loading,
   error,
   onRetry,
+  hasNextPage,
+  loadingMore,
+  loadMoreFailed,
+  onLoadMore,
 }: SightingListProps) {
   const location = useLocation()
   // Nothing to show yet, as opposed to refreshing results already shown.
   const initialLoad = loading && sightings.length === 0
 
-  let summary = `${totalCount.toLocaleString('en')} ${totalCount === 1 ? 'result' : 'results'}`
+  const total = `${totalCount.toLocaleString('en')} ${totalCount === 1 ? 'result' : 'results'}`
+  // One live region for both the count and paging progress, so screen
+  // readers hear "Showing 40 of …" after "load more" and nothing twice.
+  let summary =
+    sightings.length < totalCount
+      ? `Showing ${sightings.length.toLocaleString('en')} of ${total}`
+      : total
   if (error) summary = ''
   else if (initialLoad) summary = 'Loading…'
 
@@ -45,7 +59,7 @@ function SightingList({
           <p>Could not load sightings. Check your connection and try again.</p>
           <button
             type="button"
-            className="sighting-results__retry"
+            className="sighting-results__button"
             onClick={onRetry}
           >
             Try again
@@ -97,6 +111,27 @@ function SightingList({
           ))}
         </ul>
       )}
+
+      {!error && hasNextPage && (
+        <div className="sighting-results__more">
+          {loadMoreFailed && <p role="alert">Could not load more sightings.</p>}
+          {/* aria-disabled rather than disabled, so keyboard focus stays on
+              the button while the next page loads. The hook ignores clicks
+              in the meantime. */}
+          <button
+            type="button"
+            className="sighting-results__button"
+            aria-disabled={loadingMore}
+            onClick={onLoadMore}
+          >
+            {loadingMore
+              ? 'Loading…'
+              : loadMoreFailed
+                ? 'Try again'
+                : 'Load more'}
+          </button>
+        </div>
+      )}
     </section>
   )
 }
diff --git a/frontend/src/graphql/client.ts b/frontend/src/graphql/client.ts
index 83108ae..280100e 100644
--- a/frontend/src/graphql/client.ts
+++ b/frontend/src/graphql/client.ts
@@ -1,4 +1,7 @@
 import { ApolloClient, HttpLink, InMemoryCache } from '@apollo/client'
+import type { SightingsQueryData } from './queries'
+
+type SightingConnection = SightingsQueryData['sightings']
 
 // BASE_URL is Vite's `base` ("/project2"), so the default is a same-origin
 // path that the Vite dev proxy and Apache on the VM both forward to the
@@ -6,7 +9,38 @@ import { ApolloClient, HttpLink, InMemoryCache } from '@apollo/client'
 const baseUrl = import.meta.env.BASE_URL.replace(/\/$/, '')
 const graphqlUrl = import.meta.env.VITE_GRAPHQL_URL ?? `${baseUrl}/graphql`
 
+/** Exported so tests use the same pagination rules as the app. */
+export function createCache() {
+  return new InMemoryCache({
+    typePolicies: {
+      Query: {
+        fields: {
+          sightings: {
+            // One cached list per search, filter and sort. `first` and
+            // `after` only pick a page within that list, so they are left
+            // out of the key and every page lands in the same entry.
+            keyArgs: ['search', 'filter', 'sort'],
+            // "Load more" passes `after` and appends its page to what is
+            // already loaded. Without `after` it is a fresh first page.
+            merge(
+              existing: SightingConnection | undefined,
+              incoming: SightingConnection,
+              { args },
+            ) {
+              if (!existing || !args?.after) return incoming
+              return {
+                ...incoming,
+                edges: [...existing.edges, ...incoming.edges],
+              }
+            },
+          },
+        },
+      },
+    },
+  })
+}
+
 export const apolloClient = new ApolloClient({
   link: new HttpLink({ uri: graphqlUrl }),
-  cache: new InMemoryCache(),
+  cache: createCache(),
 })
diff --git a/frontend/src/hooks/use-sighting-search.ts b/frontend/src/hooks/use-sighting-search.ts
index 3ce2494..e55a62d 100644
--- a/frontend/src/hooks/use-sighting-search.ts
+++ b/frontend/src/hooks/use-sighting-search.ts
@@ -1,5 +1,6 @@
+import { NetworkStatus } from '@apollo/client'
 import { useQuery } from '@apollo/client/react'
-import { useMemo } from 'react'
+import { useMemo, useState } from 'react'
 import { useSearchParams } from 'react-router'
 import { SIGHTINGS_QUERY } from '../graphql/queries'
 import {
@@ -47,16 +48,21 @@ export function useSightingSearch() {
   // one cache entry. Sort changes are deliberate clicks, so they apply now.
   const debouncedQuery = useDebouncedValue(query.trim(), SEARCH_DEBOUNCE_MS)
 
-  const { data, previousData, loading, error, refetch } = useQuery(
-    SIGHTINGS_QUERY,
-    {
-      variables: {
-        search: debouncedQuery || undefined,
-        sort: sightingSortEnum[sort],
-        first: PAGE_SIZE,
-      },
+  const {
+    data,
+    previousData,
+    loading,
+    error,
+    refetch,
+    fetchMore,
+    networkStatus,
+  } = useQuery(SIGHTINGS_QUERY, {
+    variables: {
+      search: debouncedQuery || undefined,
+      sort: sightingSortEnum[sort],
+      first: PAGE_SIZE,
     },
-  )
+  })
 
   // While a new search loads, keep showing the previous results instead of
   // emptying the list, so the page doesn't flicker on every search.
@@ -73,6 +79,25 @@ export function useSightingSearch() {
     refetch().catch(() => {})
   }
 
+  // `loading` is also true while "load more" runs. Telling the two apart
+  // keeps the list from dimming when only a page is being added.
+  const loadingMore = networkStatus === NetworkStatus.fetchMore
+
+  // Paging uses `data`, not `previousData`, so a click while a new search
+  // loads can't fetch page 2 of the old search.
+  const pageInfo = data?.sightings.pageInfo
+
+  // Remembers which page failed to load. Comparing it with the current
+  // end cursor hides the message once the search changes or a retry works.
+  const [failedCursor, setFailedCursor] = useState<string | null>(null)
+
+  const loadMore = () => {
+    const after = pageInfo?.endCursor
+    if (!after || loadingMore) return
+    setFailedCursor(null)
+    fetchMore({ variables: { after } }).catch(() => setFailedCursor(after))
+  }
+
   return {
     query,
     setQuery,
@@ -80,8 +105,13 @@ export function useSightingSearch() {
     setSort,
     results,
     totalCount: shownData?.sightings.totalCount ?? 0,
-    loading,
+    loading: loading && !loadingMore,
     error,
     retry,
+    hasNextPage: pageInfo?.hasNextPage ?? false,
+    loadMore,
+    loadingMore,
+    loadMoreFailed:
+      failedCursor !== null && failedCursor === pageInfo?.endCursor,
   }
 }
diff --git a/frontend/src/pages/SearchPage.tsx b/frontend/src/pages/SearchPage.tsx
index 208f0d5..4b1ae49 100644
--- a/frontend/src/pages/SearchPage.tsx
+++ b/frontend/src/pages/SearchPage.tsx
@@ -13,6 +13,10 @@ function SearchPage() {
     loading,
     error,
     retry,
+    hasNextPage,
+    loadMore,
+    loadingMore,
+    loadMoreFailed,
   } = useSightingSearch()
 
   return (
@@ -29,6 +33,10 @@ function SearchPage() {
         loading={loading}
         error={Boolean(error)}
         onRetry={retry}
+        hasNextPage={hasNextPage}
+        loadingMore={loadingMore}
+        loadMoreFailed={loadMoreFailed}
+        onLoadMore={loadMore}
       />
     </>
   )
diff --git a/frontend/src/tests/SearchPage.test.tsx b/frontend/src/tests/SearchPage.test.tsx
index 8ebc804..9d32c26 100644
--- a/frontend/src/tests/SearchPage.test.tsx
+++ b/frontend/src/tests/SearchPage.test.tsx
@@ -1,10 +1,11 @@
-import { ApolloClient, ApolloLink, InMemoryCache } from '@apollo/client'
+import { ApolloClient, ApolloLink } from '@apollo/client'
 import { ApolloProvider } from '@apollo/client/react'
 import { fireEvent, render, screen, waitFor } from '@testing-library/react'
 import { MemoryRouter } from 'react-router'
 import { of, throwError } from 'rxjs'
 import { describe, expect, it, vi } from 'vitest'
 import { mockSightings } from '../data/mock-sightings'
+import { createCache } from '../graphql/client'
 import type { SightingsQueryVariables } from '../graphql/queries'
 import SearchPage from '../pages/SearchPage'
 
@@ -16,40 +17,53 @@ vi.mock('../components/SightingMap', () => ({
  * Renders the page with a fake backend that records the variables of every
  * request, so the tests can check what is sent and how often. The search
  * and sorting themselves happen in the database, so they are not tested
- * here. With `failFirst`, the first request fails like an unreachable
- * backend would.
+ * here.
+ *
+ * Like the real backend, the cursor is the offset of the next row. Pages
+ * hold 5 sightings regardless of `first`, so the 12 mock sightings span
+ * three pages. `failRequest` makes that request (1 = the first) fail like
+ * an unreachable backend.
  */
-function renderSearchPage(initialEntry = '/', { failFirst = false } = {}) {
+const FAKE_PAGE_SIZE = 5
+
+function renderSearchPage(
+  initialEntry = '/',
+  { failRequest }: { failRequest?: number } = {},
+) {
   const requests: SightingsQueryVariables[] = []
   const link = new ApolloLink((operation) => {
-    requests.push(operation.variables)
-    if (failFirst && requests.length === 1) {
+    const variables: SightingsQueryVariables = operation.variables
+    requests.push(variables)
+    if (requests.length === failRequest) {
       return throwError(() => new Error('Network error'))
     }
-    const search = (operation.variables.search ?? '').toLowerCase()
+    const search = (variables.search ?? '').toLowerCase()
     const matches = mockSightings.filter(
       (sighting) => !search || sighting.city?.toLowerCase().includes(search),
     )
+    const offset = Number(variables.after ?? 0)
+    const page = matches.slice(offset, offset + FAKE_PAGE_SIZE)
+    const edges = page.map((node, i) => ({
+      __typename: 'SightingEdge',
+      cursor: String(offset + i + 1),
+      node: { __typename: 'Sighting', ...node },
+    }))
     return of({
       data: {
         sightings: {
           __typename: 'SightingConnection',
-          edges: matches.map((node) => ({
-            __typename: 'SightingEdge',
-            cursor: node.id,
-            node: { __typename: 'Sighting', ...node },
-          })),
+          edges,
           pageInfo: {
             __typename: 'PageInfo',
-            hasNextPage: false,
-            endCursor: null,
+            hasNextPage: offset + page.length < matches.length,
+            endCursor: edges.at(-1)?.cursor ?? null,
           },
           totalCount: matches.length,
         },
       },
     })
   })
-  const client = new ApolloClient({ link, cache: new InMemoryCache() })
+  const client = new ApolloClient({ link, cache: createCache() })
 
   render(
     <ApolloProvider client={client}>
@@ -121,7 +135,7 @@ describe('SearchPage', () => {
   })
 
   it('shows an error when the backend fails and loads again on retry', async () => {
-    const requests = renderSearchPage('/?q=oslo', { failFirst: true })
+    const requests = renderSearchPage('/?q=oslo', { failRequest: 1 })
 
     expect(await screen.findByRole('alert')).toHaveTextContent(
       'Could not load sightings',
@@ -135,4 +149,63 @@ describe('SearchPage', () => {
     expect(screen.queryByRole('alert')).not.toBeInTheDocument()
     expect(requests).toHaveLength(2)
   })
+
+  it('appends the next page on "load more" until the last page', async () => {
+    const requests = renderSearchPage()
+    expect(
+      await screen.findByText('Showing 5 of 12 results'),
+    ).toBeInTheDocument()
+    expect(screen.getAllByRole('link')).toHaveLength(5)
+
+    fireEvent.click(screen.getByRole('button', { name: 'Load more' }))
+    expect(
+      await screen.findByText('Showing 10 of 12 results'),
+    ).toBeInTheDocument()
+    expect(screen.getAllByRole('link')).toHaveLength(10)
+    expect(requests[1]).toEqual({ sort: 'DATE_DESC', first: 20, after: '5' })
+
+    fireEvent.click(screen.getByRole('button', { name: 'Load more' }))
+    expect(await screen.findByText('12 results')).toBeInTheDocument()
+    expect(screen.getAllByRole('link')).toHaveLength(12)
+    expect(
+      screen.queryByRole('button', { name: 'Load more' }),
+    ).not.toBeInTheDocument()
+    expect(requests).toHaveLength(3)
+  })
+
+  it('keeps loaded pages per search and starts fresh for a new one', async () => {
+    const requests = renderSearchPage()
+    await screen.findByText('Showing 5 of 12 results')
+    fireEvent.click(screen.getByRole('button', { name: 'Load more' }))
+    await screen.findByText('Showing 10 of 12 results')
+
+    const searchbox = screen.getByRole('searchbox')
+    fireEvent.change(searchbox, { target: { value: 'oslo' } })
+    expect(await screen.findByText('1 result')).toBeInTheDocument()
+    expect(screen.getAllByRole('link')).toHaveLength(1)
+
+    // Back to the empty search: both loaded pages come from the cache.
+    fireEvent.change(searchbox, { target: { value: '' } })
+    expect(
+      await screen.findByText('Showing 10 of 12 results'),
+    ).toBeInTheDocument()
+    expect(requests).toHaveLength(3)
+  })
+
+  it('keeps loaded results and offers a retry when the next page fails', async () => {
+    renderSearchPage('/', { failRequest: 2 })
+    await screen.findByText('Showing 5 of 12 results')
+
+    fireEvent.click(screen.getByRole('button', { name: 'Load more' }))
+    expect(await screen.findByRole('alert')).toHaveTextContent(
+      'Could not load more sightings',
+    )
+    expect(screen.getAllByRole('link')).toHaveLength(5)
+
+    fireEvent.click(screen.getByRole('button', { name: 'Try again' }))
+    expect(
+      await screen.findByText('Showing 10 of 12 results'),
+    ).toBeInTheDocument()
+    expect(screen.queryByRole('alert')).not.toBeInTheDocument()
+  })
 })
diff --git a/frontend/src/tests/SightingList.test.tsx b/frontend/src/tests/SightingList.test.tsx
index 6bbb7f0..dc64f9d 100644
--- a/frontend/src/tests/SightingList.test.tsx
+++ b/frontend/src/tests/SightingList.test.tsx
@@ -15,6 +15,7 @@ type Props = ComponentProps<typeof SightingList>
 function renderList(props: Partial<Props> = {}) {
   const sightings = props.sightings ?? [mockSightings[0]]
   const onRetry = vi.fn()
+  const onLoadMore = vi.fn()
   render(
     <MemoryRouter initialEntries={['/?q=Texas']}>
       <SightingList
@@ -23,11 +24,15 @@ function renderList(props: Partial<Props> = {}) {
         loading={false}
         error={false}
         onRetry={onRetry}
+        hasNextPage={false}
+        loadingMore={false}
+        loadMoreFailed={false}
+        onLoadMore={onLoadMore}
         {...props}
       />
     </MemoryRouter>,
   )
-  return { onRetry }
+  return { onRetry, onLoadMore }
 }
 
 describe('SightingList', () => {
@@ -46,10 +51,45 @@ describe('SightingList', () => {
     expect(screen.getByTestId('sighting-map')).toBeInTheDocument()
   })
 
-  it('shows the total number of matches, not just the ones loaded', () => {
+  it('shows how many of the total matches are loaded', () => {
     renderList({ totalCount: 80328 })
 
-    expect(screen.getByText('80,328 results')).toBeInTheDocument()
+    expect(screen.getByText('Showing 1 of 80,328 results')).toBeInTheDocument()
+  })
+
+  it('shows a load more button only when there is another page', () => {
+    const { onLoadMore } = renderList({ hasNextPage: true, totalCount: 40 })
+
+    fireEvent.click(screen.getByRole('button', { name: 'Load more' }))
+    expect(onLoadMore).toHaveBeenCalledOnce()
+  })
+
+  it('hides the load more button on the last page', () => {
+    renderList({ hasNextPage: false })
+
+    expect(
+      screen.queryByRole('button', { name: 'Load more' }),
+    ).not.toBeInTheDocument()
+  })
+
+  it('keeps the button focusable but marked busy while the next page loads', () => {
+    renderList({ hasNextPage: true, loadingMore: true, totalCount: 40 })
+
+    const button = screen.getByRole('button', { name: 'Loading…' })
+    expect(button).toHaveAttribute('aria-disabled', 'true')
+    expect(button).not.toBeDisabled()
+    expect(screen.getByRole('list')).not.toHaveAttribute('aria-busy', 'true')
+  })
+
+  it('offers to try again when the next page fails', () => {
+    renderList({ hasNextPage: true, loadMoreFailed: true, totalCount: 40 })
+
+    expect(screen.getByRole('alert')).toHaveTextContent(
+      'Could not load more sightings',
+    )
+    expect(
+      screen.getByRole('button', { name: 'Try again' }),
+    ).toBeInTheDocument()
   })
 
   it('shows fallbacks for fields the API returns as null', () => {

From eed39e819013b00ab2e790f3e313a95a38cae231 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jonathan=20M=C3=BCller-Grud?= <jonatsm@stud.ntnu.no>
Date: Mon, 12 Oct 2026 12:32:48 +0200
Subject: [PATCH 6/6] Chore: Remove mock filtering and update AGENTS.md

Delete filter-sightings and its tests now that search and sort run
in the database. Update comments that described the old filtering,
and bring AGENTS.md's current state and folder notes up to date.

Refs #34
---
 AGENTS.md                                   |  8 +--
 frontend/src/data/mock-sightings.ts         |  5 +-
 frontend/src/hooks/use-debounced-value.ts   |  3 +-
 frontend/src/tests/filter-sightings.test.ts | 74 ---------------------
 frontend/src/utils/filter-sightings.ts      | 46 -------------
 5 files changed, 8 insertions(+), 128 deletions(-)
 delete mode 100644 frontend/src/tests/filter-sightings.test.ts
 delete mode 100644 frontend/src/utils/filter-sightings.ts

diff --git a/AGENTS.md b/AGENTS.md
index 6e2887f..53c4160 100644
--- a/AGENTS.md
+++ b/AGENTS.md
@@ -5,7 +5,7 @@
 - **Name:** UFOund it
 - **What it is:** UFOund it, is a webapp that displays UFO sightings.
 - **Dataset:** [NUFORC UFO Sightings (Kaggle)](https://www.kaggle.com/datasets/NUFORC/ufo-sightings), CSV, approx 80,000 reports, approx 15mb.
-- **Current state:** The frontend runs on hand-written mock data in `frontend/src/data/`. The backend is an Apollo Server with only a placeholder `health` query. The frontend reaches it through Apollo Client, but only for a temporary backend status check in the footer. No database yet.
+- **Current state:** The backend is an Apollo Server with `sightings`, `sighting` and `createSighting`, backed by MySQL on the VM. The search page fetches sightings through Apollo Client, with search, sort and "load more" pagination done in the database. The detail page still looks sightings up in the hand-written mock data in `frontend/src/data/`. A temporary footer shows whether the backend is reachable.
 - **Course context:** NTNU IT2810 project. Must be reproducible, accessible and sustainable.
 
 ## Tech stack
@@ -67,10 +67,10 @@ frontend/
     components/   Reusable UI (Banner, SearchBar, SightingList, SightingMap, BackendStatus)
     pages/        Route-level components (SearchPage, SightingDetailPage, SubmitSightingPage)
     hooks/        Custom hooks (debounce, sighting search, single sighting)
-    utils/        Pure helpers (filtering, formatting)
+    utils/        Pure helpers (formatting)
     types/        Shared TypeScript types
-    data/         Mock sightings (to be replaced by GraphQL)
-    graphql/      Apollo Client setup (client.ts), queries.ts and mutations.ts
+    data/         Mock sightings, still used by the detail page and as test fixtures
+    graphql/      Apollo Client setup and pagination cache rules (client.ts), queries.ts and mutations.ts
 backend/          Node + TypeScript GraphQL server (Apollo Server 5)
   src/
     index.ts      Starts the server on PORT (default 3001)
diff --git a/frontend/src/data/mock-sightings.ts b/frontend/src/data/mock-sightings.ts
index bd5fc56..a020365 100644
--- a/frontend/src/data/mock-sightings.ts
+++ b/frontend/src/data/mock-sightings.ts
@@ -1,8 +1,9 @@
 import type { UfoSighting } from '../types/ufo-sighting'
 
 /**
- * Hand-written sample sightings so the search UI has something to show
- * before the backend exists. Remove once sightings are fetched via GraphQL.
+ * Hand-written sample sightings. The search page now reads from GraphQL,
+ * but the detail page still looks sightings up here, and tests use them as
+ * fixtures. Remove from the app once the detail page uses GraphQL.
  */
 export const mockSightings: UfoSighting[] = [
   {
diff --git a/frontend/src/hooks/use-debounced-value.ts b/frontend/src/hooks/use-debounced-value.ts
index 0d83317..6b1e219 100644
--- a/frontend/src/hooks/use-debounced-value.ts
+++ b/frontend/src/hooks/use-debounced-value.ts
@@ -2,8 +2,7 @@ import { useEffect, useState } from 'react'
 
 /**
  * Returns `value` only after it has stopped changing for `delayMs`.
- * Used for search input so filtering (and later, network requests)
- * doesn't run on every keystroke.
+ * Used for search input so a request isn't sent on every keystroke.
  */
 export function useDebouncedValue<T>(value: T, delayMs: number): T {
   const [debouncedValue, setDebouncedValue] = useState(value)
diff --git a/frontend/src/tests/filter-sightings.test.ts b/frontend/src/tests/filter-sightings.test.ts
deleted file mode 100644
index 5bb71a7..0000000
--- a/frontend/src/tests/filter-sightings.test.ts
+++ /dev/null
@@ -1,74 +0,0 @@
-import { describe, expect, it } from 'vitest'
-import type { SightingSortOption, UfoSighting } from '../types/ufo-sighting'
-import {
-  filterSightings,
-  searchSightings,
-  sortSightings,
-} from '../utils/filter-sightings'
-
-const sightings: UfoSighting[] = [
-  {
-    id: 'b',
-    datetime: '2002-01-01T00:00:00',
-    city: 'Oslo',
-    state: '',
-    country: 'no',
-    shape: 'light',
-    durationSeconds: 30,
-    comments: 'A silent glow',
-    datePosted: '2002-01-02',
-    latitude: 59.9,
-    longitude: 10.7,
-  },
-  {
-    id: 'a',
-    datetime: '2001-01-01T00:00:00',
-    city: 'Bergen',
-    state: '',
-    country: 'no',
-    shape: 'triangle',
-    durationSeconds: 60,
-    comments: 'Three lights',
-    datePosted: '2001-01-02',
-    latitude: 60.4,
-    longitude: 5.3,
-  },
-]
-
-describe('sighting filtering and sorting', () => {
-  it('matches city, shape, and comments case-insensitively', () => {
-    expect(filterSightings(sightings, 'OSLO').map(({ id }) => id)).toEqual([
-      'b',
-    ])
-    expect(filterSightings(sightings, 'TRIANGLE').map(({ id }) => id)).toEqual([
-      'a',
-    ])
-    expect(
-      filterSightings(sightings, 'silent glow').map(({ id }) => id),
-    ).toEqual(['b'])
-  })
-
-  it('treats a whitespace-only query as empty', () => {
-    expect(filterSightings(sightings, '  ')).toBe(sightings)
-  })
-
-  it.each([
-    ['date-desc', ['b', 'a']],
-    ['date-asc', ['a', 'b']],
-    ['city-asc', ['a', 'b']],
-    ['shape-asc', ['b', 'a']],
-  ] as [SightingSortOption, string[]][])(
-    'sorts by %s without mutating input',
-    (sort, ids) => {
-      const original = [...sightings]
-      expect(sortSightings(sightings, sort).map(({ id }) => id)).toEqual(ids)
-      expect(sightings).toEqual(original)
-    },
-  )
-
-  it('filters before sorting in the combined search helper', () => {
-    expect(
-      searchSightings(sightings, 'lights', 'city-asc').map(({ id }) => id),
-    ).toEqual(['a'])
-  })
-})
diff --git a/frontend/src/utils/filter-sightings.ts b/frontend/src/utils/filter-sightings.ts
deleted file mode 100644
index 27a0f2a..0000000
--- a/frontend/src/utils/filter-sightings.ts
+++ /dev/null
@@ -1,46 +0,0 @@
-import type { SightingSortOption, UfoSighting } from '../types/ufo-sighting'
-
-/**
- * Keeps sightings whose city, shape or comment contains the query,
- * case-insensitively. An empty query matches everything.
- */
-export function filterSightings(
-  sightings: UfoSighting[],
-  query: string,
-): UfoSighting[] {
-  const normalizedQuery = query.trim().toLowerCase()
-  if (normalizedQuery === '') return sightings
-
-  return sightings.filter((sighting) =>
-    [sighting.city, sighting.shape, sighting.comments].some((field) =>
-      field?.toLowerCase().includes(normalizedQuery),
-    ),
-  )
-}
-
-const comparators: Record<
-  SightingSortOption,
-  (a: UfoSighting, b: UfoSighting) => number
-> = {
-  // ISO 8601 strings sort chronologically when compared as strings.
-  'date-desc': (a, b) => (b.datetime ?? '').localeCompare(a.datetime ?? ''),
-  'date-asc': (a, b) => (a.datetime ?? '').localeCompare(b.datetime ?? ''),
-  'city-asc': (a, b) => (a.city ?? '').localeCompare(b.city ?? ''),
-  'shape-asc': (a, b) => (a.shape ?? '').localeCompare(b.shape ?? ''),
-}
-
-/** Returns a sorted copy so the caller's array is never mutated. */
-export function sortSightings(
-  sightings: UfoSighting[],
-  sort: SightingSortOption,
-): UfoSighting[] {
-  return [...sightings].sort(comparators[sort])
-}
-
-export function searchSightings(
-  sightings: UfoSighting[],
-  query: string,
-  sort: SightingSortOption,
-): UfoSighting[] {
-  return sortSightings(filterSightings(sightings, query), sort)
-}