remco
e85e4d74ea
Local Build and Deploy / deploy (push) Successful in 1m11s
revert style: clean up code with prettier and eslint
55 lines
1.4 KiB
TypeScript
55 lines
1.4 KiB
TypeScript
'use client'
|
|
|
|
import { Eye, EyeOff } from 'lucide-react'
|
|
import { useState } from 'react'
|
|
import { toast } from 'sonner'
|
|
import { toggleUserWatch } from '@/actions/watch'
|
|
import { Button } from '@/components/ui/button'
|
|
|
|
interface UserWatchToggleProps {
|
|
targetUserId: number
|
|
username: string
|
|
initialWatching: boolean
|
|
}
|
|
|
|
export function UserWatchToggle({ targetUserId, username, initialWatching }: UserWatchToggleProps) {
|
|
const [watching, setWatching] = useState(initialWatching)
|
|
const [busy, setBusy] = useState(false)
|
|
|
|
async function handleToggle() {
|
|
setBusy(true)
|
|
try {
|
|
const result = await toggleUserWatch({ targetUserId })
|
|
if (result.ok) {
|
|
const data = result.data as { watching: boolean }
|
|
setWatching(data.watching)
|
|
toast.success(data.watching ? `Now watching ${username}` : `Stopped watching ${username}`)
|
|
} else {
|
|
toast.error(result.error)
|
|
}
|
|
} finally {
|
|
setBusy(false)
|
|
}
|
|
}
|
|
|
|
return (
|
|
<Button
|
|
variant={watching ? 'default' : 'outline'}
|
|
size="sm"
|
|
disabled={busy}
|
|
onClick={handleToggle}
|
|
title={watching ? 'Stop watching this user' : 'Watch this user'}
|
|
>
|
|
{watching ? (
|
|
<>
|
|
<Eye className="mr-1.5 h-3.5 w-3.5" /> Watching
|
|
</>
|
|
) : (
|
|
<>
|
|
<EyeOff className="mr-1.5 h-3.5 w-3.5" /> Watch
|
|
</>
|
|
)}
|
|
</Button>
|
|
)
|
|
}
|