91 lines
2.6 KiB
TypeScript
91 lines
2.6 KiB
TypeScript
// components/user-nav.tsx
|
|
"use client";
|
|
|
|
import { useEffect, useState } from "react";
|
|
import { useAuth } from "@/hooks/use-auth";
|
|
import { getMe, User } from "@/lib/api";
|
|
import {
|
|
DropdownMenu,
|
|
DropdownMenuContent,
|
|
DropdownMenuItem,
|
|
DropdownMenuLabel,
|
|
DropdownMenuSeparator,
|
|
DropdownMenuTrigger,
|
|
} from "@/components/ui/dropdown-menu";
|
|
import { Button } from "@/components/ui/button";
|
|
import { UserAvatar } from "./user-avatar";
|
|
import { Skeleton } from "./ui/skeleton";
|
|
import Link from "next/link";
|
|
import { LogOut, User as UserIcon } from "lucide-react";
|
|
import { useRouter } from "next/navigation";
|
|
|
|
export function UserNav() {
|
|
const { token, setToken } = useAuth();
|
|
const [user, setUser] = useState<User | null>(null);
|
|
const [loading, setLoading] = useState(true);
|
|
const { replace } = useRouter();
|
|
|
|
useEffect(() => {
|
|
if (token) {
|
|
setLoading(true);
|
|
getMe(token)
|
|
.then(setUser)
|
|
.catch(() => {
|
|
// Invalid token, log the user out
|
|
setToken(null);
|
|
})
|
|
.finally(() => setLoading(false));
|
|
} else {
|
|
setLoading(false);
|
|
}
|
|
}, [token, setToken]);
|
|
|
|
const handleLogout = () => {
|
|
setToken(null);
|
|
replace("/login");
|
|
};
|
|
|
|
if (loading) {
|
|
return <Skeleton className="h-10 w-10 rounded-full" />;
|
|
}
|
|
|
|
if (!token || !user) {
|
|
// Render nothing if the user is not logged in
|
|
return null;
|
|
}
|
|
|
|
return (
|
|
<DropdownMenu>
|
|
<DropdownMenuTrigger asChild>
|
|
<Button variant="ghost" className="relative h-10 w-10 rounded-full">
|
|
<UserAvatar src={user.avatarUrl} alt={user.displayName} />
|
|
</Button>
|
|
</DropdownMenuTrigger>
|
|
<DropdownMenuContent className="w-56" align="end" forceMount>
|
|
<DropdownMenuLabel className="font-normal">
|
|
<div className="flex flex-col space-y-1">
|
|
<p className="text-sm font-medium leading-none">
|
|
{user.displayName || user.username}
|
|
</p>
|
|
<p className="text-xs leading-none text-muted-foreground">
|
|
@{user.username}
|
|
</p>
|
|
</div>
|
|
</DropdownMenuLabel>
|
|
<DropdownMenuSeparator />
|
|
<DropdownMenuItem asChild>
|
|
<Link href={`/users/${user.username}`}>
|
|
<UserIcon className="mr-2 h-4 w-4" />
|
|
<span>Profile</span>
|
|
</Link>
|
|
</DropdownMenuItem>
|
|
<DropdownMenuSeparator />
|
|
<DropdownMenuItem onClick={handleLogout}>
|
|
<LogOut className="mr-2 h-4 w-4" />
|
|
<span>Log out</span>
|
|
</DropdownMenuItem>
|
|
</DropdownMenuContent>
|
|
</DropdownMenu>
|
|
);
|
|
}
|