50 lines
1.3 KiB
TypeScript
50 lines
1.3 KiB
TypeScript
"use client";
|
|
|
|
/**
|
|
* /u/me/mentions — posts that tag the signed-in user.
|
|
*
|
|
* Grid of tagged posts (same renderer as the Posts tab). Tagged posts can be
|
|
* by anyone, so each thumbnail links to its author's scroll feed.
|
|
*/
|
|
|
|
import { useEffect, useState } from "react";
|
|
import { useAuth } from "@/components/auth/auth-provider";
|
|
import { profile, type Post } from "@/lib/social";
|
|
import { PostViews } from "@/components/social/post/post-views";
|
|
|
|
export default function MentionsPage() {
|
|
const { user } = useAuth();
|
|
const handle = user?.handle ?? null;
|
|
const [feed, setFeed] = useState<Post[]>([]);
|
|
const [loading, setLoading] = useState(true);
|
|
|
|
useEffect(() => {
|
|
if (!handle) return;
|
|
let cancelled = false;
|
|
profile
|
|
.mentionsFeed(handle, 30)
|
|
.then((rows) => {
|
|
if (!cancelled) setFeed(rows ?? []);
|
|
})
|
|
.catch(() => {
|
|
/* show empty rather than block the tab */
|
|
})
|
|
.finally(() => !cancelled && setLoading(false));
|
|
return () => {
|
|
cancelled = true;
|
|
};
|
|
}, [handle]);
|
|
|
|
if (loading) {
|
|
return <p className="text-sm text-muted-foreground">Loading…</p>;
|
|
}
|
|
|
|
return (
|
|
<PostViews
|
|
posts={feed}
|
|
hrefFor={(p) => `/u/${p.author_handle ?? handle}/posts#post-${p.id}`}
|
|
emptyMessage="Posts that tag you will appear here."
|
|
/>
|
|
);
|
|
}
|