62 lines
1.7 KiB
TypeScript
62 lines
1.7 KiB
TypeScript
import { useCallback, useState } from "react";
|
|
import { toast } from "sonner";
|
|
import { ConfirmDestructiveOverlay } from "@/components/confirm-destructive-overlay";
|
|
import { softDeleteParticle } from "@/lib/firestore-particles";
|
|
import { particlePath, toFirestoreDocPath } from "@/lib/particle-path";
|
|
import type { Particle } from "@/api/types";
|
|
import { useSuspendPlayback } from "@/hooks/use-suspend-playback";
|
|
|
|
interface DeleteParticleOverlayProps {
|
|
networkId: string;
|
|
streamId: string;
|
|
particle: Particle;
|
|
userId: string;
|
|
onClose: () => void;
|
|
}
|
|
|
|
export function DeleteParticleOverlay({
|
|
networkId,
|
|
streamId,
|
|
particle,
|
|
userId,
|
|
onClose,
|
|
}: DeleteParticleOverlayProps) {
|
|
useSuspendPlayback(true, "delete-particle");
|
|
|
|
const [deleting, setDeleting] = useState(false);
|
|
|
|
const handleDelete = useCallback(async () => {
|
|
if (deleting) return;
|
|
setDeleting(true);
|
|
try {
|
|
const docPath = toFirestoreDocPath(
|
|
particlePath(networkId, [streamId, particle.id]),
|
|
);
|
|
await softDeleteParticle(docPath, userId);
|
|
toast.success("Particle deleted");
|
|
onClose();
|
|
} catch (e) {
|
|
const message = e instanceof Error ? e.message : "Failed to delete particle";
|
|
toast.error(message);
|
|
setDeleting(false);
|
|
}
|
|
}, [deleting, networkId, onClose, particle.id, streamId, userId]);
|
|
|
|
return (
|
|
<ConfirmDestructiveOverlay
|
|
title="Delete this particle?"
|
|
description={
|
|
<p>
|
|
This cannot be undone. Other viewers will see a "This particle was
|
|
deleted" message in its place.
|
|
</p>
|
|
}
|
|
confirmLabel="Delete"
|
|
pendingLabel="Deleting…"
|
|
isPending={deleting}
|
|
onConfirm={handleDelete}
|
|
onClose={onClose}
|
|
/>
|
|
);
|
|
}
|