+10 -1

app/p/[didOrHandle]/ProfilePageLayout.tsx

··· 12 12 import { usePubTheme } from "components/ThemeManager/PublicationThemeProvider"; 13 13 import { colorToString } from "components/ThemeManager/useColorAttribute"; 14 14 import type { Post } from "app/(home-pages)/reader/getReaderFeed"; 15 15 + import type { Cursor } from "./getProfilePosts"; 15 16 16 17 export const ProfilePageLayout = (props: { 17 18 publications: { record: Json; uri: string }[]; 18 19 posts: Post[]; 20 20 + nextCursor: Cursor | null; 19 21 profile: { 20 22 did: string; 21 23 handle: string | null; ··· 37 39 profile={props.profile} 38 40 publications={props.publications} 39 41 posts={props.posts} 42 42 + nextCursor={props.nextCursor} 40 43 /> 41 44 ), 42 45 controls: null, ··· 52 55 const ProfilePageContent = (props: { 53 56 publications: { record: Json; uri: string }[]; 54 57 posts: Post[]; 58 58 + nextCursor: Cursor | null; 55 59 profile: { 56 60 did: string; 57 61 handle: string | null; ··· 102 106 ))} 103 107 </div> 104 108 <ProfileTabs tab={tab} setTab={setTab} /> 105 105 - <TabContent tab={tab} posts={props.posts} /> 109 109 + <TabContent 110 110 + tab={tab} 111 111 + did={props.profile.did} 112 112 + posts={props.posts} 113 113 + nextCursor={props.nextCursor} 114 114 + /> 106 115 </div> 107 116 ); 108 117 };

+95 -10

app/p/[didOrHandle]/ProfileTabs/Tabs.tsx

