feat: add user search
This commit is contained in:
gosangam
+20
-47
@@ -1,55 +1,28 @@
|
||||
"use client";
|
||||
|
||||
/**
|
||||
* Public profile — Posts tab (default).
|
||||
* /u/[handle] — public profile, Posts tab (default).
|
||||
*
|
||||
* The /u/[handle] layout owns the ProfileHeader + tab strip + container;
|
||||
* this page only renders the post grid. Tapping a thumbnail jumps to
|
||||
* /u/[handle]/posts#post-<id> where the Instagram-style scroll feed
|
||||
* shows the full passages.
|
||||
* 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 { use, useEffect, useState } from "react";
|
||||
import { profile, type Post } from "@/lib/social";
|
||||
import { PostViews } from "@/components/social/post-views";
|
||||
import { usePublicProfile } from "./profile-context";
|
||||
import type { Metadata } from "next";
|
||||
import { PostsGrid } from "./posts-grid";
|
||||
import { metadataForHandle } from "./profile-og";
|
||||
|
||||
export default function PublicProfilePostsPage(props: {
|
||||
params: Promise<{ handle: string }>;
|
||||
}) {
|
||||
const { handle } = use(props.params);
|
||||
const data = usePublicProfile();
|
||||
const [feed, setFeed] = useState<Post[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
type Props = { params: Promise<{ handle: string }> };
|
||||
|
||||
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]);
|
||||
export async function generateMetadata({ params }: Props): Promise<Metadata> {
|
||||
const { handle } = await params;
|
||||
return metadataForHandle(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."
|
||||
/>
|
||||
);
|
||||
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."
|
||||
/>
|
||||
);
|
||||
}
|
||||
@@ -1,76 +1,28 @@
|
||||
"use client";
|
||||
|
||||
/**
|
||||
* /u/[handle]/posts — public Instagram-style scroll feed.
|
||||
*
|
||||
* Mirrors /u/me/posts but read-only (no Delete / Update background). The
|
||||
* grid thumbnail on /u/[handle] links here with a `#post-<id>` hash so
|
||||
* the feed scrolls to the tapped post on mount.
|
||||
* 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.
|
||||
*
|
||||
* The parent /u/[handle]/layout owns the ProfileHeader + tab strip + the
|
||||
* outer max-w-3xl container, so this page only needs the inner scroll
|
||||
* column. The max-w-xl cap matches /u/me/posts so the column reads at
|
||||
* the same width on desktop; on mobile both pages fall back to viewport
|
||||
* width with the layout-supplied gutters.
|
||||
* (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 { 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";
|
||||
import type { Metadata } from "next";
|
||||
import { metadataForHandle } from "../profile-og";
|
||||
import { ScrollFeed } from "./scroll-feed";
|
||||
|
||||
export default function PublicPostsFeedPage(props: {
|
||||
params: Promise<{ handle: string }>;
|
||||
}) {
|
||||
const { handle } = use(props.params);
|
||||
const [feed, setFeed] = useState<Post[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [missing, setMissing] = useState(false);
|
||||
const scrolledToHashRef = useRef(false);
|
||||
type Props = { params: Promise<{ handle: string }> };
|
||||
|
||||
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]);
|
||||
export async function generateMetadata({ params }: Props): Promise<Metadata> {
|
||||
const { handle } = await params;
|
||||
return metadataForHandle(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>
|
||||
);
|
||||
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,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