diff --git a/README.md b/README.md index c3351e3..b205421 100644 --- a/README.md +++ b/README.md @@ -14,8 +14,8 @@ Forsiden viser en hero-karusell med trending filmer, og seksjoner for populære 3. [api](#api) 4. [testing](#testing) 5. [prosjektstruktur](#prosjektstruktur-komponenter-hooks-layout-types) -6. [Valg?](#Valg-vi-har-gjordt-i-prosessen) -7. [Bruk av Ki](#bruk-av-ki) +6. [valg](#Valg-vi-har-gjordt-i-prosessen) +7. [bruk av Ki](#bruk-av-ki) ## oppsett @@ -151,8 +151,9 @@ pnpm test #watch-modus som kjører blir stående å kjøre tester i bakgrunnen mens du lager nye -pnpm test:run # 1 gjennomkjørign +pnpm test:run +# 1 gjennomkjøring ``` @@ -252,6 +253,13 @@ TreningPreview, SortfilterBar og MovieDetails har ingen egne tester som det stå │   ├── SortFilterBar.tsx │   ├── TrendingPreview.css │   └── TrendingPreview.tsx +│   ├── MovieCard.test.tsx +│   ├── MovieList.test.tsx +│   ├── SearchField.test.tsx +│   ├── Sidebar.test.tsx +│   ├── sortAndFilterMovies.test.ts +│   └── __snapshots__/ +│   └── Movieard.test.tsx.snap ├── hooks │   ├── useDebouncedValue.ts │   ├── useFavorites.ts @@ -264,6 +272,7 @@ TreningPreview, SortfilterBar og MovieDetails har ingen egne tester som det stå │   ├── MainLayout.tsx │   └── SearchLayout.tsx ├── test +│   ├── utils.tsx │   └── setup.ts ├── types │   └── tmdb.ts @@ -307,7 +316,7 @@ Overskriften rendres bare hvis title faktisk har innhold. Banner-seksjonen øver En liten, selvutviklet komponent (ingen tredjepartsbibliotek for UI, i tråd med kravet) med en nedtrekksmeny for sortering og en range-slider for minimumsvurdering. Komponenten er "dum" — den mottar verdier og callbacks som props, og eier ingen egen state selv. -##### FavoriteButton.tsx + FavoriteButton.css +###### FavoriteButton.tsx + FavoriteButton.css Hjerteknappen som markerer en film som favoritt. Eier ingen state selv, men får isFavorite og onToggleFavorite inn som props, slik at samme knapp kan brukes både på filmkortet og i detaljvisning. @@ -315,13 +324,6 @@ Hjerteknappen som markerer en film som favoritt. Eier ingen state selv, men får Detaljvisningen som legger seg over siden når man åpner en film. Viser backdrop, tittel, utgivelsesdato, vurdering, sammendrag og skuespillere, og henter skuespillerne via `useMovieCredits` på samme måte som kortet — så cachen deles og det blir ikke et nytt kall. -###### SortFilterBar.tsx + SortFilterBar.css - -Raden med sorteringsvalg og minimumsvurdering, vises på søkesiden. En -nedtrekksmeny og en slider, begge egenutviklet uten tredjepartsbibliotek. -Komponenten eier ingen state selv, den får verdier og callbacks som props fra -App.tsx. Selve sorteringen skjer i sortAndFilterMovies, ikke her. - ###### TrendingPreview.tsx + TrendingPreview.css Banneret øverst på forsiden. Viser én film om gangen med pil til venstre og @@ -488,7 +490,7 @@ KI er brukt til: - Forklaring av ting jeg ikke hadde mye kunnskap til før, da dette er første gang jeg bruker mange av ressursene vi skulle i prosjektet. Jeg stilte spørsmål om hooks, hvordan man benytter seg av komponenter og hvordan mange av de forksjellige filene henger og holder sammen. - Diskutering av løsninger før jeg begynte å skrive kode. For eksmepel var det å lage en mobillayout litt mer krevende og hjalp med å bestemme hvilke mengde pixler som hadde passet bra til f.eks knappe størrelser. - Feilsøking av diverse problemer. 401 mot TMDB, CSS som ikke virket eller så veldig rar ut. Det var veldig nyttig da mye av koden man skriver her ikke nødvendigvis er "feil", men bare ikke er veldig intuitiv eller ikke er best practice. Da kunne Claude fortelle om alternativer og andre muligheter man kunne prøve seg på. -- Tilgjengelighet på mobil, som f.eks hvilke aria-attributter som trengs og hvorfor. Her var det igjen hjelpelig med noen som fortalte meg hvor stor kanpper måtte være for å kunne trykkes på med tommelen på mobil før jeg kunne teste det selv på serveren. +- Tilgjengelighet på mobil, som f.eks hvilke aria-attributter som trengs og hvorfor. Her var det igjen hjelpelig med at claude fortalte meg hvor stor knapper måtte være for å kunne trykkes på mobil før jeg kunne teste det selv på serveren. - Oppsett av Vitest og de første testene. Claude gidde også en god forklaring hva de forskjellige testene gjorde og hvorfor de var nyttige å benytte seg av. Erfaringer: @@ -499,15 +501,17 @@ Jeg tok med først god tid til å fortså kode som KI foreslo slik at jeg fikk u Claude var en stor hjelp i spesielt CSS. Dette merket jeg da vi alle skulle gjøre våre egen CSS som ikke laget veldig fin sammenhengende CSS gjennom nettsiden. Jeg kunne da benytte meg av å screenshotte endringer som noen andre gjorde på nettsiden og få claude til å gi en forklaring til CSS som kunne passe. Dette brukte jeg til å kopiere CSS fra MovieCard til å lage CSS på Sidebar. -Det som ikke var like bra ved bruk av KI var når den ville gjøre veldig store endringer og den ville endre kode til mine gruppe medlemmer. Her måtte jeg gjøre flere små endringer istedet og passe på at den holdt seg innenfor rammene til "issuet" som jeg skulle løse på den branchen og ikke bare gi meg masse tips til ting som ikke var relevant til det jeg jobbet med. +Det som ikke var like bra ved bruk av KI var når den ville gjøre veldig store endringer og den ville endre kode til mine gruppemedlemmer. Her måtte jeg gjøre flere små endringer istedet og passe på at den holdt seg innenfor rammene til "issuet" som jeg skulle løse på den branchen, og ikke bare gi meg masse tips til ting som ikke var relevant til det jeg jobbet med. -Når jeg hadde problemer med min personlige kode, spurte jeg Claude også om å gi meg flere alternativ til problemet og ikke bare ett sett med kode. Dette lærte meg nyansene og de forskjellige måtene jeg kunne håndtere feil i koden på, uten å føle at KI gjorde alt for meg. +Når jeg hadde problemer med min personlige kode, spurte jeg Claude også om å gi meg flere alternativer til problemet og ikke bare ett sett med kode. Dette lærte meg nyansene og de forskjellige måtene jeg kunne håndtere feil i koden på, uten å føle at KI gjorde alt for meg. Ki hjalp også med testene. Det å la KI hjelpe ved lagingen hjalp oss også med å finne ekte feil i koden. Vi merket da at MovieList manglet key, og MovieCard sender en tom streng som src når en film ikke har plakat. Begge ga advarsler som var nyttige for å feilsøke og fikse. +Oppsummert: KI er brukt som en sammarbeidspartner som foreslår, hjelper og endrer kode der nødvendig. Det er blitt tatt tiltak i bruken for å passe på at det hovedsak holder seg til å lære av og ikke for å bli en erstattning til kritisk tenking og læring. + #### Albert -Oversikten under er generert av Claude basert på all chat-historikken min fra autust-september (17.09.2026). Utover det Claude har lagt inn i oversikten er KI generelt brukt til feilsøking, forklaring av teknologier vi bruker som react og typescript. I tillegg er KI brukt for å effektivisere enkelte oppgaver slik som å søke gjennom historikk i github, o.l. +Oversikten under er generert av Claude basert på all chat-historikken min fra august-september (17.09.2026). Utover det Claude har lagt inn i oversikten er KI generelt brukt til feilsøking, forklaring av teknologier vi bruker som react og typescript. I tillegg er KI brukt for å effektivisere enkelte oppgaver slik som å søke gjennom historikk i github, o.l. _Bruk av KI_: diff --git a/src/App.css b/src/App.css index a35191b..1b0c364 100644 --- a/src/App.css +++ b/src/App.css @@ -41,4 +41,4 @@ padding: 16px; margin-top: auto; font-size: 0.75em; -} \ No newline at end of file +} diff --git a/src/App.tsx b/src/App.tsx index 7c5187d..15498fa 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -60,70 +60,65 @@ function App() { return ( <> -
- - -
- {isSearching ? ( - - ) : view === 'favoritter' ? ( - - ) : ( - + + +
+ {isSearching ? ( + + ) : view === 'favoritter' ? ( + + ) : ( + + )} +
+ + {selectedMovie && ( + setSelectedMovie(null)} /> )} -
- - {selectedMovie && ( - setSelectedMovie(null)} - /> - )} - -
+ + -