#41 Oppdatert - Koble produktdetaljsiden til GraphQL

[taraa]

Beskrivelse

Denne PR-en kobler produktdetaljsiden til GraphQL-backenden, slik at produktinformasjon og butikkpriser hentes dynamisk fra databasen basert på produktets EAN-kode, i stedet for å bruke hardkodede eksempeldata.

Relaterte issues

Closes #41

Endringer gjort

• Opprettet productQueries.ts med GraphQL-spørring og TypeScript-typer.
• Henter produktnavn, merke, kategori og produktbilde fra backend.
• Henter butikkpriser og sorterer dem fra billigst til dyrest.
• Viser billigste butikk og prisforskjeller.
• Lagt til håndtering av lasting, feil og manglende produktdata.
• Fjernet hardkodede ingredienser, allergener og næringsverdier.
• Forbedret produktbildevisningen.
• Tilpasset CSS til light mode og dark mode med eksisterende temavariabler.

Hva slags type fiks inneholder denne PR

• Bug fix
• Ny funksjonalitet
• Refactor
• Dokumentasjon
• Testing

Sjekkliste

• Testet lokalt
• Dokumentert endringer
• Sjekket for feilmeldinger

npm run build er kjørt uten feil. Produktinformasjon og priser er testet mot backend, og visningen er kontrollert i dark mode.

Skjermbilder

Videre arbeid

Ingredienser, allergener og næringsinnhold håndteres i en egen issue, da disse feltene foreløpig ikke er tilgjengelige gjennom GraphQL.

Handlelistefunksjonaliteten bruker fortsatt lokal React-state. Navigasjon fra søkeresultater til produktdetaljsiden integreres senere.

[ingrihka]

Fin PR! Spørringen er ryddig og typet, prisene sorteres riktig, og lasting, feil og manglende data er godt håndtert. Bra også at siden er flyttet inn i pages/.

Bør fikses før merge:

1. color-scheme: light; på .product-details-page (linje 13 i CSS-en) tvinger lys modus på knapper, tekstfelt og scrollbar, også når brukeren har mørk modus. Kan den fjernes?
2. Noen farger er fortsatt hardkodet og blir feil i mørk modus: #780b2b, #fafafa, #e8e8e8, #f3b4cc, rgba(120, 11, 43, …) og #999 !important. Forslag til variabler fra theme.css: --border-brand, --bg-muted, --border-grid, --note-rule og --text-muted.

Mindre ting, kan tas senere:
3. Siden kan ikke nås i appen ennå. Komponenten tar ean som prop, men det finnes ingen rute i App.tsx. Skal vi lage et eget issue for rute (/product/:ean med useParams) og lenker fra søkeresultatene?
4. Innrykket er blandet (2 og 4 mellomrom). Det kan ryddes med formatering (Shift+Option+F).
5. «Ingen bilde» – issuen sier «Mangler bilde». Bare en liten ting å samkjøre.