96 lines
3.3 KiB
TypeScript
96 lines
3.3 KiB
TypeScript
import { useEffect } from 'react';
|
|
import { useNavigate } from 'react-router-dom';
|
|
import { ArrowLeft, Star } from 'lucide-react';
|
|
import { Button } from '@/components/ui/button';
|
|
import { Spinner } from '@/components/ui/spinner';
|
|
import { notify } from '@/lib/notify';
|
|
import { api } from '../api/client';
|
|
import type { PostItem } from '../api/types';
|
|
import { useAuth } from '../hooks/useAuth';
|
|
import { useSessionResource } from '../hooks/useSessionResource';
|
|
import PostListItem from '../components/PostListItem';
|
|
import { loginPath } from '../utils/authRedirect';
|
|
import { useForumLimits } from '../hooks/useForumLimits';
|
|
import { openForumPost } from '../utils/openPost';
|
|
import { useNoIndexSEO } from '../hooks/usePageSEO';
|
|
import { InFlowSiteFooter } from '../components/SiteFooter';
|
|
|
|
interface FavItem {
|
|
id: number;
|
|
post_id: number;
|
|
created_at: string;
|
|
post?: PostItem;
|
|
}
|
|
|
|
export default function FavoritesPage() {
|
|
const nav = useNavigate();
|
|
const { user, loading: authLoading } = useAuth();
|
|
const { limits } = useForumLimits();
|
|
useNoIndexSEO('我的收藏');
|
|
|
|
const { data: list = [], loading } = useSessionResource<FavItem[]>(
|
|
user ? 'favorites' : null,
|
|
() => api.favorites().then(d => (Array.isArray(d.favorites) ? d.favorites as FavItem[] : [])),
|
|
{
|
|
enabled: !!user && !authLoading,
|
|
onError: (e) => notify.error(e instanceof Error ? e.message : '加载失败'),
|
|
},
|
|
);
|
|
|
|
useEffect(() => {
|
|
if (authLoading) return;
|
|
if (!user) nav(loginPath('/favorites'));
|
|
}, [user, authLoading, nav]);
|
|
|
|
if (authLoading || loading) return <div className="flex justify-center py-16"><Spinner size="lg" /></div>;
|
|
|
|
if (!user) return null;
|
|
|
|
return (
|
|
<div className="page-wrap">
|
|
<div className="feed-panel list-page-panel">
|
|
<header className="list-page-panel__head">
|
|
<Button variant="ghost" size="sm" className="list-page-panel__back" onClick={() => nav('/')}>
|
|
<ArrowLeft />
|
|
返回
|
|
</Button>
|
|
<h1 className="page-title">我的收藏</h1>
|
|
<p className="page-desc">共 {list.length} 篇收藏帖子</p>
|
|
</header>
|
|
|
|
{list.length === 0 ? (
|
|
<div className="empty-state list-page-panel__empty">
|
|
<Star className="empty-state-icon" aria-hidden size={36} strokeWidth={1.5} />
|
|
<p>还没有收藏任何帖子</p>
|
|
<Button onClick={() => nav('/')}>去逛逛</Button>
|
|
</div>
|
|
) : (
|
|
<div className="content-surface">
|
|
{list.map(fav => (
|
|
fav.post ? (
|
|
<PostListItem
|
|
key={fav.id}
|
|
post={fav.post}
|
|
onSelect={(id) => openForumPost(nav, id, limits.open_posts_in_new_tab)}
|
|
/>
|
|
) : (
|
|
<button
|
|
key={fav.id}
|
|
type="button"
|
|
className="post-row"
|
|
onClick={() => openForumPost(nav, fav.post_id, limits.open_posts_in_new_tab)}
|
|
>
|
|
<div className="post-body">
|
|
<div className="post-title">帖子已删除</div>
|
|
</div>
|
|
</button>
|
|
)
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
<InFlowSiteFooter />
|
|
</div>
|
|
);
|
|
}
|