Feat: Add a confirm modal before deleting a file. Change error messag…

…e on mustations. Change styling accross the table. Enforce specific statuses and convert to Hebrew on the table
liel-almog · Mar 17, 2024 · 78884a6 · 78884a6
1 parent 09a0d89
commit 78884a6
Show file tree

Hide file tree

Showing 6 changed files with 38 additions and 13 deletions.
diff --git a/frontend/src/components/DownloadFiles/FilesTable/FileTableActions/FileTableActions.tsx b/frontend/src/components/DownloadFiles/FilesTable/FileTableActions/FileTableActions.tsx
@@ -7,19 +7,21 @@ import {
 } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { CellContext } from "@tanstack/react-table";
-import { Button } from "antd";
+import { App, Button } from "antd";
 import { useState } from "react";
 import { File } from "../../../../models/file.model";
 import { fileService } from "../../../../services/file.service";
 import { FileRenameActionModal } from "./FileRenameActionModal";
-import { useFavoriteMutation } from "./useFavoriteMutation";
 import { useDeleteMutation } from "./useDeleteMutation";
+import { useFavoriteMutation } from "./useFavoriteMutation";
 
 export interface FileTableActionsProps {
   info: CellContext<File, unknown>;
 }
 
 export const FileTableActions = ({ info }: FileTableActionsProps) => {
+  const { modal } = App.useApp();
+
   const [isRenameModelOpen, setIsRenameModalOpen] = useState(false);
 
   const { favorite, fileId, displayName } = info.row.original;
@@ -29,6 +31,20 @@ export const FileTableActions = ({ info }: FileTableActionsProps) => {
   const { mutation: deleteMutation } = useDeleteMutation({ id: fileId.toString() });
 
   const starIcon = favorite ? faSolidStar : faRegularStar;
+
+  const showDeleteConfirm = () => {
+    modal.confirm({
+      title: "האם אתה בטוח שברצונך למחוק את הקובץ?",
+      okText: "מחק",
+      okType: "danger",
+      cancelText: "ביטול",
+      onOk() {
+        deleteMutation.mutate({ id: fileId });
+      },
+      onCancel() {},
+    });
+  };
+
   return (
     <>
       <section role="actions">
@@ -66,7 +82,7 @@ export const FileTableActions = ({ info }: FileTableActionsProps) => {
           type="text"
         />
         <Button
-          onClick={() => deleteMutation.mutate({ id: fileId })}
+          onClick={showDeleteConfirm}
           icon={<FontAwesomeIcon icon={faTrash} />}
           shape="circle"
           type="text"

diff --git a/frontend/src/components/DownloadFiles/FilesTable/FileTableActions/useDeleteMutation.tsx b/frontend/src/components/DownloadFiles/FilesTable/FileTableActions/useDeleteMutation.tsx
@@ -34,7 +34,7 @@ export const useDeleteMutation = ({ id }: UseDeleteMutationProps) => {
       }
 
       message.error({
-        content: "Error deleting file",
+        content: "שגיאה בעת מחיקת הקובץ",
         key: "delete-file",
       });
     },

diff --git a/frontend/src/components/DownloadFiles/FilesTable/files-table.module.scss b/frontend/src/components/DownloadFiles/FilesTable/files-table.module.scss
@@ -28,10 +28,7 @@
           white-space: normal;
         }
         user-select: none;
-        padding: {
-          block: 0.5rem;
-          inline: 0.5rem;
-        }
+        padding: 0.5rem;
         white-space: nowrap;
 
         &::after {
@@ -72,7 +69,7 @@
 
       td {
         text-align: right;
-        padding: 1rem;
+        padding: 0.5rem;
         min-width: 1rem;
         white-space: nowrap;
         max-width: 40ch;

diff --git a/frontend/src/components/DownloadFiles/FilesTable/filesTable.util.tsx b/frontend/src/components/DownloadFiles/FilesTable/filesTable.util.tsx
@@ -25,12 +25,22 @@ export const columns = [
   }),
   columnHelper.accessor("uploadedAt", {
     header: "תאריך העלאה",
-    cell: (info) => info.getValue().toISOString(),
+    cell: (info) =>
+      info
+        .getValue()
+        .toLocaleDateString("he-IL", { year: "numeric", month: "2-digit", day: "2-digit" }),
     size: 100,
   }),
   columnHelper.accessor("status", {
     header: "סטטוס",
-    cell: (info) => info.getValue(),
+    cell: (info) => {
+      const v = info.getValue();
+      if (v === "PROCESSING") {
+        return "בהעלאה";
+      } else if (v === "UPLOADED") {
+        return "הועלה";
+      }
+    },
   }),
   columnHelper.accessor("size", {
     header: "גודל",

diff --git a/frontend/src/components/DownloadFiles/useDownloadFIles.tsx b/frontend/src/components/DownloadFiles/useDownloadFIles.tsx
@@ -16,7 +16,7 @@ export const useGetFiles = () => {
   useEffect(() => {
     if (isError && error) {
       message.error({
-        content: error.message,
+        content: "לא ניתן לטעון את הקבצים, אנא נסה שוב מאוחר יותר.",
         key: "get-user-files",
       });
     }

diff --git a/frontend/src/models/file.model.ts b/frontend/src/models/file.model.ts
@@ -6,12 +6,14 @@ export const startUploadSchema = z.object({
   signedUrl: z.string(),
 });
 
+export const uploadStatuses = ["UPLOADED", "PROCESSING"] as const;
+
 export const fileSchema = z.object({
   fileId: z.number().int().min(1),
   displayName: z.string(),
   uploadedAt: customValidation.dateLikeToDate,
   favorite: z.boolean(),
-  status: z.string(),
+  status: z.enum(uploadStatuses),
   size: z.number().int().min(1),
 });