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 (
        <div onClick={(e) => {
            e.preventDefault()
            e.stopPropagation()
        }}>
            <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>
        </div>
    )
}