fikset filter

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.
 ```

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 ? (
-          <SearchLayout query={query} search={search} isFavorite={isFavorite} toggleFavorite={toggleFavorite} onSelectMovie={setSelectedMovie} />
+          <SearchLayout query={query} search={search} sortBy={sortBy} minRating={minRating} isFavorite={isFavorite} toggleFavorite={toggleFavorite} onSelectMovie={setSelectedMovie} />
         ) : view === 'favoritter' ? (
           <FavoritesLayout
             favoriteIds={favoriteIds}
+            sortBy={sortBy}
+            minRating={minRating}
             isFavorite={isFavorite}
             toggleFavorite={toggleFavorite}
             onSelectMovie={setSelectedMovie}
             />
         ) : (
-          <MainLayout isFavorite={isFavorite} toggleFavorite={toggleFavorite} onSelectMovie={setSelectedMovie} />
+          <MainLayout sortBy={sortBy} minRating={minRating} isFavorite={isFavorite} toggleFavorite={toggleFavorite} onSelectMovie={setSelectedMovie} />
         )}
       </main>
 

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 (
     <Section id="favoritter" title="Favoritter" isLoading={isLoading} error={error}>
-      {movies.length > 0 ? (
-        <MovieList movies={movies} isFavorite={isFavorite} onToggleFavorite={toggleFavorite} onSelectMovie={onSelectMovie} />
+      {filteredMovies.length > 0 ? (
+        <MovieList movies={filteredMovies} isFavorite={isFavorite} onToggleFavorite={toggleFavorite} onSelectMovie={onSelectMovie} />
       ) : (
         <p>Du har ingen favoritter ennå.</p>
       )}

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 && <TrendingPreview movies={current.data} onSelectMovie={onSelectMovie} />}
       </Section>
       <Section id="populaere" title="Populære filmer" isLoading={popular.isLoading} error={popular.error}>
-        {popular.data && <MovieList movies={popular.data} isFavorite={isFavorite} onToggleFavorite={toggleFavorite} onSelectMovie={onSelectMovie} />}
+        {popular.data && <MovieList movies={sortAndFilterMovies(popular.data, sortBy, minRating)} isFavorite={isFavorite} onToggleFavorite={toggleFavorite} onSelectMovie={onSelectMovie} />}
       </Section>
       <Section id="nye-filmer" title="Nye filmer" isLoading={current.isLoading} error={current.error}>
-        {current.data && <MovieList movies={current.data} isFavorite={isFavorite} onToggleFavorite={toggleFavorite} onSelectMovie={onSelectMovie} />}
+        {current.data && <MovieList movies={sortAndFilterMovies(current.data, sortBy, minRating)} isFavorite={isFavorite} onToggleFavorite={toggleFavorite} onSelectMovie={onSelectMovie} />}
       </Section>
       <Section id="skuespillere" title="Skuespillere" isLoading={people.isLoading} error={people.error}>
         {people.data && <PersonList people={people.data.results} />}

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<Movie[], Error>; // 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 (
     <Section id="sok" title={`Søkeresultater for "${query}"`} isLoading={search.isLoading} error={search.error}>
       {search.data && (
-        <MovieList movies={search.data} isFavorite={isFavorite} onToggleFavorite={toggleFavorite} onSelectMovie={onSelectMovie} />
+        <MovieList movies={sortAndFilterMovies(search.data, sortBy, minRating)} isFavorite={isFavorite} onToggleFavorite={toggleFavorite} onSelectMovie={onSelectMovie} />
       )}
     </Section>
   );