refactor(frontend): FollowButton useOptimistic + Server Action; edit-profile-form Server Action

thoughts-frontend/components/follow-button.tsx

@@ -1,66 +1,41 @@
-"use client";
+"use client"
 
-import { useState } from "react";
-import { useRouter } from "next/navigation";
-import { useAuth } from "@/hooks/use-auth";
-import { followUser, unfollowUser } from "@/lib/api";
-import { Button } from "@/components/ui/button";
-import { toast } from "sonner";
-import { UserPlus, UserMinus } from "lucide-react";
+import { useOptimistic } from "react"
+import { followUser, unfollowUser } from "@/app/actions/social"
+import { Button } from "@/components/ui/button"
+import { toast } from "sonner"
+import { UserPlus, UserMinus } from "lucide-react"
 
 interface FollowButtonProps {
-  username: string;
-  isInitiallyFollowing: boolean;
+  username: string
+  isInitiallyFollowing: boolean
 }
 
-export function FollowButton({
-  username,
-  isInitiallyFollowing,
-}: FollowButtonProps) {
-  const [isFollowing, setIsFollowing] = useState(isInitiallyFollowing);
-  const [isLoading, setIsLoading] = useState(false);
-  const { token } = useAuth();
-  const router = useRouter();
-
-  const handleClick = async () => {
-    if (!token) {
-      toast.error("You must be logged in to follow users.");
-      return;
-    }
-
-    setIsLoading(true);
-    const action = isFollowing ? unfollowUser : followUser;
+export function FollowButton({ username, isInitiallyFollowing }: FollowButtonProps) {
+  const [optimisticFollowing, setOptimisticFollowing] = useOptimistic(isInitiallyFollowing)
 
+  async function handleClick() {
+    const next = !optimisticFollowing
+    setOptimisticFollowing(next)
     try {
-      // Optimistic update
-      setIsFollowing(!isFollowing);
-      await action(username, token);
-      router.refresh(); // Re-fetch server component data to get the latest follower count etc.
+      await (next ? followUser(username) : unfollowUser(username))
     } catch {
-      // Revert on error
-      setIsFollowing(isFollowing);
-      toast.error(`Failed to ${isFollowing ? "unfollow" : "follow"} user.`);
-    } finally {
-      setIsLoading(false);
+      setOptimisticFollowing(!next) // revert
+      toast.error(`Failed to ${next ? "follow" : "unfollow"} user.`)
     }
-  };
+  }
 
   return (
     <Button
       onClick={handleClick}
-      disabled={isLoading}
-      variant={isFollowing ? "secondary" : "default"}
-      data-following={isFollowing}
+      variant={optimisticFollowing ? "secondary" : "default"}
+      data-following={optimisticFollowing}
     >
-      {isFollowing ? (
-        <>
-          <UserMinus className="mr-2 h-4 w-4" /> Unfollow
-        </>
+      {optimisticFollowing ? (
+        <><UserMinus className="mr-2 h-4 w-4" /> Unfollow</>
       ) : (
-        <>
-          <UserPlus className="mr-2 h-4 w-4" /> Follow
-        </>
+        <><UserPlus className="mr-2 h-4 w-4" /> Follow</>
       )}
     </Button>
-  );
+  )
 }