From dc32e2a530970e7f058f6cdb2d123063a6824ff9 Mon Sep 17 00:00:00 2001
From: iqbalpa <iqbalpahlevi16@gmail.com>
Date: Fri, 12 Jul 2024 09:23:10 +0700
Subject: [PATCH] feat(auth): create login and logout button in header

---
 src/components/header/header.tsx | 45 +++++++++++++++++++++++++++-----
 1 file changed, 38 insertions(+), 7 deletions(-)

diff --git a/src/components/header/header.tsx b/src/components/header/header.tsx
index 5b33740..f91ebe2 100644
--- a/src/components/header/header.tsx
+++ b/src/components/header/header.tsx
@@ -1,8 +1,15 @@
 'use client';
 
+import { logout } from '@/store/userSlice';
+import { RootState } from '@/store/userStore';
+import { getCookie } from 'cookies-next';
+import { LogIn, LogOut } from 'lucide-react';
 import Link from 'next/link';
-import { usePathname } from 'next/navigation';
+import { usePathname, useRouter } from 'next/navigation';
 import React, { useEffect, useState } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import { toast } from 'react-toastify';
+import 'react-toastify/dist/ReactToastify.css';
 
 const antiHeader: string[] = ['/signup', '/signin'];
 
@@ -13,6 +20,9 @@ const Header: React.FC = () => {
     return null;
   }
 
+  const user = useSelector((state: RootState) => state.user.user);
+  const dispatch = useDispatch();
+  const router = useRouter();
   const [isScrolled, setIsScrolled] = useState(false);
 
   useEffect(() => {
@@ -23,24 +33,45 @@ const Header: React.FC = () => {
         setIsScrolled(false);
       }
     };
-
     window.addEventListener('scroll', handleScroll);
     return () => window.removeEventListener('scroll', handleScroll);
   }, []);
 
+  const handleLogout = () => {
+    dispatch(logout());
+    toast.success('Logged out');
+    setTimeout(() => {
+      router.push('/signin');
+    }, 500);
+  };
+
   return (
     <header
       className={`fixed top-0 z-50 w-full transition-all duration-500 ${
         isScrolled ? 'bg-opacity-100' : 'bg-opacity-10'
       } bg-slate-800`}
     >
-      <div className="container mx-auto flex h-10 items-center justify-between md:h-16">
-        <Link
-          href="/"
-          className="text-lg font-bold text-white md:text-xl lg:text-2xl"
-        >
+      <div className="container mx-auto flex h-10 items-center justify-between px-2 py-2 text-white md:h-16 md:px-6">
+        <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>
+        ) : (
+          <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>
     </header>
   );