diff --git a/README.md b/README.md index 760d687..c3351e3 100644 --- a/README.md +++ b/README.md @@ -62,6 +62,7 @@ Prosjektet kan testes med kommandoen `pnpm test:run`. Fra prosjektbeskrivelsen er det krav om "ingen feilmeldinger eller advarsler ved linting", og at koden skal formatteres med `prettier`. Dette kan sjekkes med følgende kommandoer: + ```bash # sjekk linting pnpm lint @@ -135,7 +136,7 @@ Når man har lagt inn denne skal prosjektet kunne kjøre lokalt, og api-kall ska > Filen `.env.local` er derfor lagt til i `.gitignore`. > [!NOTE] -> Vi vurderte å sette opp en reverse-proxy på serveren for å skjule api-token helt, men dette +> Vi vurderte å sette opp en reverse-proxy på serveren for å skjule api-token helt, men dette > ble unødvendig komplekst for prosjektets omfang. Fordi Vite bygger inn alle 'Vite_'-prefikser inn i > prosjektfilene vli api-tokenet teknisk sett være synlig for alle som inspiserer api-kallene. > Vi anser risikoen som lav i dette tilfellet ettersom serveren kjører på en VM på ntnu sitt låste nettverk @@ -312,22 +313,23 @@ Hjerteknappen som markerer en film som favoritt. Eier ingen state selv, men får ###### MovieDetails.tsx + MovieDetails.css -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. +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 høyre, og bytter automatisk hvert femte sekund. Tre bilder ligger side om side i en track som flyttes med translateX, så overgangen blir en glidende animasjon i stedet for et hopp. Klikk midt på banneret åpner detaljvisningen. Pilene og midtfeltet er button-elementer med aria-label, siden de ikke har synlig tekst. - #### hooks ###### useMovieCredits.ts @@ -343,14 +345,13 @@ En generisk, gjenbrukbar hook som fungerer som `useState`, men som leser fra og Vil returnere true eller false for en media query, i mine tilfeller var dette ved bruk av (max-width:700px), som lar meg si at hvis noen åpner ned en brudde under 700px så rendre den riktige menyen. useState passer her på at riktig verdi settes før første render, slik at det ikke skal vises feil visning først. useEffect henger på via window.matchMedia, og return funksjonen fjerner lytteren igjen. uten det hoper lytterne seg opp for hver rendring. Da desktop og mobil har ulik DOM struktur trenger vi dette både i JSX og CSS og ikke bar ei CSS. I desktop som sagt tidligere ligger undermenyen i HOME og på mobil ligger alle fire knappene flatt på bunnen ved siden av hverandre. Dette vil ikke CSS kunne gjøre. - ##### useFavorites.ts Holder lista over favoritt-id-er og lagrer den i localStorage under nøkkelen favorites-movies. Kun id-ene lagres og ikke hele filmobjektet. Dette er fordi at den skal ikke mellomlagre API-data og lagrede filmer kunne blitt utdatert. Lista leses ved første render og en `useEffect` skriver tilbake når den endrer seg. ###### useDebouncedValue.ts -En generisk hook som forsinker en verdi til den har vært uendret i et gitt antall millisekunder. Brukes på søketeksten med 400ms. Hvis denne ikke hadde blitt brukt hadde man sendt et API-kall for hver bokstav man trykker inn. Dette gjør at man kun sender et API-kall, ikke flere. +En generisk hook som forsinker en verdi til den har vært uendret i et gitt antall millisekunder. Brukes på søketeksten med 400ms. Hvis denne ikke hadde blitt brukt hadde man sendt et API-kall for hver bokstav man trykker inn. Dette gjør at man kun sender et API-kall, ikke flere. ###### useMovies.ts @@ -361,12 +362,15 @@ Samler alle filmspørringene mot TMDB.øke-spørringen har `enabled: query.trim( Layout-komponentene setter sammen seksjoner og bestemmer hva som vises i hovedområdet. `App.tsx` velger mellom dem ut fra tilstand, slik at `App` slipper å inneholde tre ulike JSX-trær. ###### MainLayout.tsx + Forsiden: hero-karusell med trending filmer, og seksjoner for populære og nye filmer. ###### SearchLayout.tsx + Vises så snart søkefeltet har innhold. Rendrer `SortFilterBar` over søkeresultatene og kjører `sortAndFilterMovies` på treffene før de sendes til `MovieList`. ###### FavoritesLayout.tsx + Favorittsiden. Får `favoriteIds` inn og henter filmene på nytt via `useFavoriteMovies`. Viser "Du har ingen favoritter ennå." når lista er tom, i stedet for en blank side. @@ -416,16 +420,17 @@ regner som om adresselinja i mobilnettleseren ikke finnes, så bunnen av kortet ## Tilgjengelighet Prinsippet gjennom appen er at alt som kan klikkes på også skal kunnes nå ved tastatur og gi mening for en nettleser. I praksis betyr det at interaktive elementer er -ekte `