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>
|
|
);
|
|
}
|