63 lines
1.3 KiB
TypeScript
63 lines
1.3 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>
|
|
);
|
|
}
|