From f6ff7749ae23245dc87b2bbe63417501bbb0bdbc Mon Sep 17 00:00:00 2001
From: Norbert Maciaszek <norbert@ambiscale.com>
Date: Mon, 18 Aug 2025 13:50:49 +0200
Subject: [PATCH] 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 -
 src/components/atoms/MovieCard/index.tsx     |  10 +-
 src/components/molecules/HeroMovie/index.tsx | 105 +++++++++++--------
 3 files changed, 68 insertions(+), 52 deletions(-)

diff --git a/src/app/api/movies/route.ts b/src/app/api/movies/route.ts
index bc71a12..776cc8a 100644
--- a/src/app/api/movies/route.ts
+++ b/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;
 };
diff --git a/src/components/atoms/MovieCard/index.tsx b/src/components/atoms/MovieCard/index.tsx
index b55ad95..8455ca5 100644
--- a/src/components/atoms/MovieCard/index.tsx
+++ b/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);
diff --git a/src/components/molecules/HeroMovie/index.tsx b/src/components/molecules/HeroMovie/index.tsx
index 6b9a86e..61b6930 100644
--- a/src/components/molecules/HeroMovie/index.tsx
+++ b/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,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>