feat: add policy pages
This commit is contained in:
gosangam
@@ -0,0 +1,27 @@
|
||||
"use client";
|
||||
|
||||
/**
|
||||
* /u/[handle]/collections — public collections for a profile.
|
||||
*
|
||||
* The list comes from the layout's profile fetch (`public_collections`),
|
||||
* so this page only has to decide between the empty state and the grid.
|
||||
* Layout owns the ProfileHeader + tabs + container.
|
||||
*/
|
||||
|
||||
import { CollectionViews } from "@/components/social/collection-views";
|
||||
import { usePublicProfile } from "../profile-context";
|
||||
|
||||
export default function PublicProfileCollectionsPage() {
|
||||
const data = usePublicProfile();
|
||||
const list = data.public_collections ?? [];
|
||||
|
||||
if (list.length === 0) {
|
||||
return (
|
||||
<p className="text-sm text-muted-foreground">
|
||||
No public collections yet.
|
||||
</p>
|
||||
);
|
||||
}
|
||||
|
||||
return <CollectionViews collections={list} hrefFor={(c) => `/c/${c.id}`} />;
|
||||
}
|
||||
@@ -0,0 +1,135 @@
|
||||
"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).
|
||||
const m = pathname.match(/^\/u\/[^/]+(\/.*)?$/);
|
||||
const suffix = m?.[1] ?? "";
|
||||
router.replace(`/u/me${suffix}`);
|
||||
}, [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>
|
||||
);
|
||||
}
|
||||
|
||||
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>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,25 @@
|
||||
"use client";
|
||||
|
||||
/**
|
||||
* /u/[handle]/mentions — posts that tag this user.
|
||||
*
|
||||
* Mirror of /u/me/mentions: the tab is wired into the public profile
|
||||
* shell so visitors see an empty state instead of a 404. Will swap to
|
||||
* a real feed once the Mentions feature ships.
|
||||
*/
|
||||
|
||||
import { AtSign } from "lucide-react";
|
||||
import { usePublicProfile } from "../profile-context";
|
||||
|
||||
export default function PublicProfileMentionsPage() {
|
||||
const data = usePublicProfile();
|
||||
return (
|
||||
<div className="flex flex-col items-center text-center gap-3 py-12 text-muted-foreground">
|
||||
<AtSign className="size-8" />
|
||||
<p className="text-sm">
|
||||
Posts that tag <span className="text-foreground">@{data.handle}</span>{" "}
|
||||
will appear here. Coming soon.
|
||||
</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,28 @@
|
||||
/**
|
||||
* /u/[handle] — public profile, Posts tab (default).
|
||||
*
|
||||
* Server shell that exists for two reasons:
|
||||
*
|
||||
* 1. Export `generateMetadata` so direct shares of this URL
|
||||
* (https://prabhupadasays.org/u/<handle>) get a rich OG card
|
||||
* pointing at /api/og/profile/<handle>. The layout and the body
|
||||
* below are client components; only this file is server.
|
||||
* 2. Mount the client tree (<PostsGrid />), which reads the
|
||||
* ProfileContext provided by the parent layout for the post-grid
|
||||
* hrefs and renders the feed.
|
||||
*/
|
||||
|
||||
import type { Metadata } from "next";
|
||||
import { PostsGrid } from "./posts-grid";
|
||||
import { metadataForHandle } from "./profile-og";
|
||||
|
||||
type Props = { params: Promise<{ handle: string }> };
|
||||
|
||||
export async function generateMetadata({ params }: Props): Promise<Metadata> {
|
||||
const { handle } = await params;
|
||||
return metadataForHandle(handle);
|
||||
}
|
||||
|
||||
export default function PublicProfilePage({ params }: Props) {
|
||||
return <PostsGrid params={params} />;
|
||||
}
|
||||
@@ -0,0 +1,60 @@
|
||||
"use client";
|
||||
|
||||
/**
|
||||
* PostsGrid — client-side body for /u/[handle] (Posts tab).
|
||||
*
|
||||
* Split out from page.tsx so the page itself can be a server component
|
||||
* that exports `generateMetadata` for the public-profile OG card. The
|
||||
* /u/[handle]/layout.tsx still owns ProfileHeader + tab strip + the
|
||||
* outer max-w-3xl container; this grid just renders the post grid
|
||||
* inside that shell. Tapping a thumbnail jumps to
|
||||
* /u/[handle]/posts#post-<id> where the Instagram-style scroll feed
|
||||
* shows the full passages.
|
||||
*/
|
||||
|
||||
import { use, useEffect, useState } from "react";
|
||||
import { profile, type Post } from "@/lib/social";
|
||||
import { PostViews } from "@/components/social/post-views";
|
||||
import { usePublicProfile } from "./profile-context";
|
||||
|
||||
export function PostsGrid({
|
||||
params,
|
||||
}: {
|
||||
params: Promise<{ handle: string }>;
|
||||
}) {
|
||||
const { handle } = use(params);
|
||||
const data = usePublicProfile();
|
||||
const [feed, setFeed] = useState<Post[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
|
||||
useEffect(() => {
|
||||
let cancelled = false;
|
||||
setLoading(true);
|
||||
profile
|
||||
.feed(handle, 30)
|
||||
.then((rows) => {
|
||||
if (!cancelled) setFeed(rows ?? []);
|
||||
})
|
||||
.catch(() => {
|
||||
// Layout already 404'd if the handle is unknown; if the feed
|
||||
// itself fails we just show an empty grid rather than blocking
|
||||
// the page with an error toast.
|
||||
})
|
||||
.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/${data.handle}/posts#post-${p.id}`}
|
||||
emptyMessage="No posts yet — quotes shared by this user will appear here."
|
||||
/>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,28 @@
|
||||
/**
|
||||
* /u/[handle]/posts — public Instagram-style scroll feed.
|
||||
*
|
||||
* Server shell so we can export `generateMetadata` for OG previews on
|
||||
* direct shares of this URL. We re-use the same profile-OG metadata as
|
||||
* /u/[handle] — the post anchor (#post-<id>) that may be appended to
|
||||
* the URL is a client-side fragment and never reaches server-rendered
|
||||
* metadata, so we can't surface post-level OG here.
|
||||
*
|
||||
* (Post-level OG cards still work via the SharePostSheet → short link
|
||||
* → /share/[code] route, which DOES see the hash and dispatches to
|
||||
* `ogForPost` in share-og.ts.)
|
||||
*/
|
||||
|
||||
import type { Metadata } from "next";
|
||||
import { metadataForHandle } from "../profile-og";
|
||||
import { ScrollFeed } from "./scroll-feed";
|
||||
|
||||
type Props = { params: Promise<{ handle: string }> };
|
||||
|
||||
export async function generateMetadata({ params }: Props): Promise<Metadata> {
|
||||
const { handle } = await params;
|
||||
return metadataForHandle(handle);
|
||||
}
|
||||
|
||||
export default function PublicPostsFeedPage({ params }: Props) {
|
||||
return <ScrollFeed params={params} />;
|
||||
}
|
||||
@@ -0,0 +1,78 @@
|
||||
"use client";
|
||||
|
||||
/**
|
||||
* ScrollFeed — client body for /u/[handle]/posts (public scroll feed).
|
||||
*
|
||||
* Split out from page.tsx so the page itself can be a server component
|
||||
* exporting `generateMetadata` for the OG card. The layout owns the
|
||||
* ProfileHeader + tabs + outer container; this component only renders
|
||||
* the inner scroll column (the Instagram-style feed of full posts).
|
||||
*
|
||||
* Hash-anchor behaviour: when arriving with `#post-<id>`, we scroll to
|
||||
* that post once the feed has loaded. Used by the SharePostSheet flow
|
||||
* — share short URL resolves to /u/<handle>/posts#post-<id>, recipient
|
||||
* lands here, and we scroll to the post that was actually shared.
|
||||
*/
|
||||
|
||||
import { use, useEffect, useRef, useState } from "react";
|
||||
import { notFound } from "next/navigation";
|
||||
import { profile, SocialError, type Post } from "@/lib/social";
|
||||
import { PostScrollCard } from "@/components/social/post-scroll-card";
|
||||
|
||||
export function ScrollFeed({
|
||||
params,
|
||||
}: {
|
||||
params: Promise<{ handle: string }>;
|
||||
}) {
|
||||
const { handle } = use(params);
|
||||
const [feed, setFeed] = useState<Post[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [missing, setMissing] = useState(false);
|
||||
const scrolledToHashRef = useRef(false);
|
||||
|
||||
useEffect(() => {
|
||||
let cancelled = false;
|
||||
setLoading(true);
|
||||
profile
|
||||
.feed(handle, 60)
|
||||
.then((rows) => {
|
||||
if (cancelled) return;
|
||||
setFeed(rows ?? []);
|
||||
})
|
||||
.catch((err) => {
|
||||
if (err instanceof SocialError && err.status === 404) {
|
||||
setMissing(true);
|
||||
}
|
||||
})
|
||||
.finally(() => !cancelled && setLoading(false));
|
||||
return () => {
|
||||
cancelled = true;
|
||||
};
|
||||
}, [handle]);
|
||||
|
||||
useEffect(() => {
|
||||
if (loading || feed.length === 0 || scrolledToHashRef.current) return;
|
||||
if (typeof window === "undefined") return;
|
||||
const hash = window.location.hash;
|
||||
if (!hash) return;
|
||||
scrolledToHashRef.current = true;
|
||||
requestAnimationFrame(() => {
|
||||
const el = document.getElementById(hash.slice(1));
|
||||
if (el) el.scrollIntoView({ block: "start", behavior: "auto" });
|
||||
});
|
||||
}, [loading, feed.length]);
|
||||
|
||||
if (missing) notFound();
|
||||
|
||||
return (
|
||||
<div className="max-w-xl w-full mx-auto space-y-6">
|
||||
{loading ? (
|
||||
<p className="text-sm text-muted-foreground">Loading…</p>
|
||||
) : feed.length === 0 ? (
|
||||
<p className="text-sm text-muted-foreground">No posts yet.</p>
|
||||
) : (
|
||||
feed.map((p) => <PostScrollCard key={p.id} post={p} />)
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,19 @@
|
||||
"use client";
|
||||
|
||||
import { createContext, useContext } from "react";
|
||||
import type { PublicProfile } from "@/lib/social";
|
||||
|
||||
/** Set by the /u/[handle] layout after it fetches the profile. Child
|
||||
* pages read it to render content (e.g. the Collections tab needs the
|
||||
* profile's `public_collections` array) without a second fetch. */
|
||||
export const PublicProfileContext = createContext<PublicProfile | null>(null);
|
||||
|
||||
export function usePublicProfile(): PublicProfile {
|
||||
const v = useContext(PublicProfileContext);
|
||||
if (!v) {
|
||||
throw new Error(
|
||||
"usePublicProfile must be used inside the /u/[handle] layout",
|
||||
);
|
||||
}
|
||||
return v;
|
||||
}
|
||||
@@ -0,0 +1,47 @@
|
||||
/**
|
||||
* Shared `generateMetadata` helper for /u/[handle] routes.
|
||||
*
|
||||
* Both `/u/[handle]/page.tsx` (Posts tab) and `/u/[handle]/posts/page.tsx`
|
||||
* (scroll feed) want the same profile-flavoured OG card on direct URL
|
||||
* shares — the difference between the two is purely the rendered body,
|
||||
* not the social preview. This helper fetches the profile via the
|
||||
* server-side BFF client and hands it to the canonical `ogForProfile`
|
||||
* builder.
|
||||
*
|
||||
* Failures (404 handle, BFF unreachable, malformed payload) fall back
|
||||
* to the site-level `ogDefault` so unfurlers still get a valid card
|
||||
* rather than nothing.
|
||||
*
|
||||
* Note: the page's underlying `app/u/[handle]/layout.tsx` is a client
|
||||
* component and can't export `generateMetadata`. The metadata has to
|
||||
* live on the (server) page that mounts the client tree, which is why
|
||||
* we slim each page.tsx down to a server shell + a separate client
|
||||
* content file.
|
||||
*/
|
||||
|
||||
import type { Metadata } from "next";
|
||||
import { bff } from "@/lib/bff";
|
||||
import { ogDefault, ogForProfile } from "@/lib/og";
|
||||
|
||||
type PublicProfileForOg = {
|
||||
handle: string;
|
||||
name: string;
|
||||
post_count?: number;
|
||||
};
|
||||
|
||||
export async function metadataForHandle(handle: string): Promise<Metadata> {
|
||||
try {
|
||||
const profile = await bff<PublicProfileForOg>(
|
||||
`/u/${encodeURIComponent(handle)}`,
|
||||
{ revalidate: 60 },
|
||||
);
|
||||
if (!profile) return ogDefault();
|
||||
return ogForProfile({
|
||||
handle: profile.handle,
|
||||
name: profile.name,
|
||||
postCount: profile.post_count,
|
||||
});
|
||||
} catch {
|
||||
return ogDefault();
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user