"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"; interface FollowButtonProps { 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; try { // Optimistic update setIsFollowing(!isFollowing); await action(username, token); router.refresh(); // Re-fetch server component data to get the latest follower count etc. } catch { // Revert on error setIsFollowing(isFollowing); toast.error(`Failed to ${isFollowing ? "unfollow" : "follow"} user.`); } finally { setIsLoading(false); } }; return ( ); }