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

src/app/api/movies/route.ts

@@ -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;
 };

src/components/atoms/MovieCard/index.tsx

@@ -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);

src/components/molecules/HeroMovie/index.tsx

@@ -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,6 +196,7 @@ export const HeroMovie: FC<Props> = ({ movieDetails }) => {
                   )}
 
                   {/* Action buttons */}
+                  {!loading && (
                     <div className="flex gap-4 flex-wrap">
                       <Button
                         gradient={
@@ -211,12 +219,18 @@ export const HeroMovie: FC<Props> = ({ movieDetails }) => {
                       <Button
                         theme={isFavorite ? "rose" : "glass"}
                         className={`flex items-center gap-3 ${
-                        isFavorite ? "bg-gradient-to-r border-rose-400/30" : ""
+                          isFavorite
+                            ? "bg-gradient-to-r border-rose-400/30"
+                            : ""
                         }`}
                         onClick={handleToggleFavorite}
                       >
-                      <FaHeart className={isFavorite ? "text-rose-200" : ""} />
-                      {isFavorite ? "Usuń z ulubionych" : "Dodaj do ulubionych"}
+                        <FaHeart
+                          className={isFavorite ? "text-rose-200" : ""}
+                        />
+                        {isFavorite
+                          ? "Usuń z ulubionych"
+                          : "Dodaj do ulubionych"}
                       </Button>
                       <Button
                         theme={isSeen ? "emerald" : "glass"}
@@ -231,6 +245,7 @@ export const HeroMovie: FC<Props> = ({ movieDetails }) => {
                           : "Oznacz jako obejrzany"}
                       </Button>
                     </div>
+                  )}
                 </div>
               </div>
             </div>