feat(watchlist): create watchlist page

src/api/watchlist.api.ts

@@ -0,0 +1,21 @@
+import axios from 'axios';
+
+const BASE_URL: string = 'http://localhost:3000';
+
+interface Movie {
+  id: number;
+  title: string;
+  overview: string;
+  release_date: string;
+  userId: number;
+}
+
+export const getWatchlist = async (accessToken: string): Promise<Movie[]> => {
+  const res = await axios.get(`${BASE_URL}/movies/watchlist`, {
+    headers: {
+      Authorization: `Bearer ${accessToken}`,
+    },
+  });
+  const movies: Movie[] = res.data;
+  return movies;
+};

src/app/watchlist/page.tsx

@@ -0,0 +1,5 @@
+import WatchlistModule from '@/modules/watchlist/watchlist';
+
+export default function Page() {
+  return <WatchlistModule />;
+}

src/components/header/header.tsx

@@ -55,23 +55,31 @@ const Header: React.FC = () => {
         <Link href="/" className="text-lg font-bold md:text-xl lg:text-2xl">
           Movies Catalog
         </Link>
-        {user ? (
-          <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 className="flex flex-row items-center gap-5">
           <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"
+            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"
           >
-            <p className="mr-2">Login</p>
-            <LogIn />
+            Watchlist
           </Link>
-        )}
+          {user ? (
+            <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>
+          ) : (
+            <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>
     </header>
   );

src/modules/watchlist/watchlist.tsx

@@ -0,0 +1,71 @@
+'use client';
+
+import React, { useEffect, useState } from 'react';
+import { getCookie } from 'cookies-next';
+import { getWatchlist } from '@/api/watchlist.api';
+import { SquareArrowOutUpRight } from 'lucide-react';
+import Link from 'next/link';
+
+interface Movie {
+  id: number;
+  title: string;
+  overview: string;
+  release_date: string;
+  userId: number;
+}
+
+const WatchlistModule = () => {
+  const [watchlist, setWatchlist] = useState<Movie[]>([]);
+  const accessToken = getCookie('accessToken') as string;
+
+  useEffect(() => {
+    const fetchWatchlist = async () => {
+      try {
+        const res = await getWatchlist(accessToken);
+        console.log('WATCHLIST');
+        console.log(res);
+        setWatchlist(res);
+      } catch (e) {
+        console.log(e);
+      }
+    };
+    fetchWatchlist();
+  }, []);
+
+  return (
+    <div className="flex min-h-screen w-full justify-center bg-black pt-20 text-white">
+      {watchlist.length === 0 ? (
+        <div className="flex min-h-screen w-full items-center justify-center text-xl font-semibold">
+          Your watchlist is empty :{`(`}
+        </div>
+      ) : (
+        <div className="flex flex-col px-4 md:px-10">
+          <h1 className="m-3 text-center text-lg font-bold md:text-xl lg:text-2xl">
+            Watchlist
+          </h1>
+          <div className="w-full border-t-[1px] border-slate-500"></div>
+          <div className="flex flex-col items-center">
+            {watchlist.map((movie, index) => (
+              <div className="flex w-full flex-row items-center gap-3 border-b-[1px] border-slate-500 p-2">
+                <div className="flex w-full flex-col gap-1">
+                  <p className="text-sm font-semibold md:text-base">
+                    {movie.title} {movie.release_date.split('-')[0]}
+                  </p>
+                  <p className="text-xs md:text-sm">{movie.overview}</p>
+                </div>
+                <Link
+                  href={`/${movie.id}`}
+                  className="rounded-md p-1 duration-150 hover:cursor-pointer hover:bg-slate-200 hover:bg-opacity-15"
+                >
+                  <SquareArrowOutUpRight />
+                </Link>
+              </div>
+            ))}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default WatchlistModule;