spsays-training/app/(app)/u/[handle]/layout.tsx

"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();

  // Store the request handle alongside the result. The view derives
  // `loading` from "do we have a result whose handle matches the current
  // route?" — that lets us skip a synchronous setLoading(true) inside the
  // fetch effect (which would trigger a cascading render on every mount).
  type Result =
    | { handle: string; data: PublicProfile; missing: false }
    | { handle: string; data: null; missing: true };
  const [result, setResult] = useState<Result | null>(null);

  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). Also
    // carry over the query string and hash — the hash holds the post anchor
    // (#post-<id>) from share links, and it's only readable on the client
    // (the server never receives it), which is why we read window.location
    // here rather than from pathname / useSearchParams.
    const m = pathname.match(/^\/u\/[^/]+(\/.*)?$/);
    const suffix = m?.[1] ?? "";
    const search = window.location.search;
    const hash = window.location.hash;
    router.replace(`/u/me${suffix}${search}${hash}`);
  }, [isOwn, router, pathname]);

  useEffect(() => {
    if (isOwn) return;
    let cancelled = false;
    profile
      .get(handle)
      .then((p) => {
        if (!cancelled) setResult({ handle, data: p, missing: false });
      })
      .catch((err) => {
        if (
          !cancelled &&
          err instanceof SocialError &&
          err.status === 404
        ) {
          setResult({ handle, data: null, missing: true });
        }
      });
    return () => {
      cancelled = true;
    };
  }, [handle, isOwn]);

  // A result for a previous handle is treated as "still loading the new
  // one" — so when the route changes we automatically show the spinner
  // again without any setState during render or in an effect body.
  const fresh = result?.handle === handle ? result : null;
  const missing = fresh?.missing === true;
  const data = fresh && fresh.missing === false ? fresh.data : null;
  const loading = fresh === null;

  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>
    );
  }

  // A block in either direction hides this profile's content. The backend
  // already refuses the feed/mentions/followers endpoints with 403, so this
  // is the matching client state: keep the header (its action row carries the
  // Unblock button when *you* blocked them) but replace the tabs + feed with
  // a notice instead of a misleading empty grid.
  const rel = data.relationship;
  const youBlocked = !!rel?.blocked;
  const theyBlocked = !!rel?.blocked_by;
  const blocked = youBlocked || theyBlocked;

  if (blocked) {
    return (
      <main className="flex-1 max-w-3xl w-full mx-auto px-4 sm:px-6">
        <ProfileHeader
          key={data.handle}
          avatarURL={data.avatar_url}
          name={data.name}
          handle={data.handle}
          followerCount={data.follower_count}
          followingCount={data.following_count}
          relationship={data.relationship}
          enableActions
          interactiveCounts={false}
          joinedAt={data.joined_at}
          country={data.country}
          isDirectDisciple={!!data.is_direct_disciple}
          bio={data.bio}
        />
        <div className="py-12 text-center">
          <p className="text-sm text-muted-foreground">
            {youBlocked
              ? `You've blocked @${data.handle}. Unblock them to see their posts.`
              : `@${data.handle}'s posts aren't available.`}
          </p>
        </div>
      </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
        key={data.handle}
        avatarURL={data.avatar_url}
        name={data.name}
        handle={data.handle}
        postCount={data.post_count}
        followerCount={data.follower_count}
        followingCount={data.following_count}
        relationship={data.relationship}
        enableActions
        joinedAt={data.joined_at}
        country={data.country}
        isDirectDisciple={!!data.is_direct_disciple}
        bio={data.bio}
      />
      <ProfileTabs tabs={tabs} />
      <PublicProfileContext.Provider value={data}>
        <div className="py-6">{props.children}</div>
      </PublicProfileContext.Provider>
    </main>
  );
}