gitadmin
/
moviebox
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

refactor: remove Cache-Control header from movie API response; update MovieCard and HeroMovie components to manage 'seen' and 'favorite' states more effectively

This commit is contained in:
Norbert Maciaszek 2025-08-18 13:50:49 +02:00
parent 3c286e705c
commit f6ff7749ae
3 changed files with 68 additions and 52 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/app/api/movies/route.ts
View File

@ -5,10 +5,5 @@ export const GET = async () => {
const movies = await getMovies();
const res = NextResponse.json(movies);
res.headers.set(
"Cache-Control",
"public, max-age=3, stale-while-revalidate=30"
);
return res;
};

10
src/components/atoms/MovieCard/index.tsx
View File

@ -45,11 +45,17 @@ export const MovieCard: FC<Props> = ({
};
const handleSeen = () => {
updateMovieInStore(id, { seen: !movie.seen });
updateMovieInStore(id, {
seen: !movie.seen,
favorite: false,
});
};
const handleFavorite = () => {
updateMovieInStore(id, { favorite: !movie.favorite });
updateMovieInStore(id, {
favorite: !movie.favorite,
seen: movie.seen || !movie.favorite,
});
};
const releaseDate = new Date(movie.release_date);

105
src/components/molecules/HeroMovie/index.tsx
View File

@ -27,6 +27,7 @@ export const HeroMovie: FC<Props> = ({ movieDetails }) => {
const isInStore = !!movieInStore;
const isFavorite = movieInStore?.favorite || false;
const isSeen = movieInStore?.seen || false;
const loading = movies.length === 0;
const formatRuntime = (minutes: number) => {
const hours = Math.floor(minutes / 60);
@ -50,10 +51,13 @@ export const HeroMovie: FC<Props> = ({ movieDetails }) => {
const handleToggleFavorite = () => {
if (!isInStore) {
if (convertedMovie) {
addMovie({ ...convertedMovie, favorite: true });
addMovie({ ...convertedMovie, favorite: true, seen: true });
}
} else {
updateMovie(movieDetails.id, { favorite: !isFavorite });
updateMovie(movieDetails.id, {
favorite: !isFavorite,
seen: isSeen || !isFavorite,
});
}
};
@ -63,7 +67,10 @@ export const HeroMovie: FC<Props> = ({ movieDetails }) => {
addMovie({ ...convertedMovie, seen: true });
}
} else {
updateMovie(movieDetails.id, { seen: !isSeen });
updateMovie(movieDetails.id, {
seen: !isSeen,
favorite: false,
});
}
};
@ -189,48 +196,56 @@ export const HeroMovie: FC<Props> = ({ movieDetails }) => {
)}
{/* Action buttons */}
<div className="flex gap-4 flex-wrap">
<Button
gradient={
isInStore
? {
from: "from-purple-600 hover:from-purple-500",
to: "to-emerald-600 hover:to-emerald-500",
}
: {
from: "from-purple-600 hover:from-purple-500",
to: "to-pink-600 hover:to-pink-500",
}
}
className={`flex items-center gap-3`}
onClick={handleAddToList}
>
<FaBookmark />
{isInStore ? "Usuń z listy" : "Dodaj do listy"}
</Button>
<Button
theme={isFavorite ? "rose" : "glass"}
className={`flex items-center gap-3 ${
isFavorite ? "bg-gradient-to-r border-rose-400/30" : ""
}`}
onClick={handleToggleFavorite}
>
<FaHeart className={isFavorite ? "text-rose-200" : ""} />
{isFavorite ? "Usuń z ulubionych" : "Dodaj do ulubionych"}
</Button>
<Button
theme={isSeen ? "emerald" : "glass"}
className={`flex items-center gap-3 ${
isSeen ? "bg-gradient-to-r border-emerald-400/30" : ""
}`}
onClick={handleToggleSeen}
>
<FaEye className={isSeen ? "text-emerald-200" : ""} />
{isSeen
? "Oznacz jako nieobejrzany"
: "Oznacz jako obejrzany"}
</Button>
</div>
{!loading && (
<div className="flex gap-4 flex-wrap">
<Button
gradient={
isInStore
? {
from: "from-purple-600 hover:from-purple-500",
to: "to-emerald-600 hover:to-emerald-500",
}
: {
from: "from-purple-600 hover:from-purple-500",
to: "to-pink-600 hover:to-pink-500",
}
}
className={`flex items-center gap-3`}
onClick={handleAddToList}
>
<FaBookmark />
{isInStore ? "Usuń z listy" : "Dodaj do listy"}
</Button>
<Button
theme={isFavorite ? "rose" : "glass"}
className={`flex items-center gap-3 ${
isFavorite
? "bg-gradient-to-r border-rose-400/30"
: ""
}`}
onClick={handleToggleFavorite}
>
<FaHeart
className={isFavorite ? "text-rose-200" : ""}
/>
{isFavorite
? "Usuń z ulubionych"
: "Dodaj do ulubionych"}
</Button>
<Button
theme={isSeen ? "emerald" : "glass"}
className={`flex items-center gap-3 ${
isSeen ? "bg-gradient-to-r border-emerald-400/30" : ""
}`}
onClick={handleToggleSeen}
>
<FaEye className={isSeen ? "text-emerald-200" : ""} />
{isSeen
? "Oznacz jako nieobejrzany"
: "Oznacz jako obejrzany"}
</Button>
</div>
)}
</div>
</div>
</div>