diff --git a/thoughts-frontend/app/remote-actor/page.tsx b/thoughts-frontend/app/remote-actor/page.tsx
index a5e0881..9d6adb1 100644
--- a/thoughts-frontend/app/remote-actor/page.tsx
+++ b/thoughts-frontend/app/remote-actor/page.tsx
@@ -65,8 +65,11 @@ export default async function RemoteActorPage({
}
const actor = actorResult.value;
- const posts =
- postsResult.status === "fulfilled" ? postsResult.value.items : [];
+ const postsData = postsResult.status === "fulfilled" ? postsResult.value : null;
+ const posts = postsData?.items ?? [];
+ const totalPages = postsData
+ ? Math.ceil(postsData.total / postsData.per_page)
+ : 1;
const me =
meResult.status === "fulfilled" ? (meResult.value as Me | null) : null;
const following =
@@ -77,7 +80,9 @@ export default async function RemoteActorPage({
diff --git a/thoughts-frontend/components/remote-user-profile/index.tsx b/thoughts-frontend/components/remote-user-profile/index.tsx
index bd8cfc8..63bbb61 100644
--- a/thoughts-frontend/components/remote-user-profile/index.tsx
+++ b/thoughts-frontend/components/remote-user-profile/index.tsx
@@ -2,7 +2,7 @@
import { useState } from "react";
import { UserMinus, UserPlus } from "lucide-react";
-import { followUser, unfollowUser, RemoteActor, Thought, Me } from "@/lib/api";
+import { followUser, unfollowUser, getRemoteActorPosts, RemoteActor, Thought, Me } from "@/lib/api";
import { Card } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
@@ -14,14 +14,18 @@ import { Connections } from "./connections";
interface RemoteUserProfileProps {
actor: RemoteActor;
+ handle: string;
initialPosts: Thought[];
+ initialTotalPages: number;
me: Me | null;
initialFollowed?: boolean;
}
export function RemoteUserProfile({
actor,
+ handle,
initialPosts,
+ initialTotalPages,
me,
initialFollowed = false,
}: RemoteUserProfileProps) {
@@ -29,6 +33,24 @@ export function RemoteUserProfile({
const [followLoading, setFollowLoading] = useState(false);
const { token } = useAuth();
+ const [posts, setPosts] = useState(initialPosts);
+ const [page, setPage] = useState(1);
+ const [totalPages] = useState(initialTotalPages);
+ const [loadingMore, setLoadingMore] = useState(false);
+
+ const loadMore = async () => {
+ setLoadingMore(true);
+ try {
+ const result = await getRemoteActorPosts(handle, page + 1, token);
+ setPosts((prev) => [...prev, ...result.items]);
+ setPage((p) => p + 1);
+ } catch {
+ toast.error("Failed to load more posts.");
+ } finally {
+ setLoadingMore(false);
+ }
+ };
+
const [followersActive, setFollowersActive] = useState(false);
const [followingActive, setFollowingActive] = useState(false);
@@ -108,8 +130,20 @@ export function RemoteUserProfile({
- {initialPosts.length > 0 ? (
-
+ {posts.length > 0 ? (
+ <>
+
+ {page < totalPages && (
+
+ )}
+ >
) : (