Files
Makers3D/apps/web/app/components/AuthNav.tsx
T

93 lines
2.5 KiB
TypeScript

"use client";
import Link from "next/link";
import { useEffect, useState } from "react";
import { browserFetch } from "../lib/api";
import { logoutByNavigation } from "../lib/logout";
type MeResponse = {
user: { id: string; email: string; role: string } | null;
makerProfile: { id: string; slug: string; business_name: string | null; status: string } | null;
};
export default function AuthNav() {
const [session, setSession] = useState<MeResponse | null>(null);
const [loading, setLoading] = useState(true);
useEffect(() => {
let active = true;
async function loadSession() {
try {
const response = await browserFetch<MeResponse>("/auth/me");
if (active) {
setSession(response);
}
} catch {
if (active) {
setSession({ user: null, makerProfile: null });
}
} finally {
if (active) {
setLoading(false);
}
}
}
void loadSession();
return () => {
active = false;
};
}, []);
function logout() {
logoutByNavigation();
}
const user = session?.user || null;
const makerProfile = session?.makerProfile || null;
const isAdmin = user?.role === "admin";
const isMaker = Boolean(makerProfile && makerProfile.status !== "draft");
return (
<nav className="nav-links">
<Link href="/" className="nav-link">Inicio</Link>
<Link href="/discover" className="nav-link">Descubrir</Link>
{loading ? <span className="nav-session-chip">Sesion...</span> : null}
{!loading && !user ? (
<Link href="/login" className="button button-primary">Entrar</Link>
) : null}
{!loading && user && isAdmin ? (
<>
<a href="/app/backoffice" className="nav-link nav-link-admin">Backoffice</a>
</>
) : null}
{!loading && user && !isAdmin && isMaker ? (
<>
<Link href="/account" className="nav-link">Mi espacio maker</Link>
<Link href="/account/inbox" className="nav-link">Consultas maker</Link>
</>
) : null}
{!loading && user && !isAdmin && !isMaker ? (
<>
<Link href="/messages" className="nav-link">Mensajes</Link>
<Link href="/favorites" className="nav-link">Favoritos</Link>
</>
) : null}
{!loading && user ? (
<button className="button button-secondary nav-logout-button" type="button" onClick={logout}>
Cerrar sesion
</button>
) : null}
</nav>
);
}