Favorites

src/App.tsx

@@ -10,6 +10,7 @@ import { useSessionStorage } from './hooks/useSessionStorage';
 import { SortFilterBar } from './components/SortFilterBar';
 import { useFavorites } from './hooks/useFavorites';
 import { MovieDetails } from './components/MovieDetails';
+import { FavoritesLayout } from './layout/FavoritesLayout';
 
 // layout templates og components
 import { SearchLayout } from './layout/SearchLayout';
@@ -20,9 +21,6 @@ import { Sidebar } from './components/Sidebar';
 import type { Movie } from './types/tmdb';
 
 
-//importerer favoritespage siden
-import { FavoritesPage } from './components/FavoritesPage';
-
 import './App.css';
 
 
@@ -44,9 +42,9 @@ function App() {
   // lagre search querys for hele session (inc. reload)
 
   // favorite-funksjonalitet
-  const { isFavorite, toggleFavorite} = useFavorites();
+  const { isFavorite, toggleFavorite, favoriteIds} = useFavorites();
 
-  //Dette er for FavoritesPage siden
+  //styrer hvilken visning som vises
   const [view, setView] = useSessionStorage<'hjem' | 'favoritter'>('view', 'hjem');
 
   return (
@@ -65,7 +63,12 @@ function App() {
         {isSearching ? (
           <SearchLayout query={query} search={search} isFavorite={isFavorite} toggleFavorite={toggleFavorite} onSelectMovie={setSelectedMovie} />
         ) : view === 'favoritter' ? (
-          <FavoritesPage />
+          <FavoritesLayout
+            favoriteIds={favoriteIds}
+            isFavorite={isFavorite}
+            toggleFavorite={toggleFavorite}
+            onSelectMovie={setSelectedMovie}
+            />
         ) : (
           <MainLayout isFavorite={isFavorite} toggleFavorite={toggleFavorite} onSelectMovie={setSelectedMovie} />
         )}

src/api/tmdb.ts

@@ -42,8 +42,10 @@ export function fetchMovieCredits(movieId: number): Promise<CreditsResponse> {
     `/movie/${movieId}/credits?language=en-US`,
     'Klarte ikke hente skuespillere...',
   );
+}
 
-
+export function fetchMovieById(movieId: number): Promise<Movie> {
+  return tmdbFetch<Movie>(`/movie/${movieId}?language=en-US`, 'Klarte ikke hente film...');
 }
 
 

src/components/FavoriteButton.css

@@ -5,5 +5,5 @@
   cursor: pointer;
   line-height: 1;
   font-size: 1.5rem;
-  color: #fbc02d;
+  color: #f90404;
 }

src/components/FavoriteButton.tsx

@@ -21,7 +21,7 @@ export function FavoriteButton({ movie, className, isFavorite, onToggleFavorite
         onToggleFavorite(movie.id);
       }}
     >
-      {isFavorite ? "★" : "☆"}
+      {isFavorite ? "♥" : "♡"}
     </button>
   );
 }

src/components/MovieCard.tsx

@@ -31,15 +31,14 @@ function MovieCard({ movie, isFavorite, onToggleFavorite, onSelectMovie }: Movie
   // Viser kun de 3 første, sortert etter TMDB sin billed-rekkefølge
   const topActors = credits?.cast.slice(0, 3) ?? [];
   // TMDB sin vote_average går fra 0-10, vi ganger med 10 for å få prosent (0-100)
-  const rating = Math.round(movie.vote_average * 10);
+  //const rating = Math.round(movie.vote_average * 10);
   const path = movie.poster_path?`https://image.tmdb.org/t/p/w200${movie.poster_path}`:"";
 
   return (
     <div className="movie-card" onClick={() => {onSelectMovie(movie) }}>
       <FavoriteButton className="movie-card__favorite" movie={movie} isFavorite={isFavorite} onToggleFavorite={onToggleFavorite} />
 
-      <span className="movie-card__rating">{rating}%</span>
-
+<span className="movie-card__rating">★ {movie.vote_average.toFixed(1)}</span>
       <img className="movie-card__poster" src={path} alt={movie.title} />
 
       <div className="movie-card__info">

src/components/MovieDetails.css

@@ -47,6 +47,7 @@
 
 .details-content h2 {
   margin: 0 0 0.25rem;
+  color: beige;
 }
 
 .details-meta {

src/hooks/useFavorites.ts

@@ -22,4 +22,4 @@ export function useFavorites() {
     return favoriteIds.includes(id);
   }
 
-return { toggleFavorite, isFavorite};}
+return { toggleFavorite, isFavorite, favoriteIds};}

src/hooks/useMovies.ts

@@ -1,6 +1,6 @@
 // hooks/useMovies.ts
-import { useQuery } from '@tanstack/react-query'
-import { fetchCurrentMovies, fetchPopularMovies, fetchSearchMovies } from '../api/tmdb'
+import { useQuery, useQueries } from '@tanstack/react-query'
+import { fetchCurrentMovies, fetchPopularMovies, fetchSearchMovies, fetchMovieById } from '../api/tmdb'
 
 export function usePopMovies() {
   return useQuery({
@@ -25,4 +25,19 @@ export function useSearchMovies(query: string) {
     enabled: query.trim().length > 0,
     select: (data) => data.results,
   })
+}
+
+export function useFavoriteMovies(ids: number[]) {
+  const results = useQueries({
+    queries: ids.map((id) => ({
+      queryKey: ['movies', 'detail', id],
+      queryFn: () => fetchMovieById(id),
+    })),
+  })
+
+  return {
+    movies: results.filter((r) => r.data).map((r) => r.data!),
+    isLoading: results.some((r) => r.isLoading),
+    error: results.find((r) => r.error)?.error ?? null,
+  }
 }

src/layout/FavoritesLayout.tsx

@@ -0,0 +1,25 @@
+import { Section } from "../components/Section";
+import { MovieList } from "../components/MovieList";
+import { useFavoriteMovies } from "../hooks/useMovies";
+import type { Movie } from "../types/tmdb";
+
+type FavoritesLayoutProps = {
+  favoriteIds: number[];
+  isFavorite: (id: number) => boolean;
+  toggleFavorite: (id: number) => void;
+  onSelectMovie: (movie: Movie) => void;
+};
+
+export function FavoritesLayout({ favoriteIds, isFavorite, toggleFavorite, onSelectMovie }: FavoritesLayoutProps) {
+  const { movies, isLoading, error } = useFavoriteMovies(favoriteIds);
+
+  return (
+    <Section id="favoritter" title="Favoritter" isLoading={isLoading} error={error}>
+      {movies.length > 0 ? (
+        <MovieList movies={movies} isFavorite={isFavorite} onToggleFavorite={toggleFavorite} onSelectMovie={onSelectMovie} />
+      ) : (
+        <p>Du har ingen favoritter ennå.</p>
+      )}
+    </Section>
+  );
+}