··· 2 2 import { profileTabsType } from "../ProfilePageLayout"; 3 3 import { PostListing } from "components/PostListing"; 4 4 import type { Post } from "app/(home-pages)/reader/getReaderFeed"; 5 5 + import type { Cursor } from "../getProfilePosts"; 6 6 + import { getProfilePosts } from "../getProfilePosts"; 7 7 + import useSWRInfinite from "swr/infinite"; 8 8 + import { useEffect, useRef } from "react"; 5 9 6 10 export const ProfileTabs = (props: { 7 11 tab: profileTabsType; ··· 39 43 ); 40 44 }; 41 45 42 42 - export const TabContent = (props: { tab: profileTabsType; posts: Post[] }) => { 46 46 + export const TabContent = (props: { 47 47 + tab: profileTabsType; 48 48 + did: string; 49 49 + posts: Post[]; 50 50 + nextCursor: Cursor | null; 51 51 + }) => { 43 52 switch (props.tab) { 44 53 case "posts": 45 54 return ( 46 46 - <div className="flex flex-col gap-2 text-left"> 47 47 - {props.posts.length === 0 ? ( 48 48 - <div className="text-tertiary text-center py-4">No posts yet</div> 49 49 - ) : ( 50 50 - props.posts.map((post) => ( 51 51 - <PostListing key={post.documents.uri} {...post} /> 52 52 - )) 53 53 - )} 54 54 - </div> 55 55 + <ProfilePostsContent 56 56 + did={props.did} 57 57 + posts={props.posts} 58 58 + nextCursor={props.nextCursor} 59 59 + /> 55 60 ); 56 61 case "comments": 57 62 return <div>comments here!</div>; ··· 59 64 return <div>subscriptions here!</div>; 60 65 } 61 66 }; 67 67 + 68 68 + const ProfilePostsContent = (props: { 69 69 + did: string; 70 70 + posts: Post[]; 71 71 + nextCursor: Cursor | null; 72 72 + }) => { 73 73 + const getKey = ( 74 74 + pageIndex: number, 75 75 + previousPageData: { 76 76 + posts: Post[]; 77 77 + nextCursor: Cursor | null; 78 78 + } | null, 79 79 + ) => { 80 80 + // Reached the end 81 81 + if (previousPageData && !previousPageData.nextCursor) return null; 82 82 + 83 83 + // First page, we don't have previousPageData 84 84 + if (pageIndex === 0) return ["profile-posts", props.did, null] as const; 85 85 + 86 86 + // Add the cursor to the key 87 87 + return ["profile-posts", props.did, previousPageData?.nextCursor] as const; 88 88 + }; 89 89 + 90 90 + const { data, size, setSize, isValidating } = useSWRInfinite( 91 91 + getKey, 92 92 + ([_, did, cursor]) => getProfilePosts(did, cursor), 93 93 + { 94 94 + fallbackData: [{ posts: props.posts, nextCursor: props.nextCursor }], 95 95 + revalidateFirstPage: false, 96 96 + }, 97 97 + ); 98 98 + 99 99 + const loadMoreRef = useRef<HTMLDivElement>(null); 100 100 + 101 101 + // Set up intersection observer to load more when trigger element is visible 102 102 + useEffect(() => { 103 103 + const observer = new IntersectionObserver( 104 104 + (entries) => { 105 105 + if (entries[0].isIntersecting && !isValidating) { 106 106 + const hasMore = data && data[data.length - 1]?.nextCursor; 107 107 + if (hasMore) { 108 108 + setSize(size + 1); 109 109 + } 110 110 + } 111 111 + }, 112 112 + { threshold: 0.1 }, 113 113 + ); 114 114 + 115 115 + if (loadMoreRef.current) { 116 116 + observer.observe(loadMoreRef.current); 117 117 + } 118 118 + 119 119 + return () => observer.disconnect(); 120 120 + }, [data, size, setSize, isValidating]); 121 121 + 122 122 + const allPosts = data ? data.flatMap((page) => page.posts) : []; 123 123 + 124 124 + if (allPosts.length === 0 && !isValidating) { 125 125 + return <div className="text-tertiary text-center py-4">No posts yet</div>; 126 126 + } 127 127 + 128 128 + return ( 129 129 + <div className="flex flex-col gap-2 text-left relative"> 130 130 + {allPosts.map((post) => ( 131 131 + <PostListing key={post.documents.uri} {...post} /> 132 132 + ))} 133 133 + {/* Trigger element for loading more posts */} 134 134 + <div 135 135 + ref={loadMoreRef} 136 136 + className="absolute bottom-96 left-0 w-full h-px pointer-events-none" 137 137 + aria-hidden="true" 138 138 + /> 139 139 + {isValidating && ( 140 140 + <div className="text-center text-tertiary py-4"> 141 141 + Loading more posts... 142 142 + </div> 143 143 + )} 144 144 + </div> 145 145 + ); 146 146 + };

+95

app/p/[didOrHandle]/getProfilePosts.ts

··· 1 1 + "use server"; 2 2 + 3 3 + import { supabaseServerClient } from "supabase/serverClient"; 4 4 + import { getPublicationURL } from "app/lish/createPub/getPublicationURL"; 5 5 + import type { Post } from "app/(home-pages)/reader/getReaderFeed"; 6 6 + 7 7 + export type Cursor = { 8 8 + indexed_at: string; 9 9 + uri: string; 10 10 + }; 11 11 + 12 12 + export async function getProfilePosts( 13 13 + did: string, 14 14 + cursor?: Cursor | null, 15 15 + ): Promise<{ posts: Post[]; nextCursor: Cursor | null }> { 16 16 + const limit = 20; 17 17 + 18 18 + let query = supabaseServerClient 19 19 + .from("documents") 20 20 + .select( 21 21 + `*, 22 22 + comments_on_documents(count), 23 23 + document_mentions_in_bsky(count), 24 24 + documents_in_publications(publications(*))`, 25 25 + ) 26 26 + .like("uri", `at://${did}/%`) 27 27 + .order("indexed_at", { ascending: false }) 28 28 + .order("uri", { ascending: false }) 29 29 + .limit(limit); 30 30 + 31 31 + if (cursor) { 32 32 + query = query.or( 33 33 + `indexed_at.lt.${cursor.indexed_at},and(indexed_at.eq.${cursor.indexed_at},uri.lt.${cursor.uri})`, 34 34 + ); 35 35 + } 36 36 + 37 37 + let [{ data: docs }, { data: pubs }, { data: profile }] = await Promise.all([ 38 38 + query, 39 39 + supabaseServerClient 40 40 + .from("publications") 41 41 + .select("*") 42 42 + .eq("identity_did", did), 43 43 + supabaseServerClient 44 44 + .from("bsky_profiles") 45 45 + .select("handle") 46 46 + .eq("did", did) 47 47 + .single(), 48 48 + ]); 49 49 + 50 50 + // Build a map of publications for quick lookup 51 51 + let pubMap = new Map<string, NonNullable<typeof pubs>[number]>(); 52 52 + for (let pub of pubs || []) { 53 53 + pubMap.set(pub.uri, pub); 54 54 + } 55 55 + 56 56 + // Transform data to Post[] format 57 57 + let handle = profile?.handle ? `@${profile.handle}` : null; 58 58 + let posts: Post[] = []; 59 59 + 60 60 + for (let doc of docs || []) { 61 61 + let pubFromDoc = doc.documents_in_publications?.[0]?.publications; 62 62 + let pub = pubFromDoc ? pubMap.get(pubFromDoc.uri) || pubFromDoc : null; 63 63 + 64 64 + let post: Post = { 65 65 + author: handle, 66 66 + documents: { 67 67 + data: doc.data, 68 68 + uri: doc.uri, 69 69 + indexed_at: doc.indexed_at, 70 70 + comments_on_documents: doc.comments_on_documents, 71 71 + document_mentions_in_bsky: doc.document_mentions_in_bsky, 72 72 + }, 73 73 + }; 74 74 + 75 75 + if (pub) { 76 76 + post.publication = { 77 77 + href: getPublicationURL(pub), 78 78 + pubRecord: pub.record, 79 79 + uri: pub.uri, 80 80 + }; 81 81 + } 82 82 + 83 83 + posts.push(post); 84 84 + } 85 85 + 86 86 + const nextCursor = 87 87 + posts.length === limit 88 88 + ? { 89 89 + indexed_at: posts[posts.length - 1].documents.indexed_at, 90 90 + uri: posts[posts.length - 1].documents.uri, 91 91 + } 92 92 + : null; 93 93 + 94 94 + return { posts, nextCursor }; 95 95 + }

+16 -61

app/p/[didOrHandle]/page.tsx

··· 2 2 import { NotFoundLayout } from "components/PageLayouts/NotFoundLayout"; 3 3 import { ProfilePageLayout } from "./ProfilePageLayout"; 4 4 import { supabaseServerClient } from "supabase/serverClient"; 5 5 - import { getPublicationURL } from "app/lish/createPub/getPublicationURL"; 6 6 - import type { Post } from "app/(home-pages)/reader/getReaderFeed"; 5 5 + import { getProfilePosts } from "./getProfilePosts"; 7 6 8 7 export default async function ProfilePage(props: { 9 8 params: Promise<{ didOrHandle: string }>; ··· 30 29 did = resolved; 31 30 } 32 31 33 33 - // Fetch profile, publications, and documents in parallel 34 34 - let [{ data: profile }, { data: pubs }, { data: docs }] = await Promise.all([ 35 35 - supabaseServerClient 36 36 - .from("bsky_profiles") 37 37 - .select(`*`) 38 38 - .eq("did", did) 39 39 - .single(), 40 40 - supabaseServerClient 41 41 - .from("publications") 42 42 - .select("*") 43 43 - .eq("identity_did", did), 44 44 - supabaseServerClient 45 45 - .from("documents") 46 46 - .select( 47 47 - `*, 48 48 - comments_on_documents(count), 49 49 - document_mentions_in_bsky(count), 50 50 - documents_in_publications(publications(*))`, 51 51 - ) 52 52 - .like("uri", `at://${did}/%`) 53 53 - .order("indexed_at", { ascending: false }), 54 54 - ]); 55 55 - 56 56 - // Build a map of publications for quick lookup 57 57 - let pubMap = new Map<string, NonNullable<typeof pubs>[number]>(); 58 58 - for (let pub of pubs || []) { 59 59 - pubMap.set(pub.uri, pub); 60 60 - } 61 61 - 62 62 - // Transform data to Post[] format 63 63 - let handle = profile?.handle ? `@${profile.handle}` : null; 64 64 - let posts: Post[] = []; 65 65 - 66 66 - for (let doc of docs || []) { 67 67 - // Find the publication for this document (if any) 68 68 - let pubFromDoc = doc.documents_in_publications?.[0]?.publications; 69 69 - let pub = pubFromDoc ? pubMap.get(pubFromDoc.uri) || pubFromDoc : null; 70 70 - 71 71 - let post: Post = { 72 72 - author: handle, 73 73 - documents: { 74 74 - data: doc.data, 75 75 - uri: doc.uri, 76 76 - indexed_at: doc.indexed_at, 77 77 - comments_on_documents: doc.comments_on_documents, 78 78 - document_mentions_in_bsky: doc.document_mentions_in_bsky, 79 79 - }, 80 80 - }; 81 81 - 82 82 - if (pub) { 83 83 - post.publication = { 84 84 - href: getPublicationURL(pub), 85 85 - pubRecord: pub.record, 86 86 - uri: pub.uri, 87 87 - }; 88 88 - } 89 89 - 90 90 - posts.push(post); 91 91 - } 32 32 + // Fetch profile, publications, and initial posts in parallel 33 33 + let [{ data: profile }, { data: pubs }, { posts, nextCursor }] = 34 34 + await Promise.all([ 35 35 + supabaseServerClient 36 36 + .from("bsky_profiles") 37 37 + .select(`*`) 38 38 + .eq("did", did) 39 39 + .single(), 40 40 + supabaseServerClient 41 41 + .from("publications") 42 42 + .select("*") 43 43 + .eq("identity_did", did), 44 44 + getProfilePosts(did), 45 45 + ]); 92 46 93 47 return ( 94 48 <ProfilePageLayout 95 49 profile={profile} 96 50 publications={pubs || []} 97 51 posts={posts} 52 52 + nextCursor={nextCursor} 98 53 /> 99 54 ); 100 55 }