45 lines
1.4 KiB
TypeScript
45 lines
1.4 KiB
TypeScript
'use client';
|
|
|
|
import { useRouter } from 'next/navigation';
|
|
import { useState, useTransition } from 'react';
|
|
|
|
export function GroupOptOutButton({ groupId, groupName }: { groupId: string; groupName: string }) {
|
|
const router = useRouter();
|
|
const [pending, startTransition] = useTransition();
|
|
const [error, setError] = useState<string | null>(null);
|
|
|
|
function handleClick() {
|
|
if (!window.confirm(`Revoke consent for "${groupName}"? Your messages will no longer be archived from this group.`)) {
|
|
return;
|
|
}
|
|
setError(null);
|
|
startTransition(async () => {
|
|
const res = await fetch('/api/my/opt-out', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json', Accept: 'application/json' },
|
|
body: JSON.stringify({ groupId }),
|
|
});
|
|
if (!res.ok) {
|
|
const body = (await res.json().catch(() => ({}))) as { message?: string };
|
|
setError(body.message ?? 'Opt-out failed');
|
|
return;
|
|
}
|
|
router.refresh();
|
|
});
|
|
}
|
|
|
|
return (
|
|
<div className="flex flex-col items-end gap-1">
|
|
<button
|
|
type="button"
|
|
onClick={handleClick}
|
|
disabled={pending}
|
|
className="rounded border border-red-200 px-3 py-1 text-xs text-red-700 hover:bg-red-50 disabled:opacity-50"
|
|
>
|
|
{pending ? 'Revoking…' : 'Revoke consent'}
|
|
</button>
|
|
{error && <span className="text-xs text-red-600">{error}</span>}
|
|
</div>
|
|
);
|
|
}
|