118 lines
3.6 KiB
TypeScript
118 lines
3.6 KiB
TypeScript
"use client";
|
|
|
|
/**
|
|
* /u/[handle] shared layout — public profile shell.
|
|
*
|
|
* Mirrors /u/me's layout so visitors see the same ProfileHeader + tab
|
|
* strip whether they're on the grid (`/u/<h>`) or the scroll feed
|
|
* (`/u/<h>/posts`). Without this layout, /u/<h>/posts rendered a bare
|
|
* `<main>` with extra padding — visually disconnected from /u/<h> and
|
|
* narrower than expected on mobile.
|
|
*
|
|
* Profile data is fetched once here and exposed via PublicProfileContext
|
|
* so child pages (which need `public_collections`, etc.) don't refetch.
|
|
*
|
|
* If the logged-in user lands on their own /u/<handle>, redirect to
|
|
* /u/me — preserving the `/posts` sub-path when present.
|
|
*/
|
|
|
|
import { use, useEffect, useState } from "react";
|
|
import { notFound, usePathname, useRouter } from "next/navigation";
|
|
import { AtSign, FolderClosed, LayoutGrid } from "lucide-react";
|
|
import { profile, SocialError, type PublicProfile } from "@/lib/social";
|
|
import { useAuth } from "@/components/auth/auth-provider";
|
|
import { ProfileHeader } from "@/components/profile/profile-header";
|
|
import {
|
|
ProfileTabs,
|
|
type ProfileTab,
|
|
} from "@/components/profile/profile-tabs";
|
|
import { PublicProfileContext } from "./profile-context";
|
|
|
|
export default function PublicProfileLayout(props: {
|
|
params: Promise<{ handle: string }>;
|
|
children: React.ReactNode;
|
|
}) {
|
|
const { handle } = use(props.params);
|
|
const router = useRouter();
|
|
const pathname = usePathname();
|
|
const { user } = useAuth();
|
|
const [data, setData] = useState<PublicProfile | null>(null);
|
|
const [loading, setLoading] = useState(true);
|
|
const [missing, setMissing] = useState(false);
|
|
|
|
const isOwn = !!user && user.handle.toLowerCase() === handle.toLowerCase();
|
|
|
|
useEffect(() => {
|
|
if (!isOwn) return;
|
|
// Preserve whatever sub-path the visitor is on so /u/<own>/collections
|
|
// jumps to /u/me/collections (and so on for /posts, /mentions).
|
|
const m = pathname.match(/^\/u\/[^/]+(\/.*)?$/);
|
|
const suffix = m?.[1] ?? "";
|
|
router.replace(`/u/me${suffix}`);
|
|
}, [isOwn, router, pathname]);
|
|
|
|
useEffect(() => {
|
|
if (isOwn) return;
|
|
let cancelled = false;
|
|
setLoading(true);
|
|
profile
|
|
.get(handle)
|
|
.then((p) => {
|
|
if (!cancelled) setData(p);
|
|
})
|
|
.catch((err) => {
|
|
if (err instanceof SocialError && err.status === 404) setMissing(true);
|
|
})
|
|
.finally(() => !cancelled && setLoading(false));
|
|
return () => {
|
|
cancelled = true;
|
|
};
|
|
}, [handle, isOwn]);
|
|
|
|
if (missing) notFound();
|
|
if (isOwn) return null;
|
|
|
|
if (loading || !data) {
|
|
return (
|
|
<main className="flex-1 max-w-3xl w-full mx-auto px-4 sm:px-6 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" />,
|
|
activeFor: [`/u/${data.handle}/posts`],
|
|
},
|
|
{
|
|
href: `/u/${data.handle}/collections`,
|
|
label: "Collections",
|
|
icon: <FolderClosed className="size-5" />,
|
|
},
|
|
{
|
|
href: `/u/${data.handle}/mentions`,
|
|
label: "Tagged",
|
|
icon: <AtSign 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} />
|
|
<PublicProfileContext.Provider value={data}>
|
|
<div className="py-6">{props.children}</div>
|
|
</PublicProfileContext.Provider>
|
|
</main>
|
|
);
|
|
}
|