import { useState } from "react";
import { useQuery, useMutation, useQueryClient } from "@snackbase/sdk/react";
function InvitationManager() {
const queryClient = useQueryClient();
const [email, setEmail] = useState("");
const { data: invitations, isLoading } = useQuery({
queryKey: ["invitations"],
queryFn: () => client.invitations.list()
});
const createMutation = useMutation({
mutationFn: (data) => client.invitations.create(data),
onSuccess: () => {
setEmail("");
queryClient.invalidateQueries(["invitations"]);
}
});
const resendMutation = useMutation({
mutationFn: (id) => client.invitations.resend(id)
});
const cancelMutation = useMutation({
mutationFn: (id) => client.invitations.cancel(id),
onSuccess: () => {
queryClient.invalidateQueries(["invitations"]);
}
});
const handleCreate = (e) => {
e.preventDefault();
createMutation.mutate({ email, role_id: "default-role" });
};
if (isLoading) return <div>Loading...</div>;
return (
<div>
<h2>User Invitations</h2>
<form onSubmit={handleCreate}>
<input
type="email"
value={email}
onChange={(e) => setEmail(e.target.value)}
placeholder="[email protected]"
required
/>
<button type="submit" disabled={createMutation.isPending}>
Send Invitation
</button>
</form>
<table>
<thead>
<tr>
<th>Email</th>
<th>Status</th>
<th>Expires</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
{invitations?.map(inv => (
<tr key={inv.id}>
<td>{inv.email}</td>
<td>{inv.status}</td>
<td>{new Date(inv.expires_at).toLocaleDateString()}</td>
<td>
{inv.status === "pending" && (
<>
<button
onClick={() => resendMutation.mutate(inv.id)}
disabled={resendMutation.isPending}
>
Resend
</button>
<button
onClick={() => cancelMutation.mutate(inv.id)}
disabled={cancelMutation.isPending}
>
Cancel
</button>
</>
)}
</td>
</tr>
))}
</tbody>
</table>
</div>
);
}