From f50f387e9b340698577180fd58c8609e3749f9dd Mon Sep 17 00:00:00 2001
From: iqbalpa <iqbalpahlevi16@gmail.com>
Date: Fri, 12 Jul 2024 12:58:50 +0700
Subject: [PATCH] feat(watchlist): restrict page only for authenticated user

---
 src/components/header/header.tsx    | 30 ++++++++++++++++++-----------
 src/modules/watchlist/watchlist.tsx | 12 +++++++++++-
 2 files changed, 30 insertions(+), 12 deletions(-)

diff --git a/src/components/header/header.tsx b/src/components/header/header.tsx
index 737067c..8231156 100644
--- a/src/components/header/header.tsx
+++ b/src/components/header/header.tsx
@@ -55,14 +55,14 @@ const Header: React.FC = () => {
         <Link href="/" className="text-lg font-bold md:text-xl lg:text-2xl">
           Movies Catalog
         </Link>
-        <div className="flex flex-row items-center gap-5">
-          <Link
-            href="/watchlist"
-            className="rounded-lg bg-slate-200 bg-opacity-5 px-3 py-2 font-semibold duration-150 hover:scale-105 hover:bg-opacity-15 hover:text-slate-200 md:px-4"
-          >
-            Watchlist
-          </Link>
-          {user ? (
+        {user ? (
+          <div className="flex flex-row items-center gap-5">
+            <Link
+              href="/watchlist"
+              className="rounded-lg bg-slate-200 bg-opacity-5 px-3 py-2 font-semibold duration-150 hover:scale-105 hover:bg-opacity-15 hover:text-slate-200 md:px-4"
+            >
+              Watchlist
+            </Link>
             <button
               onClick={handleLogout}
               className="flex cursor-pointer flex-row justify-center rounded-lg border-2 border-red-300 bg-red-300 bg-opacity-90 px-3 py-2 font-bold text-red-500 duration-150 hover:scale-105 hover:bg-red-200 hover:text-red-700 md:px-4"
@@ -70,7 +70,15 @@ const Header: React.FC = () => {
               <p className="mr-2">Logout</p>
               <LogOut />
             </button>
-          ) : (
+          </div>
+        ) : (
+          <div className="flex flex-row items-center gap-5">
+            <Link
+              href="/signin"
+              className="rounded-lg bg-slate-200 bg-opacity-5 px-3 py-2 font-semibold duration-150 hover:scale-105 hover:bg-opacity-15 hover:text-slate-200 md:px-4"
+            >
+              Watchlist
+            </Link>
             <Link
               href="/signin"
               className="flex cursor-pointer flex-row justify-center rounded-lg border-2 border-green-300 bg-green-300 bg-opacity-90 px-3 py-2 font-bold text-green-500 duration-150 hover:scale-105 hover:bg-green-200 hover:text-green-700 md:px-4"
@@ -78,8 +86,8 @@ const Header: React.FC = () => {
               <p className="mr-2">Login</p>
               <LogIn />
             </Link>
-          )}
-        </div>
+          </div>
+        )}
       </div>
     </header>
   );
diff --git a/src/modules/watchlist/watchlist.tsx b/src/modules/watchlist/watchlist.tsx
index 3790e8f..c5df6dc 100644
--- a/src/modules/watchlist/watchlist.tsx
+++ b/src/modules/watchlist/watchlist.tsx
@@ -6,6 +6,9 @@ import { getWatchlist } from '@/api/watchlist.api';
 import { SquareArrowOutUpRight } from 'lucide-react';
 import Image from 'next/image';
 import Link from 'next/link';
+import { useSelector } from 'react-redux';
+import { RootState } from '@/store/userStore';
+import { useRouter } from 'next/navigation';
 
 interface Movie {
   id: number;
@@ -18,10 +21,17 @@ interface Movie {
 const baseUrl = 'https://image.tmdb.org/t/p/original';
 
 const WatchlistModule = () => {
+  const user = useSelector((state: RootState) => state.user.user);
   const [watchlist, setWatchlist] = useState<Movie[]>([]);
   const accessToken = getCookie('accessToken') as string;
+  const router = useRouter();
 
   useEffect(() => {
+    if (!user) {
+      router.push('/signin');
+      return;
+    }
+
     const fetchWatchlist = async () => {
       try {
         const res = await getWatchlist(accessToken);
@@ -33,7 +43,7 @@ const WatchlistModule = () => {
       }
     };
     fetchWatchlist();
-  }, []);
+  }, [user, accessToken]);
 
   return (
     <div className="flex min-h-screen w-full justify-center bg-black pb-14 pt-10 text-white md:pt-20">