cardosofelipe/eventspace
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add a navbar component and refactor dashboard logic

Browse Source 
Introduce a reusable Navbar component to streamline navigation and hide it on public pages. Simplify dashboard logic by removing redundant authentication checks and improve layout structure. Enhances user experience with a cleaner and more maintainable codebase.
This commit is contained in:
Felipe Cardoso
2025-03-05 11:04:39 +01:00
parent 1b453e80c9
commit c3da4bbaef
2 changed files with 104 additions and 60 deletions
Download Patch File Download Diff File Expand all files Collapse all files

90
frontend/src/app/(main)/dashboard/page.tsx
View File

@@ -2,32 +2,10 @@
"use client"; "use client";
import { useAuth } from "@/context/auth-context"; import { useAuth } from "@/context/auth-context";
import { useRouter } from "next/navigation"; import Navbar from "@/components/layout/navbar";
import { useEffect } from "react";
export default function DashboardPage() { export default function DashboardPage() {
const { user, isLoading, isAuthenticated, logout } = useAuth(); const { user, isLoading } = useAuth();
const router = useRouter();
// Redirect to login if not authenticated
useEffect(() => {
// Add a small delay to ensure context is fully updated
const checkAuth = setTimeout(() => {
if (!isLoading && !isAuthenticated) {
console.log("Not authenticated, redirecting to login");
router.push("/login");
}
}, 100);
return () => clearTimeout(checkAuth);
}, [isLoading, isAuthenticated, router]);
// Handle logout with explicit redirect
const handleLogout = () => {
logout();
// Force redirection to login
router.push("/login");
};
// Show loading state // Show loading state
if (isLoading) { if (isLoading) {
@@ -41,48 +19,40 @@ export default function DashboardPage() {
); );
} }
// Extra safeguard - if we somehow get here without authentication, redirect
if (!isAuthenticated) {
router.push("/login");
return <div>Redirecting...</div>;
}
return ( return (
<div className="container mx-auto px-4 py-12"> <>
<div className="max-w-7xl mx-auto"> <Navbar />
<h1 className="text-3xl font-bold mb-8">Dashboard</h1> <div className="container mx-auto px-4 py-12">
<div className="max-w-7xl mx-auto">
<h1 className="text-3xl font-bold mb-8">Dashboard</h1>
<div className="bg-white dark:bg-slate-800 rounded-lg shadow p-6"> <div className="bg-white dark:bg-slate-800 rounded-lg shadow p-6">
<h2 className="text-xl font-semibold mb-4"> <h2 className="text-xl font-semibold mb-4">
Welcome, {user?.first_name || "User"}! Welcome, {user?.first_name || "User"}!
</h2> </h2>
<p className="text-gray-600 dark:text-gray-300 mb-4"> <p className="text-gray-600 dark:text-gray-300 mb-4">
You are now logged in to EventSpace. You are now logged in to EventSpace.
</p> </p>
<div className="mt-8"> <div className="mt-8">
<h3 className="text-lg font-medium mb-4">Your Events</h3> <h3 className="text-lg font-medium mb-4">Your Events</h3>
<div className="bg-gray-100 dark:bg-slate-700 rounded p-8 text-center"> <div className="bg-gray-100 dark:bg-slate-700 rounded p-8 text-center">
<p className="text-gray-500 dark:text-gray-400">No events yet</p> <p className="text-gray-500 dark:text-gray-400">
<button No events yet
className="mt-4 px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700 transition-colors" </p>
onClick={() => alert("Create event functionality coming soon!")} <button
> className="mt-4 px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700 transition-colors"
Create Your First Event onClick={() =>
</button> alert("Create event functionality coming soon!")
}
>
Create Your First Event
</button>
</div>
</div> </div>
</div> </div>
<div className="mt-8">
<button
className="px-4 py-2 bg-red-100 text-red-600 rounded hover:bg-red-200 transition-colors"
onClick={handleLogout}
>
Sign Out
</button>
</div>
</div> </div>
</div> </div>
</div> </>
); );
} }

74
frontend/src/components/layout/navbar.tsx Normal file
View File

@@ -0,0 +1,74 @@
// src/components/layout/navbar.tsx
"use client";
import { useAuth } from "@/context/auth-context";
import Link from "next/link";
import { usePathname } from "next/navigation";
export default function Navbar() {
const { user, isAuthenticated, logout } = useAuth();
const pathname = usePathname();
// Skip rendering navbar on login and public pages
const hideNavbarOn = ["/login", "/register", "/invite"];
if (hideNavbarOn.includes(pathname || "")) {
return null;
}
return (
<header className="bg-white dark:bg-slate-900 border-b border-slate-200 dark:border-slate-800">
<div className="container mx-auto px-4">
<div className="flex h-16 items-center justify-between">
<div className="flex items-center">
<Link
href="/"
className="text-xl font-bold text-blue-600 dark:text-blue-400"
>
EventSpace
</Link>
{isAuthenticated && (
<nav className="ml-10 hidden md:flex space-x-8">
<Link
href="/dashboard"
className={`text-sm font-medium ${pathname === "/dashboard" ? "text-blue-600 dark:text-blue-400" : "text-slate-600 dark:text-slate-300 hover:text-slate-900 dark:hover:text-white"}`}
>
Dashboard
</Link>
<Link
href="/events"
className={`text-sm font-medium ${pathname?.startsWith("/events") ? "text-blue-600 dark:text-blue-400" : "text-slate-600 dark:text-slate-300 hover:text-slate-900 dark:hover:text-white"}`}
>
Events
</Link>
</nav>
)}
</div>
<div className="flex items-center">
{isAuthenticated ? (
<div className="flex items-center space-x-4">
<span className="text-sm text-slate-600 dark:text-slate-300">
{user?.first_name}
</span>
<button
onClick={logout}
className="text-sm font-medium text-slate-600 dark:text-slate-300 hover:text-slate-900 dark:hover:text-white"
>
Sign out
</button>
</div>
) : (
<Link
href="/login"
className="text-sm font-medium text-blue-600 dark:text-blue-400 hover:text-blue-800 dark:hover:text-blue-300"
>
Sign in
</Link>
)}
</div>
</div>
</div>
</header>
);
}