- Added a Dashboard button on the header for authenticated users, to enable them to navigate back to their profile.

OzPol · OzPol · commit 7a5fd80887d5 · 2024-08-06T16:57:49.000-04:00
diff --git a/components/Header.tsx b/components/Header.tsx
@@ -11,21 +11,26 @@ import { logout } from '../lib/authUtils';
 const Header: React.FC = () => {
   const router = useRouter();
   const [isLoggedIn, setIsLoggedIn] = useState(false);
+  const [userType, setUserType] = useState<string | null>(null);
 
   const checkAuth = async () => {
     try {
       // Retrieve session info from local storage
       const session = JSON.parse(localStorage.getItem('appwriteSession') || '{}');
-      if (session && session.userId) {
+      const type = localStorage.getItem('userType');
+      if (session && session.userId && type) {
         setIsLoggedIn(true);
+        setUserType(type);
         console.log('Logged in.');
       } else {
         setIsLoggedIn(false);
+        setUserType(null);
         console.log('Not logged in.');
       }
     } catch (error) {
       console.error('Error checking login status', error);
       setIsLoggedIn(false);
+      setUserType(null);
     }
   };
 
@@ -46,12 +51,15 @@ const Header: React.FC = () => {
     try {
       await logout();
       setIsLoggedIn(false);
+      setUserType(null);
       router.push('/');
     } catch (error) {
       console.error('Error logging out', error);
     }
   };
 
+  const dashboardLink = userType === 'Customer' ? '/customerProfile' : '/serviceProfile';
+
   return (
     <header className="flex justify-between items-center bg-blue-500 p-4 w-full">
       <h1 className="text-xl font-bold text-white">ProBooker</h1>
@@ -73,6 +81,9 @@ const Header: React.FC = () => {
           </>
         ) : (
           <>
+            <Link href={dashboardLink} legacyBehavior>
+              <a className="bg-white text-blue-500 py-2 px-4 rounded hover:bg-blue-100">Dashboard</a>
+            </Link>
             <button
               className="bg-white text-blue-500 py-2 px-4 rounded hover:bg-blue-100"
               onClick={handleLogout}
diff --git a/pages/index.tsx b/pages/index.tsx
@@ -2,11 +2,9 @@
 import Head from 'next/head';
 import Link from 'next/link';
 import { useEffect, useState } from 'react';
-import { useRouter } from 'next/router';
-import { account } from '../lib/appwrite.config';
 
 export default function Home() {
-  const router = useRouter();
+
   const [userType, setUserType] = useState<string | null>(null);
 
   useEffect(() => {
@@ -28,17 +26,6 @@ export default function Home() {
     fetchSession();
   }, []);
 
-  const handleLogout = async () => {
-    try {
-      await account.deleteSession('current');
-      localStorage.removeItem('appwriteSession');
-      localStorage.removeItem('userType');
-      router.push('/customer-login');
-    } catch (error) {
-      console.error('Error logging out:', error);
-    }
-  };
-
   return (
     <div className="min-h-[81vh] flex flex-col justify-center items-center homepage-background">
       <Head>
@@ -50,25 +37,17 @@ export default function Home() {
       <main className="relative z-10 flex flex-col md:flex-row justify-center items-center py-8 w-full flex-1">
         {userType ? (
           <div className="flex flex-col items-center space-y-4 p-8 bg-white bg-opacity-80 rounded-md shadow-lg md:w-3/2">
-            <h1 className="text-4xl font-bold mb-2">Welcome, {userType}</h1>
-            {userType === 'Customer' && (
+            {userType === 'Customer' ? (
               <>
-                <p>Customer-specific content here.</p>
-                {/* Add other customer-specific components or content */}
+                <h1 className="text-4xl font-bold mb-2">Looking for inspirations?!</h1>
+                <p className="text-lg">Check out our latest services and offers tailored just for you.</p>
               </>
-            )}
-            {userType === 'Provider' && (
+            ) : (
               <>
-                <p>Provider-specific content here.</p>
-                {/* Add other provider-specific components or content */}
+                <h1 className="text-4xl font-bold mb-2">Hey there, Pro!</h1>
+                <p className="text-lg">Wanna check out some tips and resources to help grow your business?</p>
               </>
             )}
-            <button
-              onClick={handleLogout}
-              className="mt-4 bg-red-500 text-white py-2 px-4 rounded"
-            >
-              Logout
-            </button>
           </div>
         ) : (
           <div className="flex flex-col items-center space-y-4 p-8 bg-white bg-opacity-80 rounded-md shadow-lg md:w-3/2">
