diff --git a/web/src/components/card/ExportCard.tsx b/web/src/components/card/ExportCard.tsx index 591fe49a1..6e436edf0 100644 --- a/web/src/components/card/ExportCard.tsx +++ b/web/src/components/card/ExportCard.tsx @@ -6,7 +6,13 @@ import { isDesktop } from "react-device-detect"; import { FaDownload, FaPlay } from "react-icons/fa"; import Chip from "../indicators/Chip"; import { Skeleton } from "../ui/skeleton"; -import { Dialog, DialogContent, DialogFooter, DialogTitle } from "../ui/dialog"; +import { + Dialog, + DialogContent, + DialogDescription, + DialogFooter, + DialogTitle, +} from "../ui/dialog"; import { Input } from "../ui/input"; import useKeyboardListener from "@/hooks/use-keyboard-listener"; import { Export } from "@/types/export"; @@ -18,7 +24,7 @@ type ExportProps = { exportedRecording: Export; onSelect: (selected: Export) => void; onRename: (original: string, update: string) => void; - onDelete: (file: string) => void; + onDelete: ({ file: string, exportName: string }) => void; }; export default function ExportCard({ @@ -62,6 +68,9 @@ export default function ExportCard({ > Rename Export + + Enter a new name for this export. + {editName && ( <> onDelete(exportedRecording.id)} + onClick={() => + onDelete({ + file: exportedRecording.id, + exportName: exportedRecording.name, + }) + } > diff --git a/web/src/pages/Exports.tsx b/web/src/pages/Exports.tsx index a6b8abede..d9affd817 100644 --- a/web/src/pages/Exports.tsx +++ b/web/src/pages/Exports.tsx @@ -43,14 +43,19 @@ function Exports() { // Deleting - const [deleteClip, setDeleteClip] = useState(); + type DeleteClipType = { + file: string; + exportName: string; + }; + + const [deleteClip, setDeleteClip] = useState(); const onHandleDelete = useCallback(() => { if (!deleteClip) { return; } - axios.delete(`export/${deleteClip}`).then((response) => { + axios.delete(`export/${deleteClip.file}`).then((response) => { if (response.status == 200) { setDeleteClip(undefined); mutate(); @@ -86,7 +91,7 @@ function Exports() { Delete Export - Confirm deletion of {deleteClip}. + Are you sure you want to delete {deleteClip?.exportName}? @@ -149,7 +154,9 @@ function Exports() { exportedRecording={item} onSelect={setSelected} onRename={onHandleRename} - onDelete={(id) => setDeleteClip(id)} + onDelete={({ file, exportName }) => + setDeleteClip({ file, exportName }) + } /> ))}