diff --git a/web/src/components/card/ExportCard.tsx b/web/src/components/card/ExportCard.tsx index 95357956a..a8fe87871 100644 --- a/web/src/components/card/ExportCard.tsx +++ b/web/src/components/card/ExportCard.tsx @@ -1,7 +1,7 @@ import ActivityIndicator from "../indicators/activity-indicator"; import { LuTrash } from "react-icons/lu"; import { Button } from "../ui/button"; -import { useState } from "react"; +import { useCallback, useState } from "react"; import { isDesktop } from "react-device-detect"; import { FaDownload, FaPlay } from "react-icons/fa"; import Chip from "../indicators/Chip"; @@ -47,6 +47,15 @@ export default function ExportCard({ update: string; }>(); + const submitRename = useCallback(() => { + if (editName == undefined) { + return; + } + + onRename(exportedRecording.id, editName.update); + setEditName(undefined); + }, [editName, exportedRecording, onRename, setEditName]); + useKeyboardListener( editName != undefined ? ["Enter"] : [], (key, modifiers) => { @@ -57,8 +66,7 @@ export default function ExportCard({ editName && editName.update.length > 0 ) { - onRename(exportedRecording.id, editName.update); - setEditName(undefined); + submitRename(); } }, ); @@ -98,8 +106,7 @@ export default function ExportCard({ variant="select" disabled={(editName?.update?.length ?? 0) == 0} onClick={() => { - onRename(exportedRecording.id, editName.update); - setEditName(undefined); + submitRename(); }} > Save diff --git a/web/src/pages/Exports.tsx b/web/src/pages/Exports.tsx index 9cf9f4dcc..606a7200c 100644 --- a/web/src/pages/Exports.tsx +++ b/web/src/pages/Exports.tsx @@ -12,10 +12,12 @@ import { import { Button } from "@/components/ui/button"; import { Dialog, DialogContent, DialogTitle } from "@/components/ui/dialog"; import { Input } from "@/components/ui/input"; +import { Toaster } from "@/components/ui/sonner"; import { DeleteClipType, Export } from "@/types/export"; import axios from "axios"; import { useCallback, useEffect, useMemo, useState } from "react"; import { LuFolderX } from "react-icons/lu"; +import { toast } from "sonner"; import useSWR from "swr"; function Exports() { @@ -63,12 +65,26 @@ function Exports() { const onHandleRename = useCallback( (id: string, update: string) => { - axios.patch(`export/${id}/${update}`).then((response) => { - if (response.status == 200) { - setDeleteClip(undefined); - mutate(); - } - }); + axios + .patch(`export/${id}/${update}`) + .then((response) => { + if (response.status == 200) { + setDeleteClip(undefined); + mutate(); + } + }) + .catch((error) => { + if (error.response?.data?.message) { + toast.error( + `Failed to rename export: ${error.response.data.message}`, + { position: "top-center" }, + ); + } else { + toast.error(`Failed to rename export: ${error.message}`, { + position: "top-center", + }); + } + }); }, [mutate], ); @@ -79,6 +95,8 @@ function Exports() { return (