Fix document delete (#1176)

enjoy/src/i18n/en.json

@@ -902,6 +902,8 @@
   "bulkDeleteAborted": "Bulk delete aborted",
   "notFound": "Not found",
   "saved": "Saved",
+  "deleteDocumentConfirm": "Are you sure to delete this document?",
+  "documentDeletedSuccessfully": "Document deleted successfully",
   "autoTranslate": "Auto translate",
   "autoNextSpeech": "Auto speech",
   "failedToLoadLink": "Failed to load link",

enjoy/src/i18n/zh-CN.json

@@ -902,6 +902,8 @@
   "bulkDeleteAborted": "批量删除已中止",
   "notFound": "未找到",
   "saved": "已保存",
+  "deleteDocumentConfirm": "您确定要删除此文档吗？",
+  "documentDeletedSuccessfully": "文档删除成功",
   "autoTranslate": "自动翻译",
   "autoNextSpeech": "连续朗读",
   "failedToLoadLink": "加载链接失败",

enjoy/src/main/db/models/document.ts

@@ -198,6 +198,13 @@ export class Document extends Model<Document> {
     });
   }
 
+  @AfterDestroy
+  static removeLocalFile(document: Document) {
+    if (document.filePath) {
+      fs.removeSync(document.filePath);
+    }
+  }
+
   @AfterDestroy
   static async destroyRemote(document: Document) {
     const webApi = new Client({

enjoy/src/renderer/components/documents/document-card.tsx

@@ -12,17 +12,23 @@ import {
   DropdownMenuContent,
   DropdownMenuItem,
   AlertDialogFooter,
+  AlertDialogCancel,
+  AlertDialogAction,
+  toast,
 } from "@renderer/components/ui";
 import { MoreVerticalIcon, TrashIcon } from "lucide-react";
 import { t } from "i18next";
-import { useState } from "react";
+import { useContext, useState } from "react";
+import { AppSettingsProviderContext } from "@renderer/context";
 
 export const DocumentCard = (props: {
   document: DocumentEType;
   className?: string;
+  onDelete?: () => void;
 }) => {
-  const { document, className } = props;
+  const { document, className, onDelete } = props;
   const [deleting, setDeleting] = useState(false);
+  const { EnjoyApp } = useContext(AppSettingsProviderContext);
   const handleDelete = (event: React.MouseEvent) => {
     event.stopPropagation();
     setDeleting(true);
@@ -90,12 +96,32 @@ export const DocumentCard = (props: {
           <AlertDialogHeader>
             <AlertDialogTitle>{t("delete")}</AlertDialogTitle>
             <AlertDialogDescription>
-              {t("deleteConfirm")}
+              {t("deleteDocumentConfirm")}
             </AlertDialogDescription>
           </AlertDialogHeader>
           <AlertDialogFooter>
-            <Button variant="outline">{t("cancel")}</Button>
-            <Button variant="destructive">{t("delete")}</Button>
+            <AlertDialogCancel>{t("cancel")}</AlertDialogCancel>
+            <AlertDialogAction asChild>
+              <Button
+                variant="destructive"
+                onClick={() => {
+                  EnjoyApp.documents
+                    .destroy(document.id)
+                    .then(() => {
+                      toast.success(t("documentDeletedSuccessfully"));
+                      onDelete?.();
+                    })
+                    .catch((error) => {
+                      toast.error(error.message);
+                    })
+                    .finally(() => {
+                      setDeleting(false);
+                    });
+                }}
+              >
+                {t("delete")}
+              </Button>
+            </AlertDialogAction>
           </AlertDialogFooter>
         </AlertDialogContent>
       </AlertDialog>

enjoy/src/renderer/components/documents/document-text-renderer.tsx

@@ -18,9 +18,7 @@ export const DocumentTextRenderer = () => {
 
   const fetchContent = async () => {
     const res = await fetch(document.src);
-    console.log("res", res);
     const text = await res.text();
-    console.log("text", text);
     setContent(text);
   };
 

enjoy/src/renderer/components/documents/documents-segment.tsx

@@ -45,6 +45,9 @@ export const DocumentsSegment = () => {
               key={document.id}
               document={document}
               className="w-48"
+              onDelete={() =>
+                setDocuments(documents.filter((d) => d.id !== document.id))
+              }
             />
           ))}
         </div>

enjoy/src/renderer/pages/documents.tsx

@@ -58,7 +58,13 @@ export default () => {
       ) : (
         <div className="grid grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-4">
           {documents.map((document) => (
-            <DocumentCard key={document.id} document={document} />
+            <DocumentCard
+              key={document.id}
+              document={document}
+              onDelete={() =>
+                setDocuments(documents.filter((d) => d.id !== document.id))
+              }
+            />
           ))}
         </div>
       )}