112 lines
2.9 KiB
TypeScript
112 lines
2.9 KiB
TypeScript
"use client"
|
|
|
|
import { useOptimistic, useRef } 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
|
|
}
|
|
|
|
const BURST_COLORS = ["#2563eb", "#06b6d4", "#10b981", "#f59e0b", "#a855f7", "#ef4444"]
|
|
|
|
function burstParticles(canvas: HTMLCanvasElement) {
|
|
const ctx = canvas.getContext("2d")
|
|
if (!ctx) return
|
|
|
|
const cx = canvas.width / 2
|
|
const cy = canvas.height / 2
|
|
const particles = Array.from({ length: 14 }, (_, i) => {
|
|
const angle = (i / 14) * Math.PI * 2
|
|
const speed = 2.5 + Math.random() * 2
|
|
return {
|
|
x: cx,
|
|
y: cy,
|
|
vx: Math.cos(angle) * speed,
|
|
vy: Math.sin(angle) * speed,
|
|
r: 3 + Math.random() * 3,
|
|
color: BURST_COLORS[i % BURST_COLORS.length],
|
|
life: 1,
|
|
}
|
|
})
|
|
|
|
let rafId: number
|
|
|
|
function frame() {
|
|
if (!canvas.isConnected) {
|
|
cancelAnimationFrame(rafId)
|
|
return
|
|
}
|
|
ctx!.clearRect(0, 0, canvas.width, canvas.height)
|
|
let alive = false
|
|
for (const p of particles) {
|
|
p.x += p.vx
|
|
p.y += p.vy
|
|
p.vy += 0.08
|
|
p.life -= 0.03
|
|
if (p.life > 0) {
|
|
alive = true
|
|
ctx!.globalAlpha = p.life
|
|
ctx!.fillStyle = p.color
|
|
ctx!.beginPath()
|
|
ctx!.arc(p.x, p.y, p.r, 0, Math.PI * 2)
|
|
ctx!.fill()
|
|
}
|
|
}
|
|
ctx!.globalAlpha = 1
|
|
if (alive) {
|
|
rafId = requestAnimationFrame(frame)
|
|
}
|
|
}
|
|
|
|
rafId = requestAnimationFrame(frame)
|
|
}
|
|
|
|
export function FollowButton({ username, isInitiallyFollowing }: FollowButtonProps) {
|
|
const [optimisticFollowing, setOptimisticFollowing] = useOptimistic(isInitiallyFollowing)
|
|
const canvasRef = useRef<HTMLCanvasElement>(null)
|
|
|
|
async function handleClick() {
|
|
const next = !optimisticFollowing
|
|
setOptimisticFollowing(next)
|
|
|
|
if (next && canvasRef.current) {
|
|
burstParticles(canvasRef.current)
|
|
}
|
|
|
|
try {
|
|
await (next ? followUser(username) : unfollowUser(username))
|
|
} catch {
|
|
setOptimisticFollowing(!next)
|
|
toast.error(`Failed to ${next ? "follow" : "unfollow"} user.`)
|
|
}
|
|
}
|
|
|
|
return (
|
|
<div className="relative inline-block">
|
|
<canvas
|
|
ref={canvasRef}
|
|
width={160}
|
|
height={80}
|
|
className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 pointer-events-none"
|
|
aria-hidden
|
|
/>
|
|
<Button
|
|
onClick={handleClick}
|
|
variant={optimisticFollowing ? "secondary" : "default"}
|
|
className="relative rounded-full"
|
|
data-following={optimisticFollowing}
|
|
>
|
|
{optimisticFollowing ? (
|
|
<><UserMinus className="mr-2 h-4 w-4" /> Unfollow</>
|
|
) : (
|
|
<><UserPlus className="mr-2 h-4 w-4" /> Follow</>
|
|
)}
|
|
</Button>
|
|
</div>
|
|
)
|
|
}
|