132 lines
3.9 KiB
TypeScript
132 lines
3.9 KiB
TypeScript
"use client";
|
|
|
|
/**
|
|
* Public profile at /u/[handle].
|
|
*
|
|
* Anonymous-friendly. Mirrors /u/me's shell — ProfileHeader at the top,
|
|
* a smaller tab strip (Posts + Collections only; Bookmarks and Mentions
|
|
* are private), then a grid of the active tab's content.
|
|
*
|
|
* Owner-handle redirect: when the logged-in user lands on their own
|
|
* /u/<handle>, we send them to /u/me where the owner controls live.
|
|
*/
|
|
|
|
import { use, useEffect, useState } from "react";
|
|
import Link from "next/link";
|
|
import { notFound, useRouter } from "next/navigation";
|
|
import { FolderClosed, LayoutGrid } from "lucide-react";
|
|
import {
|
|
profile,
|
|
SocialError,
|
|
type Post,
|
|
type PublicProfile,
|
|
} from "@/lib/social";
|
|
import { ProfileHeader } from "@/components/profile/profile-header";
|
|
import {
|
|
ProfileTabs,
|
|
type ProfileTab,
|
|
} from "@/components/profile/profile-tabs";
|
|
import { PostViews } from "@/components/social/post-views";
|
|
import { CollectionViews } from "@/components/social/collection-views";
|
|
import { useAuth } from "@/components/auth/auth-provider";
|
|
|
|
type Tab = "posts" | "collections";
|
|
|
|
export default function PublicProfilePage(props: {
|
|
params: Promise<{ handle: string }>;
|
|
searchParams?: Promise<{ tab?: string }>;
|
|
}) {
|
|
const { handle } = use(props.params);
|
|
const search = props.searchParams ? use(props.searchParams) : undefined;
|
|
const tab: Tab = search?.tab === "collections" ? "collections" : "posts";
|
|
const router = useRouter();
|
|
const { user } = useAuth();
|
|
const [data, setData] = useState<PublicProfile | null>(null);
|
|
const [feed, setFeed] = useState<Post[]>([]);
|
|
const [loading, setLoading] = useState(true);
|
|
const [notFoundState, setNotFound] = useState(false);
|
|
|
|
const isOwn = !!user && user.handle.toLowerCase() === handle.toLowerCase();
|
|
useEffect(() => {
|
|
if (isOwn) router.replace("/u/me");
|
|
}, [isOwn, router]);
|
|
|
|
useEffect(() => {
|
|
if (isOwn) return;
|
|
let cancelled = false;
|
|
setLoading(true);
|
|
Promise.all([profile.get(handle), profile.feed(handle, 30)])
|
|
.then(([p, posts]) => {
|
|
if (cancelled) return;
|
|
setData(p);
|
|
setFeed(posts ?? []);
|
|
})
|
|
.catch((err) => {
|
|
if (err instanceof SocialError && err.status === 404) {
|
|
setNotFound(true);
|
|
}
|
|
})
|
|
.finally(() => !cancelled && setLoading(false));
|
|
return () => {
|
|
cancelled = true;
|
|
};
|
|
}, [handle, isOwn]);
|
|
|
|
if (notFoundState) notFound();
|
|
if (isOwn) return null;
|
|
|
|
if (loading || !data) {
|
|
return (
|
|
<main className="flex-1 max-w-3xl w-full mx-auto px-4 py-12">
|
|
<p className="text-sm text-muted-foreground">Loading profile…</p>
|
|
</main>
|
|
);
|
|
}
|
|
|
|
const tabs: ProfileTab[] = [
|
|
{
|
|
href: `/u/${data.handle}`,
|
|
label: "Posts",
|
|
icon: <LayoutGrid className="size-5" />,
|
|
},
|
|
{
|
|
href: `/u/${data.handle}?tab=collections`,
|
|
label: "Collections",
|
|
icon: <FolderClosed className="size-5" />,
|
|
},
|
|
];
|
|
|
|
return (
|
|
<main className="flex-1 max-w-3xl w-full mx-auto px-4 sm:px-6">
|
|
<ProfileHeader
|
|
avatarURL={data.avatar_url}
|
|
name={data.name}
|
|
handle={data.handle}
|
|
postCount={data.post_count}
|
|
joinedAt={data.joined_at}
|
|
/>
|
|
<ProfileTabs tabs={tabs} />
|
|
<div className="py-6">
|
|
{tab === "collections" ? (
|
|
data.public_collections && data.public_collections.length > 0 ? (
|
|
<CollectionViews
|
|
collections={data.public_collections}
|
|
hrefFor={(c) => `/c/${c.id}`}
|
|
/>
|
|
) : (
|
|
<p className="text-sm text-muted-foreground">
|
|
No public collections yet.
|
|
</p>
|
|
)
|
|
) : (
|
|
<PostViews
|
|
posts={feed}
|
|
hrefFor={(p) => `/u/${data.handle}/posts#post-${p.id}`}
|
|
emptyMessage="No posts yet — quotes shared by this user will appear here."
|
|
/>
|
|
)}
|
|
</div>
|
|
</main>
|
|
);
|
|
}
|