diff --git a/web/src/components/card/ExportCard.tsx b/web/src/components/card/ExportCard.tsx index 591fe49a1..86ec9c7ce 100644 --- a/web/src/components/card/ExportCard.tsx +++ b/web/src/components/card/ExportCard.tsx @@ -6,10 +6,16 @@ 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"; +import { DeleteClipType, Export } from "@/types/export"; import { MdEditSquare } from "react-icons/md"; import { baseUrl } from "@/api/baseUrl"; @@ -18,7 +24,7 @@ type ExportProps = { exportedRecording: Export; onSelect: (selected: Export) => void; onRename: (original: string, update: string) => void; - onDelete: (file: string) => void; + onDelete: ({ file, exportName }: DeleteClipType) => 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..f0cf5748d 100644 --- a/web/src/pages/Exports.tsx +++ b/web/src/pages/Exports.tsx @@ -12,7 +12,7 @@ import { import { Button } from "@/components/ui/button"; import { Dialog, DialogContent, DialogTitle } from "@/components/ui/dialog"; import { Input } from "@/components/ui/input"; -import { Export } from "@/types/export"; +import { DeleteClipType, Export } from "@/types/export"; import axios from "axios"; import { useCallback, useEffect, useMemo, useState } from "react"; import useSWR from "swr"; @@ -43,14 +43,14 @@ function Exports() { // Deleting - const [deleteClip, setDeleteClip] = useState(); + 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 +86,7 @@ function Exports() { Delete Export - Confirm deletion of {deleteClip}. + Are you sure you want to delete {deleteClip?.exportName}? @@ -149,7 +149,9 @@ function Exports() { exportedRecording={item} onSelect={setSelected} onRename={onHandleRename} - onDelete={(id) => setDeleteClip(id)} + onDelete={({ file, exportName }) => + setDeleteClip({ file, exportName }) + } /> ))} diff --git a/web/src/types/export.ts b/web/src/types/export.ts index 499e33313..fc62bbeec 100644 --- a/web/src/types/export.ts +++ b/web/src/types/export.ts @@ -7,3 +7,8 @@ export type Export = { thumb_path: string; in_progress: boolean; }; + +export type DeleteClipType = { + file: string; + exportName: string; +};