follow-button.tsx

"use client"

import { useRouter } from "next/navigation"
import { useEffect, useState } from "react"
import { Icons } from "./icons"
import { useFollow } from "./profile/hooks/use-follow"
import { Button } from "./ui/button"
import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger } from "./ui/dialog"

export const FollowButton = ({
    userId,
    username,
    isFollowing = false,
}: {
    userId: string
    username: string
    isFollowing?: boolean
}) => {
    const followMutation = useFollow("follow")
    const unfollowMutation = useFollow("unfollow")

    const [text, setText] = useState<"Following" | "Unfollow">("Following")
    const [isHovered, setIsHovered] = useState(false)
    const [open, setOpen] = useState(false)

    const router = useRouter()

    useEffect(() => {
        if (followMutation.isSuccess) {
            router.refresh()
        }
        if (unfollowMutation.isSuccess) {
            setOpen(false)
            router.refresh()
        }
    }, [router, followMutation.isSuccess, unfollowMutation.isSuccess])

    return (
        <Dialog open={open} onOpenChange={setOpen}>
            {isFollowing ? (
                <DialogTrigger asChild>
                    <Button variant={`${isHovered ? "destructive" : "outline"}`} size="lg"
                        className="w-24"
                        onMouseEnter={() => {
                            setText("Unfollow")
                            setIsHovered(true)
                        }}
                        onMouseOut={() => {
                            setText("Following")
                            setIsHovered(false)
                        }}>
                        {text}
                    </Button>
                </DialogTrigger>
            ) : (
                <Button size="lg" onClick={() => followMutation.mutate({ userId })}>
                    Follow
                </Button>
            )}
            <DialogContent>
                <DialogHeader>
                    <DialogTitle>Unfollow @{username}?</DialogTitle>
                    <DialogDescription>
                        You can still view their profile, unless their Gweets are protected.
                    </DialogDescription>
                </DialogHeader>
                <DialogFooter>
                    <Button type="submit" onClick={() => unfollowMutation.mutate({ userId })} disabled={unfollowMutation.isLoading}>
                        {unfollowMutation.isLoading && (
                            <Icons.spinner className="mr-2 h-4 w-4 animate-spin" />
                        )}
                        Unfollow
                    </Button>
                </DialogFooter>
            </DialogContent>
        </Dialog>
    )
}