43 feat koble katalog og detaljvisning til graphql

[sebasti]

Issue

Closes #43

Endringer

• Apollo Client er satt opp med cache (src/graphql/client.ts). Spørringene for katalogen og detaljvisningen ligger i src/graphql/listingQueries.ts.
• vite.config.ts har base: '/project2/' og en dev-proxy fra /project2/api til http://localhost:3001, slik at frontend bruker samme stier lokalt som på VM-en.
• Katalogen henter 24 annonser om gangen fra listings, med «Forrige» og «Neste». Gjeldende side ligger i URL-en (?side=2), og antall treff kommer fra totalCount.
• Detaljvisningen henter annonsen med listing(id). null fra serveren gir «Fant ikke annonsen».
• Katalogen og detaljvisningen har laste-, feil- og tomtilstander. Feilen vises med den nye komponenten QueryError, som har knappen «Prøv igjen». En side utenfor katalogen gir «Siden finnes ikke».
• Ny komponent Pagination. Sidene er lenker, så «Tilbake» i nettleseren virker.
• Katalogen henter bare feltene kortene viser (ny type ListingSummary). Én side er omtrent 4 kB.
• README har en ny del «Frontend mot GraphQL» med begrunnelse for Apollo, og forklarer hvordan frontend og backend kjøres sammen lokalt. docs/design.md, docs/testing.md og docs/ki-bruk.md er oppdatert.

Verdt å se på:

• Annonsebildene er flyttet fra src/assets/listings/ til public/assets/listings/. De har da samme sti som image_url i databasen, både lokalt og i bygget. Den egne Alias-en for bildene i deploy/apache/t36-project2.conf er fjernet fordi den ikke trengs lenger. Apache-siten er ikke aktivert på VM-en ennå, så ingenting påvirkes der.
• Søk, filtre og sortering er skjult i katalogen. Lokalt ville de bare virket på de 24 annonsene som er lastet. Komponentene, hookene og testene ligger fortsatt i src/ til serveren støtter dem.
• src/data/mockListings.ts brukes nå bare av designreferansen og testene.

Testing

Nye og endrede tester:

• src/App.test.tsx bruker nå MockedProvider med mockede GraphQL-svar (src/test/listingMocks.ts) i stedet for mockListings. Den tester lasting, antall fra serveren, side i URL-en, blaing, feil med «Prøv igjen», tom katalog, side som ikke finnes, og detaljvisning med lasting, feil og ukjent ID.
• src/components/Pagination/Pagination.test.tsx og src/utils/catalogPage.test.ts.

Kontrollert i nettleser mot lokal PostgreSQL og backend med 10 010 annonser:

• Katalogen, alle 418 sidene, «Tilbake» i nettleseren og at bilder lastes.

• Detaljvisning, også etter sideoppdatering, og ukjent ID.

• Feiltilstanden med backenden stoppet, og «Prøv igjen» etter at den er startet igjen.

• Ingen horisontal scrolling på 360 px, «Neste» med tastatur og synlig fokus.

• npm run typecheck

• npm run lint

• npm run format:check

• npm test (97 tester)

• npm run build

• Kontrollert i nettleser, også på smal skjerm og med tastatur

Sjekkliste

• README eller docs/ er oppdatert hvis det trengs
• Eventuell KI-bruk er ført i docs/ki-bruk.md

[andretg]

Testet lokalt mot en database med 10 010 annonser (datasettet fra #39), med backend og frontend fra denne grenen.

• lint, format:check, typecheck, build og alle 97 testene går gjennom
• Katalogen viser «10 010 annonser · side 1 av 418» med 24 kort
• «Neste» går til ?side=2, og «Tilbake» i nettleseren går tilbake til side 1
• Side 418 viser de 2 siste annonsene
• ?side=999 gir «Siden finnes ikke … 418 sider», og ?side=0 og ?side=abc gir side 1
• Detaljvisningen henter genererte annonser (gen-000001), og ukjent ID gir «Fant ikke annonsen»
• Bildene laster fra /project2/assets/listings/
• Med backenden stoppet: «Fikk ikke kontakt med serveren» med role="alert", og «Prøv igjen» henter siden når backenden er tilbake

Ser bra ut!