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";
import { useAuth } from "@/context/auth-context";
import { useRouter } from "next/navigation";
import { useEffect } from "react";
import Navbar from "@/components/layout/navbar";
export default function DashboardPage() {
const { user, isLoading, isAuthenticated, logout } = 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");
};
const { user, isLoading } = useAuth();
// Show loading state
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 (
<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>
<>
<Navbar />
<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">
<h2 className="text-xl font-semibold mb-4">
Welcome, {user?.first_name || "User"}!
</h2>
<p className="text-gray-600 dark:text-gray-300 mb-4">
You are now logged in to EventSpace.
</p>
<div className="bg-white dark:bg-slate-800 rounded-lg shadow p-6">
<h2 className="text-xl font-semibold mb-4">
Welcome, {user?.first_name || "User"}!
</h2>
<p className="text-gray-600 dark:text-gray-300 mb-4">
You are now logged in to EventSpace.
</p>
<div className="mt-8">
<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">
<p className="text-gray-500 dark:text-gray-400">No events yet</p>
<button
className="mt-4 px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700 transition-colors"
onClick={() => alert("Create event functionality coming soon!")}
>
Create Your First Event
</button>
<div className="mt-8">
<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">
<p className="text-gray-500 dark:text-gray-400">
No events yet
</p>
<button
className="mt-4 px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700 transition-colors"
onClick={() =>
alert("Create event functionality coming soon!")
}
>
Create Your First Event
</button>
</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>
</>
);
}