feat(watchlist): restrict page only for authenticated user

iqbalpa · Jul 12, 2024 · f50f387 · f50f387
1 parent ef83721
commit f50f387
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 12 deletions.
diff --git a/src/components/header/header.tsx b/src/components/header/header.tsx
@@ -55,31 +55,39 @@ 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"
             >
               <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"
             >
               <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
@@ -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">