refactor(auth): unify current user state usage across UI
This commit is contained in:
+23
-17
@@ -29,11 +29,11 @@ import {
|
||||
} from "@/components/ui/dropdown-menu"
|
||||
import { Input } from "@/components/ui/input"
|
||||
import { Sheet, SheetContent, SheetHeader, SheetTitle, SheetTrigger } from "@/components/ui/sheet"
|
||||
import { currentUser, mockShops } from "@/lib/mock"
|
||||
import type { UserRole } from "@/lib/types"
|
||||
import { cn } from "@/lib/utils"
|
||||
import { useAuthStore } from "@/store/auth"
|
||||
import { useNotificationStore } from "@/store/notifications"
|
||||
import { useShopStore } from "@/store/shops"
|
||||
|
||||
const roleLabels: Record<UserRole, string> = {
|
||||
consumer: "消费者",
|
||||
@@ -45,7 +45,10 @@ export function Header() {
|
||||
const [mobileOpen, setMobileOpen] = useState(false)
|
||||
const pathname = usePathname()
|
||||
const router = useRouter()
|
||||
const { isAuthenticated, currentRole, verifiedRoles, switchRole, logout } = useAuthStore()
|
||||
const { isAuthenticated, currentRole, verifiedRoles, switchRole, logout, user } = useAuthStore()
|
||||
const ownerShop = useShopStore((state) =>
|
||||
user ? state.shops.find((shop) => shop.owner.id === user.id) : undefined,
|
||||
)
|
||||
|
||||
const navLinks =
|
||||
currentRole === "consumer"
|
||||
@@ -84,6 +87,17 @@ export function Header() {
|
||||
if (q.trim()) router.push(`/search?q=${encodeURIComponent(q.trim())}`)
|
||||
}
|
||||
|
||||
const profileHref =
|
||||
currentRole === "player"
|
||||
? user
|
||||
? `/player/${user.id}`
|
||||
: "/settings"
|
||||
: currentRole === "owner"
|
||||
? `/shop/${ownerShop?.id ?? "shop1"}`
|
||||
: user
|
||||
? `/user/${user.id}`
|
||||
: "/settings"
|
||||
|
||||
return (
|
||||
<header className="sticky top-0 z-50 w-full border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
|
||||
<div className="container mx-auto flex h-14 items-center gap-4 px-4">
|
||||
@@ -155,25 +169,17 @@ export function Header() {
|
||||
<DropdownMenuTrigger asChild>
|
||||
<Button variant="ghost" size="icon" className="rounded-full h-9 w-9">
|
||||
<Avatar className="h-7 w-7">
|
||||
<AvatarImage src={currentUser.avatar} />
|
||||
<AvatarFallback>{currentUser.nickname[0]}</AvatarFallback>
|
||||
<AvatarImage src={user?.avatar} />
|
||||
<AvatarFallback>{user?.nickname?.[0] ?? "?"}</AvatarFallback>
|
||||
</Avatar>
|
||||
</Button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent align="end" className="w-48">
|
||||
<DropdownMenuLabel>{currentUser.nickname}</DropdownMenuLabel>
|
||||
<DropdownMenuLabel>{user?.nickname ?? "未登录"}</DropdownMenuLabel>
|
||||
<DropdownMenuSeparator />
|
||||
<DropdownMenuGroup>
|
||||
<DropdownMenuItem asChild>
|
||||
<Link
|
||||
href={
|
||||
currentRole === "player"
|
||||
? `/player/${currentUser.id}`
|
||||
: currentRole === "owner"
|
||||
? `/shop/${mockShops.find((s) => s.owner.id === currentUser.id)?.id ?? "shop1"}`
|
||||
: `/user/${currentUser.id}`
|
||||
}
|
||||
>
|
||||
<Link href={profileHref}>
|
||||
<User className="mr-2 h-4 w-4" />
|
||||
个人主页
|
||||
</Link>
|
||||
@@ -254,11 +260,11 @@ export function Header() {
|
||||
{isAuthenticated && (
|
||||
<div className="flex items-center gap-2 px-1">
|
||||
<Avatar className="h-8 w-8">
|
||||
<AvatarImage src={currentUser.avatar} />
|
||||
<AvatarFallback>{currentUser.nickname[0]}</AvatarFallback>
|
||||
<AvatarImage src={user?.avatar} />
|
||||
<AvatarFallback>{user?.nickname?.[0] ?? "?"}</AvatarFallback>
|
||||
</Avatar>
|
||||
<div className="flex-1 min-w-0">
|
||||
<p className="text-sm font-medium truncate">{currentUser.nickname}</p>
|
||||
<p className="text-sm font-medium truncate">{user?.nickname ?? "未登录"}</p>
|
||||
<p className="text-xs text-muted-foreground">{roleLabels[currentRole]}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -14,7 +14,7 @@ import {
|
||||
} from "@/components/ui/dialog"
|
||||
import { Input } from "@/components/ui/input"
|
||||
import { Label } from "@/components/ui/label"
|
||||
import { currentUser } from "@/lib/mock"
|
||||
import { getCurrentUserForLogin } from "@/lib/api"
|
||||
import { useAuthStore } from "@/store/auth"
|
||||
import { useLoginDialogStore } from "@/store/login-dialog"
|
||||
|
||||
@@ -42,7 +42,7 @@ export function LoginDialog({ open, onOpenChange }: LoginDialogProps) {
|
||||
|
||||
const onSubmit = async (_data: z.infer<typeof loginSchema>) => {
|
||||
await new Promise((r) => setTimeout(r, 500))
|
||||
login(currentUser, ["consumer", "player", "owner"])
|
||||
login(getCurrentUserForLogin(), ["consumer", "player", "owner"])
|
||||
consumePendingAction()
|
||||
onOpenChange(false)
|
||||
}
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
|
||||
import { Heart } from "lucide-react"
|
||||
import { useState } from "react"
|
||||
import { currentUser } from "@/lib/mock"
|
||||
import { generateId } from "@/lib/id"
|
||||
import type { Comment } from "@/lib/types"
|
||||
import { useRequireAuth } from "@/lib/use-require-auth"
|
||||
import { useAuthStore } from "@/store/auth"
|
||||
@@ -32,14 +32,14 @@ export function PostComments({ initialComments, postId }: PostCommentsProps) {
|
||||
requireAuth(() => {
|
||||
const nextContent = content.trim()
|
||||
if (!nextContent) return
|
||||
const author = user ?? currentUser
|
||||
if (!user) return
|
||||
const createdAt = new Date().toISOString()
|
||||
setComments((prev) => [
|
||||
...prev,
|
||||
{
|
||||
id: `comment-${postId}-${createdAt}`,
|
||||
id: generateId(`comment-${postId}`),
|
||||
postId,
|
||||
author,
|
||||
author: user,
|
||||
content: nextContent,
|
||||
likeCount: 0,
|
||||
liked: false,
|
||||
|
||||
Reference in New Issue
Block a user