From 75be1e23515cce019e361986352402221a046fc2 Mon Sep 17 00:00:00 2001 From: LeonaS Date: Wed, 16 Sep 2026 12:59:53 +0100 Subject: [PATCH] fikset filter --- README.md | 26 ++++++++++++++++++++++++++ src/App.tsx | 13 ++++--------- src/layout/FavoritesLayout.tsx | 10 +++++++--- src/layout/MainLayout.tsx | 9 ++++++--- src/layout/SearchLayout.tsx | 7 +++++-- 5 files changed, 48 insertions(+), 17 deletions(-) diff --git a/README.md b/README.md index 44d8a9f..0a456af 100644 --- a/README.md +++ b/README.md @@ -169,4 +169,30 @@ Leona: Bruk av KI Løsningen (hook, ren funksjon for sortering/filtrering, UI-komponent og kobling i `App.tsx`) ble utviklet i samarbeid med Claude (Anthropic). KI ble brukt til å foreslå arkitektur (separasjon mellom persistens-hook, ren logikk-funksjon og presentasjonskomponent), generere startkode, og til å vurdere om løsningen faktisk dekket prosjektkravene til filtrering/sortering og bruk av Web Storage API. Koden er gjennomgått og forstått av gruppen før den ble tatt i bruk. + +Leona: + Oversikt: Fiks av filtrering/sortering + Problem: Filtrerings- og sorteringskontrollene (dropdown for sortering og slider for min. vurdering) i SortFilterBar oppdaterte state, men påvirket ingen filmlister. Ingenting skjedde når man endret dem. + + Årsak: Funksjonen sortAndFilterMovies (i src/utils/sortAndFilterMovies.ts) fantes, men ble aldri kalt noe sted. Importen av den i App.tsx var kommentert ut i en tidligere commit (f8a0241, "fikset vite.config.js og App.tsx slik at prosjektet bygges"), fordi TypeScript feilet på ubrukt import under bygg. I tillegg ble sortBy/minRating aldri sendt videre fra App.tsx til de tre layout-komponentene som faktisk viser filmlister. + + Løsning: + + Fjernet den utkommenterte importen i src/App.tsx. + sortBy og minRating sendes nå som props fra App.tsx til SearchLayout, MainLayout og FavoritesLayout. + Hver av disse tre komponentene kjører nå sortAndFilterMovies(...) på filmlisten sin før den rendres i MovieList. + Endrede filer: + + src/App.tsx + src/layout/SearchLayout.tsx + src/layout/MainLayout.tsx + src/layout/FavoritesLayout.tsx + Ikke endret: TrendingPreview-banneret i MainLayout (viser trending-filmer uavhengig av filter), samt selve sortAndFilterMovies-logikken (den var allerede korrekt, bare ubrukt). + + Bruk av KI + KI (Claude, Anthropic) ble brukt til å finne årsaken til at filtrerings-/sorteringskontrollene ikke hadde noen effekt: ved å spore koden fant KI at importen av sortAndFilterMovies i App.tsx var kommentert ut (fra en tidligere commit som fikset et build-problem forårsaket av at funksjonen på det tidspunktet var ubrukt), og at sortBy/minRating aldri ble sendt videre til layout-komponentene som faktisk viser filmlister. + + KI ble videre brukt til å implementere fiksen: gjenopprette importen, legge sortBy og minRating til som props på SearchLayout, MainLayout og FavoritesLayout, og kalle sortAndFilterMovies(...) på riktig filmliste i hver av disse komponentene før den sendes til MovieList. + + Løsningen ble verifisert med `tsc --noEmit` og `npm run build` (begge grønne), og gjennomgått og forstått av gruppen før den ble tatt i bruk. ``` diff --git a/src/App.tsx b/src/App.tsx index bf37b4c..7f27788 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -3,13 +3,6 @@ import { useState } from 'react'; import { useSearchMovies } from './hooks/useMovies'; import { useDebouncedValue } from './hooks/useDebouncedValue'; -// TODO – Fix dette: -/* Brukes denne til noe Leona? */ -// denne må være kommentert ut for at prosjektet kan bygges -// til nå har den stått som ubrukt, antar at dette er feil, -// men måtte fjerne for å teste webserver på vm -//import { sortAndFilterMovies, type SortOption } from './utils/sortAndFilterMovies'; - import { type SortOption } from './utils/sortAndFilterMovies'; import { useSessionStorage } from './hooks/useSessionStorage'; @@ -67,16 +60,18 @@ function App() { onMinRatingChange={setMinRating} /> {isSearching ? ( - + ) : view === 'favoritter' ? ( ) : ( - + )} diff --git a/src/layout/FavoritesLayout.tsx b/src/layout/FavoritesLayout.tsx index fb81658..1b8b703 100644 --- a/src/layout/FavoritesLayout.tsx +++ b/src/layout/FavoritesLayout.tsx @@ -2,21 +2,25 @@ import { Section } from "../components/Section"; import { MovieList } from "../components/MovieList"; import { useFavoriteMovies } from "../hooks/useMovies"; import type { Movie } from "../types/tmdb"; +import { sortAndFilterMovies, type SortOption } from "../utils/sortAndFilterMovies"; type FavoritesLayoutProps = { favoriteIds: number[]; + sortBy: SortOption; + minRating: number; isFavorite: (id: number) => boolean; toggleFavorite: (id: number) => void; onSelectMovie: (movie: Movie) => void; }; -export function FavoritesLayout({ favoriteIds, isFavorite, toggleFavorite, onSelectMovie }: FavoritesLayoutProps) { +export function FavoritesLayout({ favoriteIds, sortBy, minRating, isFavorite, toggleFavorite, onSelectMovie }: FavoritesLayoutProps) { const { movies, isLoading, error } = useFavoriteMovies(favoriteIds); + const filteredMovies = sortAndFilterMovies(movies, sortBy, minRating); return (
- {movies.length > 0 ? ( - + {filteredMovies.length > 0 ? ( + ) : (

Du har ingen favoritter ennå.

)} diff --git a/src/layout/MainLayout.tsx b/src/layout/MainLayout.tsx index dba57e7..0e95337 100644 --- a/src/layout/MainLayout.tsx +++ b/src/layout/MainLayout.tsx @@ -5,15 +5,18 @@ import { TrendingPreview } from "../components/TrendingPreview"; import { useCurMovies, usePopMovies } from "../hooks/useMovies"; import { usePopularPeople } from "../hooks/usePeople"; import type { Movie } from "../types/tmdb"; +import { sortAndFilterMovies, type SortOption } from "../utils/sortAndFilterMovies"; type MainLayoutProps = { + sortBy: SortOption; + minRating: number; isFavorite: (id: number) => boolean; toggleFavorite: (id: number) => void; onSelectMovie: (movie: Movie) => void; } // HomeSections.tsx -export function MainLayout({ isFavorite, toggleFavorite, onSelectMovie }: MainLayoutProps) { +export function MainLayout({ sortBy, minRating, isFavorite, toggleFavorite, onSelectMovie }: MainLayoutProps) { const popular = usePopMovies(); const current = useCurMovies(); const people = usePopularPeople(); @@ -24,10 +27,10 @@ export function MainLayout({ isFavorite, toggleFavorite, onSelectMovie }: MainLa {current.data && }
- {popular.data && } + {popular.data && }
- {current.data && } + {current.data && }
{people.data && } diff --git a/src/layout/SearchLayout.tsx b/src/layout/SearchLayout.tsx index 0bd187d..d6a12ac 100644 --- a/src/layout/SearchLayout.tsx +++ b/src/layout/SearchLayout.tsx @@ -2,20 +2,23 @@ import type { UseQueryResult } from "@tanstack/react-query"; import type { Movie } from "../types/tmdb"; import { Section } from "../components/Section"; import { MovieList } from "../components/MovieList"; +import { sortAndFilterMovies, type SortOption } from "../utils/sortAndFilterMovies"; type SearchSectionProps = { query: string; search: UseQueryResult; // or whatever your hook returns + sortBy: SortOption; + minRating: number; isFavorite: (id: number) => boolean; toggleFavorite: (id: number) => void; onSelectMovie: (movie: Movie) => void; }; -export function SearchLayout({ query, search, isFavorite, toggleFavorite, onSelectMovie }: SearchSectionProps) { +export function SearchLayout({ query, search, sortBy, minRating, isFavorite, toggleFavorite, onSelectMovie }: SearchSectionProps) { return (
{search.data && ( - + )}
);