53 docs oppdatere readme med produktdetaljside og graphql integrasjon

README.md

@@ -51,7 +51,13 @@ Hva du får opp når du filtrerer på en bestemt butikk hvis den har produktet o
 
 ### Produktside og meny
 
-Produktsiden viser pris, kilopris, ingredienser, allergener og næringsinnhold. Her kan man endre antall og legge til et notat, for eksempel «skivet, hvis de har». Menyen gir tilgang til alle delene av appen.
+Produktsiden er utviklet med utgangspunkt i Figma-designet. Den henter produktnavn, merke, kategori, produktbilde og butikkpriser fra GraphQL-backenden basert på produktets EAN-kode.
+
+Butikkprisene sorteres fra lavest til høyest, med tydelig markering av billigste butikk og prisforskjeller. Dersom bilde eller priser mangler, vises en alternativ melding.
+
+Siden støtter både light mode og dark mode ved hjelp av prosjektets eksisterende temavariabler.
+
+Ingredienser, allergener og næringsinnhold inngår i designet, men er foreløpig ikke tilgjengelige gjennom GraphQL. Handlelistekontrollene er implementert med lokal React-state, men er ennå ikke koblet til backend.
 
 ![Produktside og meny](docs/design/produkt-og-meny.png)
 
@@ -122,6 +128,23 @@ Backenden kjører på port 3001. Når backenden kjører lokalt, kan du åpne htt
 
 En `Product` har feltene `ean`, `name`, `brand`, `imageUrl`, `categoryId`, `category` og `prices`. Hver pris har `storeCode`, `price`, `unitPrice` og `url`.
 
+### GraphQL i frontend – produktdetaljer
+
+Frontend bruker to ulike GraphQL-spørringer for produkter:
+
+- `products(search, limit, ...)` brukes til å hente flere produkter til søk og produktoversikter.
+- `product(ean)` brukes til å hente informasjon om ett bestemt produkt på produktdetaljsiden.
+
+Dette er et bevisst valg for å skille mellom produktsøk og detaljvisning. Det gjør at detaljsiden kan hente informasjon om et bestemt produkt uten å måtte søke gjennom en produktliste.
+
+Produktdetaljsiden bruker Apollo Clients `useQuery` og en egen spørring definert i `frontend/src/pages/productDetails/productQueries.ts`.
+
+Spørringen henter `ean`, `name`, `brand`, `imageUrl`, `category` og `prices`, inkludert butikkode, pris og enhetspris.
+
+Prisene sorteres i frontend for det aktuelle produktet. Apollo Client tilbyr caching, men vi har foreløpig ikke dokumentert eller målt noen reduksjon i nettverkskall mellom produktlisten og detaljsiden.
+
+Ved lasting, feil eller manglende produkt vises egne tilstander, slik at siden ikke forsøker å vise informasjon som ikke finnes.
+
 **Eksempel: søk etter melk**
 
 ```graphql
@@ -268,11 +291,28 @@ Lister med mange elementer, som søkeresultater og tidligere handlelister, retur
 - Frontend med React og Apollo Client som henter og viser varer med laveste pris. Søket bruker debounce (400 ms), så det sendes ikke et kall for hvert tastetrykk.
 - Backend og database på VM-en (pågår, se [Kjøre på VM-en](#kjøre-på-vm-en)).
 
+### Produktdetaljside – implementert etter innlevering 2
+
+- Produktdetaljside utviklet med React, TypeScript og CSS basert på Figma-designet.
+- GraphQL-integrasjon for henting av produkter basert på EAN.
+- Dynamisk visning av produktnavn, merke, kategori, bilde og butikkpriser.
+- Prissammenligning med sortering fra billigst til dyrest.
+- Håndtering av lasting, feil, manglende produkter, priser og bilder.
+- Støtte for light mode og dark mode gjennom felles temavariabler.
+- Testet manuelt mot backend. `npm run build` er gjennomført uten feil.
+
+**Gjenstår:**
+- Hente ingredienser, allergener og næringsinnhold fra backend.
+- Koble handlelistekontrollene til backend.
+- Integrere navigasjon fra søkeresultater til produktdetaljsiden.
+
+
 **Kommer i innlevering 3**
 
 - Paginering i klienten («last flere» eller sider) med totalt antall treff.
 - Filtrering på pris, butikk og merking, og sortering på pris og kilopris, i databasen.
-- Produktside med ingredienser, allergener og næringsinnhold.
+- Utvide den eksisterende produktdetaljsiden med ingredienser,
+  allergener og næringsinnhold fra backend.
 - Handlelister i grensesnittet: opprette, legge til varer, endre antall, handletur med avkrysning og tidligere lister.
 - Tilgjengelighet og bærekraft som beskrevet i [Hvordan vi oppfyller kravene](#hvordan-vi-oppfyller-kravene).
 - Prettier, Vitest og Playwright.