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 movies = await getMovies();
const res = NextResponse.json(movies); const res = NextResponse.json(movies);
res.headers.set(
"Cache-Control",
"public, max-age=3, stale-while-revalidate=30"
);
return res; return res;
}; };

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

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