refactor(frontend): split RemoteUserProfile into ProfileCard + Connections

2026-05-15 20:16:39 +02:00
parent 688e7b0018
commit c1c9539978
4 changed files with 313 additions and 289 deletions
--- a/thoughts-frontend/components/remote-user-profile/index.tsx
+++ b/thoughts-frontend/components/remote-user-profile/index.tsx
@@ -0,0 +1,147 @@
+"use client";
+
+import { useState } from "react";
+import { UserMinus, UserPlus } from "lucide-react";
+import { followUser, unfollowUser, 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";
+import { ThoughtList } from "@/components/thought-list";
+import { toast } from "sonner";
+import { useAuth } from "@/hooks/use-auth";
+import { ProfileCard } from "./profile-card";
+import { Connections } from "./connections";
+
+interface RemoteUserProfileProps {
+  actor: RemoteActor;
+  initialPosts: Thought[];
+  me: Me | null;
+  initialFollowed?: boolean;
+}
+
+export function RemoteUserProfile({
+  actor,
+  initialPosts,
+  me,
+  initialFollowed = false,
+}: RemoteUserProfileProps) {
+  const [followed, setFollowed] = useState(initialFollowed);
+  const [followLoading, setFollowLoading] = useState(false);
+  const { token } = useAuth();
+
+  type ConnectionTab = "posts" | "followers" | "following";
+  const [activeTab, setActiveTab] = useState<ConnectionTab>("posts");
+  const [followersActive, setFollowersActive] = useState(false);
+  const [followingActive, setFollowingActive] = useState(false);
+
+  const handleFollow = async () => {
+    if (!token) {
+      toast.error("You must be logged in to follow users.");
+      return;
+    }
+    setFollowLoading(true);
+    try {
+      if (followed) {
+        await unfollowUser(actor.handle, token);
+        setFollowed(false);
+      } else {
+        await followUser(actor.handle, token);
+        setFollowed(true);
+        toast.success(`Follow request sent to ${actor.handle}`);
+      }
+    } catch {
+      toast.error(followed ? "Failed to unfollow." : "Failed to send follow request.");
+    } finally {
+      setFollowLoading(false);
+    }
+  };
+
+  const handleTabChange = (tab: string) => {
+    setActiveTab(tab as ConnectionTab);
+    if (tab === "followers") setFollowersActive(true);
+    if (tab === "following") setFollowingActive(true);
+  };
+
+  const isOwnProfile = me?.username === actor.handle;
+
+  const followButton =
+    !isOwnProfile && token ? (
+      <Button
+        onClick={handleFollow}
+        disabled={followLoading}
+        variant={followed ? "secondary" : "default"}
+        size="sm"
+      >
+        {followed ? (
+          <>
+            <UserMinus className="mr-2 h-4 w-4" /> Unfollow
+          </>
+        ) : (
+          <>
+            <UserPlus className="mr-2 h-4 w-4" /> Follow
+          </>
+        )}
+      </Button>
+    ) : undefined;
+
+  return (
+    <div>
+      <div
+        className="h-48 bg-muted bg-cover bg-center"
+        style={{
+          backgroundImage: actor.bannerUrl ? `url(${actor.bannerUrl})` : "none",
+        }}
+      />
+
+      <main className="container mx-auto max-w-6xl p-4 -mt-16 grid grid-cols-1 lg:grid-cols-4 gap-8">
+        <aside className="col-span-1 space-y-6">
+          <div className="sticky top-20 space-y-6">
+            <Card className="p-6 bg-card/80 backdrop-blur-lg">
+              <ProfileCard actor={actor} action={followButton} />
+            </Card>
+          </div>
+        </aside>
+
+        <div className="col-span-1 lg:col-span-3">
+          <Tabs defaultValue="posts" onValueChange={handleTabChange}>
+            <TabsList>
+              <TabsTrigger value="posts">Posts</TabsTrigger>
+              <TabsTrigger value="followers">Followers</TabsTrigger>
+              <TabsTrigger value="following">Following</TabsTrigger>
+            </TabsList>
+
+            <TabsContent value="posts" className="space-y-4 mt-4">
+              {initialPosts.length > 0 ? (
+                <ThoughtList thoughts={initialPosts} currentUser={me} />
+              ) : (
+                <Card className="flex items-center justify-center h-48">
+                  <p className="text-center text-muted-foreground">
+                    Posts are being fetched — check back soon.
+                  </p>
+                </Card>
+              )}
+            </TabsContent>
+
+            <TabsContent value="followers" className="mt-4">
+              <Connections
+                handle={actor.handle}
+                token={token}
+                type="followers"
+                active={followersActive}
+              />
+            </TabsContent>
+
+            <TabsContent value="following" className="mt-4">
+              <Connections
+                handle={actor.handle}
+                token={token}
+                type="following"
+                active={followingActive}
+              />
+            </TabsContent>
+          </Tabs>
+        </div>
+      </main>
+    </div>
+  );
+}