fix(header): handle header for unauthenticated user

iqbalpa · Jul 15, 2024 · 0788a4d · 0788a4d
1 parent c815ff1
commit 0788a4d
Show file tree

Hide file tree

Showing 2 changed files with 44 additions and 14 deletions.
diff --git a/src/components/dropdown/dropdown.tsx b/src/components/dropdown/dropdown.tsx
@@ -1,25 +1,53 @@
 import React from 'react';
 import Link from 'next/link';
+import { useSelector } from 'react-redux';
+import { RootState } from '@/store/store';
+
+interface IDropdown {
+  isScrolled: boolean;
+  handleLogout: () => void;
+}
+
+const Dropdown: React.FC<IDropdown> = ({ isScrolled, handleLogout }) => {
+  const user = useSelector((state: RootState) => state.user.user);
 
-const Dropdown: React.FC<{ isScrolled: boolean }> = ({ isScrolled }) => {
   return (
     <div
       className={`flex w-full flex-col transition-all duration-500 ${
         isScrolled ? 'bg-opacity-100' : 'bg-opacity-10'
       } bg-slate-800 text-center text-white`}
     >
-      <Link
-        href="/watchlist"
-        className="py-2 duration-150 hover:scale-105 hover:bg-slate-900 hover:bg-opacity-50 hover:font-semibold"
-      >
-        Watchlist
-      </Link>
-      <Link
-        href="signin"
-        className="py-2 duration-150 hover:scale-105 hover:bg-slate-900 hover:bg-opacity-50 hover:font-semibold"
-      >
-        Login
-      </Link>
+      {user ? (
+        <>
+          <Link
+            href="/watchlist"
+            className="py-2 duration-150 hover:scale-105 hover:bg-slate-900 hover:bg-opacity-50 hover:font-semibold"
+          >
+            Watchlist
+          </Link>
+          <button
+            onClick={handleLogout}
+            className="py-2 duration-150 hover:scale-105 hover:bg-slate-900 hover:bg-opacity-50 hover:font-semibold"
+          >
+            Logout
+          </button>
+        </>
+      ) : (
+        <>
+          <Link
+            href="/signin"
+            className="py-2 duration-150 hover:scale-105 hover:bg-slate-900 hover:bg-opacity-50 hover:font-semibold"
+          >
+            Watchlist
+          </Link>
+          <Link
+            href="/signin"
+            className="py-2 duration-150 hover:scale-105 hover:bg-slate-900 hover:bg-opacity-50 hover:font-semibold"
+          >
+            Login
+          </Link>
+        </>
+      )}
     </div>
   );
 };

diff --git a/src/components/header/header.tsx b/src/components/header/header.tsx
@@ -100,7 +100,9 @@ const Header: React.FC = () => {
           )}
         </div>
       </div>
-      {isOpen && <Dropdown isScrolled={isScrolled} />}
+      {isOpen && (
+        <Dropdown isScrolled={isScrolled} handleLogout={handleLogout} />
+      )}
     </header>
   );
 };