From 70d3d293048b43f34ec32ca17f7aee7b3a676f6d Mon Sep 17 00:00:00 2001 From: johannes Date: Tue, 15 Sep 2026 12:53:07 +0200 Subject: [PATCH 1/4] changed favorite symbol from star to heart --- src/components/FavoriteButton.css | 2 +- src/components/FavoriteButton.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/FavoriteButton.css b/src/components/FavoriteButton.css index 6c48dc5..b6e64b4 100644 --- a/src/components/FavoriteButton.css +++ b/src/components/FavoriteButton.css @@ -5,5 +5,5 @@ cursor: pointer; line-height: 1; font-size: 1.5rem; - color: #fbc02d; + color: #f90404; } \ No newline at end of file diff --git a/src/components/FavoriteButton.tsx b/src/components/FavoriteButton.tsx index 75d2313..7914085 100644 --- a/src/components/FavoriteButton.tsx +++ b/src/components/FavoriteButton.tsx @@ -21,7 +21,7 @@ export function FavoriteButton({ movie, className, isFavorite, onToggleFavorite onToggleFavorite(movie.id); }} > - {isFavorite ? "★" : "☆"} + {isFavorite ? "♥" : "♡"} ); } \ No newline at end of file From bfc1f9f0dddac7778a0f787a9050b4e8d2b8629f Mon Sep 17 00:00:00 2001 From: johannes Date: Tue, 15 Sep 2026 15:43:37 +0200 Subject: [PATCH 2/4] small UI change --- src/components/MovieDetails.css | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/MovieDetails.css b/src/components/MovieDetails.css index c5478ed..b19ac2b 100644 --- a/src/components/MovieDetails.css +++ b/src/components/MovieDetails.css @@ -47,6 +47,7 @@ .details-content h2 { margin: 0 0 0.25rem; + color: beige; } .details-meta { From ec7b7269b8b0a462ee58804297c694fe499cfe5e Mon Sep 17 00:00:00 2001 From: johannes Date: Tue, 15 Sep 2026 16:40:10 +0200 Subject: [PATCH 3/4] connected favorite layout to favorite in sidebar --- src/App.tsx | 13 ++++++++----- src/api/tmdb.ts | 4 +++- src/components/FavoritesPage.tsx | 8 -------- src/hooks/useFavorites.ts | 2 +- src/hooks/useMovies.ts | 19 +++++++++++++++++-- 5 files changed, 29 insertions(+), 17 deletions(-) delete mode 100644 src/components/FavoritesPage.tsx diff --git a/src/App.tsx b/src/App.tsx index 44532b9..134fa72 100644 --- a/src/App.tsx +++ b/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,7 +42,7 @@ 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 const [view, setView] = useSessionStorage<'hjem' | 'favoritter'>('view', 'hjem'); @@ -65,7 +63,12 @@ function App() { {isSearching ? ( ) : view === 'favoritter' ? ( - + ) : ( )} diff --git a/src/api/tmdb.ts b/src/api/tmdb.ts index a837d11..b0bfde3 100644 --- a/src/api/tmdb.ts +++ b/src/api/tmdb.ts @@ -42,8 +42,10 @@ export function fetchMovieCredits(movieId: number): Promise { `/movie/${movieId}/credits?language=en-US`, 'Klarte ikke hente skuespillere...', ); +} - +export function fetchMovieById(movieId: number): Promise { + return tmdbFetch(`/movie/${movieId}?language=en-US`, 'Klarte ikke hente film...'); } diff --git a/src/components/FavoritesPage.tsx b/src/components/FavoritesPage.tsx deleted file mode 100644 index 38eb5d7..0000000 --- a/src/components/FavoritesPage.tsx +++ /dev/null @@ -1,8 +0,0 @@ -export function FavoritesPage() { - return ( -
-

Favoritter

-

Ingen favoritter vises ennå.

-
- ); -} \ No newline at end of file diff --git a/src/hooks/useFavorites.ts b/src/hooks/useFavorites.ts index 06100a7..e671f53 100644 --- a/src/hooks/useFavorites.ts +++ b/src/hooks/useFavorites.ts @@ -22,4 +22,4 @@ export function useFavorites() { return favoriteIds.includes(id); } -return { toggleFavorite, isFavorite};} \ No newline at end of file +return { toggleFavorite, isFavorite, favoriteIds};} diff --git a/src/hooks/useMovies.ts b/src/hooks/useMovies.ts index 24fc303..6259d9c 100644 --- a/src/hooks/useMovies.ts +++ b/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, + } } \ No newline at end of file From 07322da0e4088cc9322e16997db8021924435c38 Mon Sep 17 00:00:00 2001 From: johannes Date: Tue, 15 Sep 2026 17:01:31 +0200 Subject: [PATCH 4/4] changed from percent to stars on moviecard --- src/App.tsx | 2 +- src/components/MovieCard.tsx | 5 ++--- 2 files changed, 3 insertions(+), 4 deletions(-) diff --git a/src/App.tsx b/src/App.tsx index 134fa72..6a0a878 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -44,7 +44,7 @@ function App() { // favorite-funksjonalitet const { isFavorite, toggleFavorite, favoriteIds} = useFavorites(); - //Dette er for FavoritesPage siden + //styrer hvilken visning som vises const [view, setView] = useSessionStorage<'hjem' | 'favoritter'>('view', 'hjem'); return ( diff --git a/src/components/MovieCard.tsx b/src/components/MovieCard.tsx index 7396674..204eea3 100644 --- a/src/components/MovieCard.tsx +++ b/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 (
{onSelectMovie(movie) }}> - {rating}% - +★ {movie.vote_average.toFixed(1)} {movie.title}