diff --git a/README.md b/README.md index ce42818..6efdbe3 100644 --- a/README.md +++ b/README.md @@ -7,6 +7,7 @@ Prosjektet er live på: [http://it2810-02.idi.ntnu.no/project1/](http://it2810-0 _Skriv en beskrivelse her_ ## Table of Contents + 1. [oppsett](#oppsett) 2. [vm](#vm) 3. [api](#api) @@ -20,6 +21,7 @@ _Skriv en beskrivelse her_ Vi bruker `fnm` med `pnpm`, og `Node.js` v24. Installasjon kan gjøres med følgende kommandoer (linux): + ```bash # Download and install fnm: curl -o- https://fnm.vercel.app/install | bash @@ -234,24 +236,26 @@ Viser ett enkelt filmkort med plakat, tittel, rating og skuespillere. Tar imot m Tar imot en liste med filmer (movies: Movie[]) og rendrer ett MovieCard per film med .map(). Den vet ingenting om TMDB eller fetching – det ansvaret ligger i hookene og i Section-komponenten (laster/feilhåndtering). Bygger plakat-URL fra TMDB sin poster_path, med fallback til tom streng hvis filmen mangler plakat. Regner om TMDB sin vote_average (0–10) til prosent (0–100). Layouten er et responsivt grid (repeat(auto-fill, minmax(320px, 1fr))) som går til én kolonne på mobil. ###### Sidebar.tsx + Sidebar.css + Dette kan også tenkes som venstremenyen på dekstop og den nedre menyen i på mobilview. Den rendrer søkefeltet øverst og deretter enten en utslåbar meny(desktop) eller en fast bunnlinje (mobil). Tar imot onSearch og searchValue for søkefeltet, samt view og onViewChange for å lese og endre hvilke visning appen står i nå. Komponenten eier en egen state, isOpen som styrer om undermenyen er slått ut. Alt det andre vil komme utenfra. HOME og pila er to separate knapper i samme rad. I CSS vil det være visuelt det samme da Det er bevisst da den ene vil bli brukt til navigasjon og den andre åpner og lukker. Tidigere hadde vi HOME, både som en navigasjons knapp og åpner. Dette førte til at den ikke kunne lukkes og var litt uintuitivt. Pilen som er brukt er tegnet i CSS, og roasjonen styres direkte av aria-expanded. Dette er smart fordi da vil skjermleseren og det visuelle ikke kunne komme ut av sync. Fordi knappen ikke har tekst i seg, har den aria-label som veksler mellom å vise og skjule undermenyen. -Menypunktene ligger i to arrays øvest i fula i stedet for i JSXen. Så nye punkter kan legge sved i ett seperat sted. Mobiletikettene er kortet ned med vilje. Fire knapper i stedet for en dropdown førte til fin symetrisk visning og var lettere å implementere i tilegg. Vi vurderte også å ha symboler, men tok oss ikke tiden for å designe disse knappene. +Menypunktene ligger i to arrays øvest i fula i stedet for i JSXen. Så nye punkter kan legge sved i ett seperat sted. Mobiletikettene er kortet ned med vilje. Fire knapper i stedet for en dropdown førte til fin symetrisk visning og var lettere å implementere i tilegg. Vi vurderte også å ha symboler, men tok oss ikke tiden for å designe disse knappene. ###### SearchField.tsx + SearchField.css -Søkefeltet, tatt ut av Sidebaren(venstremenyen) fordi den hadde to ansvar samtidig. Komponenten har ingen egen state, teksten kommer inn som en value og sendes ut igjen via onChange, slik at App.tsx eier verdien. Det kalles et kontrollert felt og er grunnen til at menyen kan tømmen søket ved å kalle onSearch. Poppene heter value og onChange med vilje slik t de har samme navn som et vanlig input. -Labelen er skult visuelt med .visually-hidden. Ikke display:noen. Det siste fjerner elementet fra tilgjenelighetstreet også, og da forsvinner hele hensikten med labelen. htmlFor matcher inputens id. selve søklogikken er laget av en annen i gruppa og er uendret. +Søkefeltet, tatt ut av Sidebaren(venstremenyen) fordi den hadde to ansvar samtidig. Komponenten har ingen egen state, teksten kommer inn som en value og sendes ut igjen via onChange, slik at App.tsx eier verdien. Det kalles et kontrollert felt og er grunnen til at menyen kan tømmen søket ved å kalle onSearch. Poppene heter value og onChange med vilje slik t de har samme navn som et vanlig input. +Labelen er skult visuelt med .visually-hidden. Ikke display:noen. Det siste fjerner elementet fra tilgjenelighetstreet også, og da forsvinner hele hensikten med labelen. htmlFor matcher inputens id. selve søklogikken er laget av en annen i gruppa og er uendret. ###### Section.tsx + Section.css + Section e rrammen rundt her seksjon på forsiden Den tar seg av overskriften, id'en som menyen scroller til, g hba som skal vises mens data lastes eller hvis noe går galt. Selve innholdet sendes inn som children. Grunnen til at den finnes er at MovieList eller har måttet håndtere lasting og feil selv. I tillegg til å vise filmer. nå gjør Section det en gang, og listene kan holde seg til det de er gode på. Mens data hentes vises en grå skeletonboks i stedet for en tom side, og feiler kallet, kommet det en melding. -Overskriften rendres bare hvis title faktisk har innhold. Banner-seksjonen øverst sendes inn uten tittel, og uten den sjekken ville den laget en tom `

`. Det er ikke bare stygt da tomme overskrifter havner i overskriftoversikten en skjermleser navigerer etter, og da står det bare "overskrifter" uten noe mer. +Overskriften rendres bare hvis title faktisk har innhold. Banner-seksjonen øverst sendes inn uten tittel, og uten den sjekken ville den laget en tom `

`. Det er ikke bare stygt da tomme overskrifter havner i overskriftoversikten en skjermleser navigerer etter, og da står det bare "overskrifter" uten noe mer. #### hooks @@ -264,10 +268,10 @@ En React Query-hook som henter skuespillerlisten for én bestemt film via fetchM En generisk, gjenbrukbar hook som fungerer som `useState`, men som leser fra og skriver til `sessionStorage` automatisk. Brukes til både sorteringsvalg og minimumsvurdering, og kan gjenbrukes til andre ting senere ved behov. Lesing og skriving er pakket inn i try/catch i tilfelle storage er utilgjengelig (f.eks. i privat nettlesing), og faller da tilbake til en gitt standardverdi. ###### useMediaQuery.ts -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. +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. #### layout @@ -320,7 +324,6 @@ regner som om adresselinja i mobilnettleseren ikke finnes, så bunnen av kortet På tilgjengelighet... - ### Kjente begrensninger - Breakpointet 700px er definert to steder: som streng i useMediaQuery-kallet og i media queries i CSS. Endres det ene uten det andre, blir DOM-struktur og styling ute av synk. @@ -328,7 +331,6 @@ På tilgjengelighet... - Scroll til seksjon bruker setTimeout(..., 0) for å vente på at seksjonene er rendret etter et visningsbytte. Det fungerer, men er avhengig av timing – en useEffect som kjører når visningen faktisk har endret seg ville vært riktigere. - Hvert MovieCard gjør sitt eget kall til /credits. Caching på én time gjør at samme film ikke hentes på nytt, men første lasting av forsiden gir ett kall per kort i tillegg til filmlista. En samlet henting ville vært bedre. - ## Bruk av KI #### Leona @@ -360,28 +362,28 @@ _Bruk av KI_: Dette prosjektet har brukt Claude (Anthropic) som støtte gjennom utviklingsprosessen. -| Dato | Oppgave | Hva KI bidro med | -|------|---------|-------------------| -| 03.09 | Oppsett av basisprosjekt | Metodisk plan for prosjektstart (git, Vite-oppsett, komponenter/props/state) | -| 03.09 | Neste steg etter oppsett | Anbefalt arbeidsrekkefølge: valg av REST API, krav til API (CORS, autentisering, dokumentasjon) | -| 04.09 | Valg av teknologier | Forklaring av tech-stack: Node.js, TypeScript, TanStack m.m. | -| 04.09 | Feilsøking React/TypeScript | Debugging av import-feil (default vs. named export) | -| 11.09 | Bildekarusell-komponent | Løsning for klikkbar bilde-navigasjon (venstre/høyre-soner) | -| 14.09 | Komponentdesign | Veiledning i React-komponentarkitektur og ansvarsfordeling | -| 15.09 | API-sikkerhet | Gjennomgang og feilretting av Node/Express reverse-proxy for å skjule TMDB API-nøkkel | -| 16.09 | Deploy-script | Feilsøking av PATH-problem (pnpm ikke funnet i non-interaktivt shell) | -| 17.09 | Styling | CSS-løsning for skillelinje under `
`-elementer | -| 17.09 | Dokumentasjon | Søke gjennom chat-historikk for å dokumentere ki-bruk i prosjektet | +| Dato | Oppgave | Hva KI bidro med | +| ----- | --------------------------- | ----------------------------------------------------------------------------------------------- | +| 03.09 | Oppsett av basisprosjekt | Metodisk plan for prosjektstart (git, Vite-oppsett, komponenter/props/state) | +| 03.09 | Neste steg etter oppsett | Anbefalt arbeidsrekkefølge: valg av REST API, krav til API (CORS, autentisering, dokumentasjon) | +| 04.09 | Valg av teknologier | Forklaring av tech-stack: Node.js, TypeScript, TanStack m.m. | +| 04.09 | Feilsøking React/TypeScript | Debugging av import-feil (default vs. named export) | +| 11.09 | Bildekarusell-komponent | Løsning for klikkbar bilde-navigasjon (venstre/høyre-soner) | +| 14.09 | Komponentdesign | Veiledning i React-komponentarkitektur og ansvarsfordeling | +| 15.09 | API-sikkerhet | Gjennomgang og feilretting av Node/Express reverse-proxy for å skjule TMDB API-nøkkel | +| 16.09 | Deploy-script | Feilsøking av PATH-problem (pnpm ikke funnet i non-interaktivt shell) | +| 17.09 | Styling | CSS-løsning for skillelinje under `
`-elementer | +| 17.09 | Dokumentasjon | Søke gjennom chat-historikk for å dokumentere ki-bruk i prosjektet | **Oppsummert:** KI er brukt til prosjektplanlegging, komponentarkitektur, feilsøking, API-sikkerhet, styling og CI/CD-oppsett. All kode er gjennomgått og forstått før den er tatt i bruk. **Erfaringer:** KI var nyttig gjennom hele prosjektet, spesielt til å effektivisere lesing av dokumentasjon — i stedet for å lese gjennom store mengder API- eller bibliotek-dokumentasjon selv, kunne KI raskt oppsummere det som var relevant. Den var også til hjelp for å finne kilder og eksempler på hvordan ting bør gjøres, både i form av beste praksis og alternative løsninger å vurdere. På den tekniske siden ga KI god generell støtte med TypeScript-syntaks (typing, generics, korrekt bruk av interfaces/types), og fungerte som en rask referanse for kommandoer man ellers måtte slått opp (git, npm/pnpm, deploy-relaterte kommandoer). Ved konkret feilsøking — som import-feil i React-komponenter, PATH-problemer i deploy-scriptet, var KI effektiv til å peke ut sannsynlig årsak og forslag til løsning, noe som sparte tid sammenlignet med å feilsøke fra bunnen selv. Samtidig var det nødvendig å alltid kvalitetssikre og teste forslagene selv, siden KI ikke alltid traff riktig på første forsøk og enkelte ganger krevde oppfølgingsspørsmål eller mer kontekst for å komme til en fungerende løsning. - ## Template under i tilfelle andre vil ha samme oppsett for KI-bruk + #### [Navn] | Dato | Oppgave | Hva KI bidro med | -|------|---------|-------------------| -| | | | +| ---- | ------- | ---------------- | +| | | | diff --git a/backup/App.css b/backup/App.css deleted file mode 100644 index f90339d..0000000 --- a/backup/App.css +++ /dev/null @@ -1,184 +0,0 @@ -.counter { - font-size: 16px; - padding: 5px 10px; - border-radius: 5px; - color: var(--accent); - background: var(--accent-bg); - border: 2px solid transparent; - transition: border-color 0.3s; - margin-bottom: 24px; - - &:hover { - border-color: var(--accent-border); - } - &:focus-visible { - outline: 2px solid var(--accent); - outline-offset: 2px; - } -} - -.hero { - position: relative; - - .base, - .framework, - .vite { - inset-inline: 0; - margin: 0 auto; - } - - .base { - width: 170px; - position: relative; - z-index: 0; - } - - .framework, - .vite { - position: absolute; - } - - .framework { - z-index: 1; - top: 34px; - height: 28px; - transform: perspective(2000px) rotateZ(300deg) rotateX(44deg) rotateY(39deg) - scale(1.4); - } - - .vite { - z-index: 0; - top: 107px; - height: 26px; - width: auto; - transform: perspective(2000px) rotateZ(300deg) rotateX(40deg) rotateY(39deg) - scale(0.8); - } -} - -#center { - display: flex; - flex-direction: column; - gap: 25px; - place-content: center; - place-items: center; - flex-grow: 1; - - @media (max-width: 1024px) { - padding: 32px 20px 24px; - gap: 18px; - } -} - -#next-steps { - display: flex; - border-top: 1px solid var(--border); - text-align: left; - - & > div { - flex: 1 1 0; - padding: 32px; - @media (max-width: 1024px) { - padding: 24px 20px; - } - } - - .icon { - margin-bottom: 16px; - width: 22px; - height: 22px; - } - - @media (max-width: 1024px) { - flex-direction: column; - text-align: center; - } -} - -#docs { - border-right: 1px solid var(--border); - - @media (max-width: 1024px) { - border-right: none; - border-bottom: 1px solid var(--border); - } -} - -#next-steps ul { - list-style: none; - padding: 0; - display: flex; - gap: 8px; - margin: 32px 0 0; - - .logo { - height: 18px; - } - - a { - color: var(--text-h); - font-size: 16px; - border-radius: 6px; - background: var(--social-bg); - display: flex; - padding: 6px 12px; - align-items: center; - gap: 8px; - text-decoration: none; - transition: box-shadow 0.3s; - - &:hover { - box-shadow: var(--shadow); - } - .button-icon { - height: 18px; - width: 18px; - } - } - - @media (max-width: 1024px) { - margin-top: 20px; - flex-wrap: wrap; - justify-content: center; - - li { - flex: 1 1 calc(50% - 8px); - } - - a { - width: 100%; - justify-content: center; - box-sizing: border-box; - } - } -} - -#spacer { - height: 88px; - border-top: 1px solid var(--border); - @media (max-width: 1024px) { - height: 48px; - } -} - -.ticks { - position: relative; - width: 100%; - - &::before, - &::after { - content: ''; - position: absolute; - top: -4.5px; - border: 5px solid transparent; - } - - &::before { - left: 0; - border-left-color: var(--border); - } - &::after { - right: 0; - border-right-color: var(--border); - } -} diff --git a/backup/App.tsx b/backup/App.tsx deleted file mode 100644 index 251febe..0000000 --- a/backup/App.tsx +++ /dev/null @@ -1,122 +0,0 @@ -import { useState } from 'react'; -import heroImg from './assets/hero.png'; -import reactLogo from './assets/react.svg'; -import viteLogo from './assets/vite.svg'; -import './App.css'; - -function App() { - const [count, setCount] = useState(0); - - return ( - <> -
-
- - React logo - Vite logo -
-
-

Get started

-

- Edit src/App.tsx and save to test HMR -

-
- -
- -
- -
-
- -

Documentation

-

Your questions, answered

- -
-
- -

Connect with us

-

Join the Vite community

- -
-
- -
-
- - ); -} - -export default App; diff --git a/backup/assets/hero.png b/backup/assets/hero.png deleted file mode 100644 index 02251f4..0000000 Binary files a/backup/assets/hero.png and /dev/null differ diff --git a/backup/assets/react.svg b/backup/assets/react.svg deleted file mode 100644 index 6c87de9..0000000 --- a/backup/assets/react.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/backup/assets/vite.svg b/backup/assets/vite.svg deleted file mode 100644 index 5101b67..0000000 --- a/backup/assets/vite.svg +++ /dev/null @@ -1 +0,0 @@ -Vite diff --git a/backup/index.css b/backup/index.css deleted file mode 100644 index 5fb3313..0000000 --- a/backup/index.css +++ /dev/null @@ -1,111 +0,0 @@ -:root { - --text: #6b6375; - --text-h: #08060d; - --bg: #fff; - --border: #e5e4e7; - --code-bg: #f4f3ec; - --accent: #aa3bff; - --accent-bg: rgba(170, 59, 255, 0.1); - --accent-border: rgba(170, 59, 255, 0.5); - --social-bg: rgba(244, 243, 236, 0.5); - --shadow: - rgba(0, 0, 0, 0.1) 0 10px 15px -3px, rgba(0, 0, 0, 0.05) 0 4px 6px -2px; - - --sans: system-ui, 'Segoe UI', Roboto, sans-serif; - --heading: system-ui, 'Segoe UI', Roboto, sans-serif; - --mono: ui-monospace, Consolas, monospace; - - font: 18px/145% var(--sans); - letter-spacing: 0.18px; - color-scheme: light dark; - color: var(--text); - background: var(--bg); - font-synthesis: none; - text-rendering: optimizeLegibility; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; - - @media (max-width: 1024px) { - font-size: 16px; - } -} - -@media (prefers-color-scheme: dark) { - :root { - --text: #9ca3af; - --text-h: #f3f4f6; - --bg: #16171d; - --border: #2e303a; - --code-bg: #1f2028; - --accent: #c084fc; - --accent-bg: rgba(192, 132, 252, 0.15); - --accent-border: rgba(192, 132, 252, 0.5); - --social-bg: rgba(47, 48, 58, 0.5); - --shadow: - rgba(0, 0, 0, 0.4) 0 10px 15px -3px, rgba(0, 0, 0, 0.25) 0 4px 6px -2px; - } - - #social .button-icon { - filter: invert(1) brightness(2); - } -} - -#root { - width: 1126px; - max-width: 100%; - margin: 0 auto; - text-align: center; - border-inline: 1px solid var(--border); - min-height: 100svh; - display: flex; - flex-direction: column; - box-sizing: border-box; -} - -body { - margin: 0; -} - -h1, -h2 { - font-family: var(--heading); - font-weight: 500; - color: var(--text-h); -} - -h1 { - font-size: 56px; - letter-spacing: -1.68px; - margin: 32px 0; - @media (max-width: 1024px) { - font-size: 36px; - margin: 20px 0; - } -} -h2 { - font-size: 24px; - line-height: 118%; - letter-spacing: -0.24px; - margin: 0 0 8px; - @media (max-width: 1024px) { - font-size: 20px; - } -} -p { - margin: 0; -} - -code, -.counter { - font-family: var(--mono); - display: inline-flex; - border-radius: 4px; - color: var(--text-h); -} - -code { - font-size: 15px; - line-height: 135%; - padding: 4px 8px; - background: var(--code-bg); -} diff --git a/backup/main.tsx b/backup/main.tsx deleted file mode 100644 index 2239905..0000000 --- a/backup/main.tsx +++ /dev/null @@ -1,10 +0,0 @@ -import { StrictMode } from 'react'; -import { createRoot } from 'react-dom/client'; -import './index.css'; -import App from './App.tsx'; - -createRoot(document.getElementById('root')!).render( - - - , -); diff --git a/src/api/tmdb.ts b/src/api/tmdb.ts index 7f17b2b..00f8b79 100644 --- a/src/api/tmdb.ts +++ b/src/api/tmdb.ts @@ -1,9 +1,4 @@ -import type { - Movie, - Person, - TmdbResponse, - CreditsResponse, -} from '../types/tmdb'; +import type { Movie, TmdbResponse, CreditsResponse } from '../types/tmdb'; // TOKEN er lagret i root/.env.local, denne må alle legge til manuelt selv // og så må vi finne en løsning for å ha den tilgjengelig på serveren når vi @@ -43,14 +38,7 @@ export function fetchCurrentMovies(): Promise> { export function fetchUpcommingMovies(): Promise> { return tmdbFetch( '/movie/upcoming?language=en-US&page=1', - 'Klarte ikke hente kommende filmer...' - ) -} - -export function fetchPopularPeople(): Promise> { - return tmdbFetch( - '/person/popular?language=en-US&page=1', - 'Klarte ikke hente skuespillere...', + 'Klarte ikke hente kommende filmer...', ); } diff --git a/src/components/MovieDetails.css b/src/components/MovieDetails.css index eed7324..ef7e380 100644 --- a/src/components/MovieDetails.css +++ b/src/components/MovieDetails.css @@ -13,7 +13,7 @@ width: 60vw; max-width: 800px; max-height: 80vh; - overflow: hidden; + overflow: hidden; background: #111; border-radius: 1rem; color: white; @@ -21,8 +21,6 @@ flex-direction: column; } - - .details-backdrop { width: 100%; height: 300px; @@ -51,7 +49,7 @@ .details-content { padding: 1.25rem 1.5rem; text-align: center; - overflow-y: auto; + overflow-y: auto; flex: 1; } diff --git a/src/components/MovieDetails.tsx b/src/components/MovieDetails.tsx index 4870409..072f487 100644 --- a/src/components/MovieDetails.tsx +++ b/src/components/MovieDetails.tsx @@ -2,7 +2,7 @@ import { useMovieCredits } from '../hooks/useMovieCredits'; import type { Movie } from '../types/tmdb'; import { FavoriteButton } from './FavoriteButton'; import './MovieDetails.css'; -import { useEffect, useRef } from 'react'; +import { useCallback, useEffect, useRef } from 'react'; type MovieDetailsProps = { movie: Movie; @@ -30,13 +30,13 @@ export function MovieDetails({ const hasPrev = currentIndex > 0; const hasNext = currentIndex !== -1 && currentIndex < movies.length - 1; - function goPrev() { - if (hasPrev) onNavigate(movies[currentIndex-1]); - } + const goPrev = useCallback(() => { + if (hasPrev) onNavigate(movies[currentIndex - 1]); + }, [hasPrev, movies, currentIndex, onNavigate]); - function goNext() { - if (hasNext) onNavigate(movies[currentIndex+1]); - } + const goNext = useCallback(() => { + if (hasNext) onNavigate(movies[currentIndex + 1]); + }, [hasNext, movies, currentIndex, onNavigate]); useEffect(() => { // Må leses før vi flytter fokus, ellers peker den på dialogen selv. @@ -94,14 +94,13 @@ export function MovieDetails({ document.addEventListener('keydown', handleKeyDown); return () => document.removeEventListener('keydown', handleKeyDown); - }, [onClose]); + }, [onClose, goNext, goPrev]); useEffect(() => { document.body.classList.add('modal-open'); return () => document.body.classList.remove('modal-open'); - }, []); + }, [goNext, goPrev]); - console.log('MovieDetails render', { movieId: movie.id, moviesLength: movies.length, currentIndex, hasPrev, hasNext }); return (
@@ -159,7 +162,7 @@ export function MovieDetails({

{movie.title}

- {movie.release_date} · ★ {(movie.vote_average??0).toFixed(1)} + {movie.release_date} · ★ {(movie.vote_average ?? 0).toFixed(1)}

Sammendrag

diff --git a/src/components/PersonList.tsx b/src/components/PersonList.tsx deleted file mode 100644 index 73db1d8..0000000 --- a/src/components/PersonList.tsx +++ /dev/null @@ -1,15 +0,0 @@ -import type { Person } from '../types/tmdb'; - -type PersonListProps = { - people: Person[]; -}; - -export function PersonList({ people }: PersonListProps) { - return ( -
    - {people.map((person) => ( -
  • {person.name}
    • - ))} -
- ); -} diff --git a/src/components/TrendingPreview.tsx b/src/components/TrendingPreview.tsx index ead13b8..2ebfcaa 100644 --- a/src/components/TrendingPreview.tsx +++ b/src/components/TrendingPreview.tsx @@ -1,4 +1,4 @@ -import { useEffect, useState } from 'react'; +import { useCallback, useEffect, useState } from 'react'; import type { Movie } from '../types/tmdb'; import './TrendingPreview.css'; @@ -9,6 +9,10 @@ type TrendingPreviewProps = { onSelectMovie: (movie: Movie, list: Movie[]) => void; }; +function backdrop(m: Movie) { + return m.backdrop_path ? `${tmdbURL}${m.backdrop_path}` : undefined; +} + export function TrendingPreview({ movies, onSelectMovie, @@ -21,19 +25,22 @@ export function TrendingPreview({ const nextIndex = (index + 1) % movies.length; const movie = movies[index]; - function handleClick(n: number) { - if (transitioning) { - return; - } - setTransitioning(true); - setOffset(-n); + const handleClick = useCallback( + (n: number) => { + if (transitioning) { + return; + } + setTransitioning(true); + setOffset(-n); - setTimeout(() => { - setIndex((i) => (i + n + movies.length) % movies.length); - setOffset(0); - setTransitioning(false); - }, 400); - } + setTimeout(() => { + setIndex((i) => (i + n + movies.length) % movies.length); + setOffset(0); + setTransitioning(false); + }, 400); + }, + [transitioning, movies.length], + ); useEffect(() => { const timer = setInterval(() => { @@ -41,7 +48,7 @@ export function TrendingPreview({ }, 5000); return () => clearInterval(timer); - }, [index, transitioning]); + }, [index, transitioning, handleClick]); return (
@@ -52,21 +59,9 @@ export function TrendingPreview({ transition: transitioning ? 'transform 0.4s ease' : 'none', }} > - - - + + +

{movie.title}

diff --git a/src/hooks/useMovies.ts b/src/hooks/useMovies.ts index 2cf37d0..e93d863 100644 --- a/src/hooks/useMovies.ts +++ b/src/hooks/useMovies.ts @@ -25,7 +25,7 @@ export function useCurMovies() { } export function useUpMovies() { - return useQuery({ + return useQuery({ queryKey: ['movies', 'upcomming'], queryFn: fetchUpcommingMovies, select: (data) => data.results, diff --git a/src/hooks/usePeople.ts b/src/hooks/usePeople.ts deleted file mode 100644 index 8839eb2..0000000 --- a/src/hooks/usePeople.ts +++ /dev/null @@ -1,9 +0,0 @@ -import { useQuery } from '@tanstack/react-query'; -import { fetchPopularPeople } from '../api/tmdb'; - -export function usePopularPeople() { - return useQuery({ - queryKey: ['people', 'popular'], - queryFn: fetchPopularPeople, - }); -} diff --git a/src/layout/MainLayout.tsx b/src/layout/MainLayout.tsx index 6944860..3a784fc 100644 --- a/src/layout/MainLayout.tsx +++ b/src/layout/MainLayout.tsx @@ -20,7 +20,7 @@ export function MainLayout({ }: MainLayoutProps) { const popular = usePopMovies(); const current = useCurMovies(); - const coming = useUpMovies(); + const coming = useUpMovies(); return ( <>