From e28aeefaba668873ebb9d682bc3b72a16ffb587c Mon Sep 17 00:00:00 2001
From: Christine <132790780+aesteri@users.noreply.github.com>
Date: Tue, 3 Dec 2024 13:05:39 +0900
Subject: [PATCH] deletion

---
 package-lock.json              |  1 -
 src/components/DataTable.tsx   |  4 +-
 src/components/PreviewCard.tsx | 78 +++++++++++++++++++++++++++-------
 3 files changed, 64 insertions(+), 19 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 18744bf..c56c088 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8741,7 +8741,6 @@
       "resolved": "https://registry.npmjs.org/vite/-/vite-5.4.11.tgz",
       "integrity": "sha512-c7jFQRklXua0mTzneGW9QVyxFjUgwcihC4bXEtujIo2ouWCe1Ajt/amn2PCxYnhYfd5k09JX3SB7OYWFKYqj8Q==",
       "dev": true,
-      "license": "MIT",
       "dependencies": {
         "esbuild": "^0.21.3",
         "postcss": "^8.4.43",
diff --git a/src/components/DataTable.tsx b/src/components/DataTable.tsx
index 5d4db35..ad11740 100644
--- a/src/components/DataTable.tsx
+++ b/src/components/DataTable.tsx
@@ -57,9 +57,7 @@ export default function DataTable({
         <Table.Td>{getFileNameWithoutExtension(file.mcap_files[0].file_name)}</Table.Td>
         <Table.Td>{file.date}</Table.Td>
         <Table.Td>{file.location}</Table.Td>
-        
-        {/* Change back to notes once notes field is implemented in the server */}
-        <Table.Td>{file.car_model}</Table.Td>
+        <Table.Td>{file.notes}</Table.Td>
       </Table.Tr>
     ))
   );
diff --git a/src/components/PreviewCard.tsx b/src/components/PreviewCard.tsx
index a17756b..f86df15 100644
--- a/src/components/PreviewCard.tsx
+++ b/src/components/PreviewCard.tsx
@@ -8,6 +8,7 @@ import {
   Table,
   ScrollArea,
   TextInput,
+  Notification,
 } from "@mantine/core";
 import {
   IconDownload,
@@ -23,6 +24,39 @@ interface PreviewCardProps {
 }
 
 function PreviewCard({ selectedData }: PreviewCardProps) {
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [success, setSuccess] = useState<string | null>(null);
+
+  const handleDelete = async () => {
+    setLoading(true)
+    setError(null);
+    setSuccess(null)
+    try {
+        const response = await fetch(`${import.meta.env.VITE_API_URL}/mcaps/${selectedData?.id}`, {
+          method: 'DELETE',
+        });
+
+        if (!response.ok) {
+          if (response.status === 503) {
+            const errorMsg = await response.text();
+            setError(`Failed to delete: ${errorMsg} \nTry again in a few minutes!`);
+          } else {
+            const errorMsg = await response.text();
+            setError(`Failed to delete: ${errorMsg}`);
+          }
+        } else {
+          const result = await response.json();
+          setSuccess('File deleted successfully!');
+          console.log('Delete successful:', result);
+        }
+    } catch (error) {
+      console.error('Error sending Delete request:', error);
+      setError('An error occurred during file deletion.');
+    }
+    setLoading(false)
+  }
+  
   const formatDate = (dateString: string) => {
     const date = new Date(dateString);
     return date.toLocaleDateString("en-US", {
@@ -101,23 +135,37 @@ function PreviewCard({ selectedData }: PreviewCardProps) {
                   bottom: 0,
                   left: 0,
                   padding: 20,
-                  gap: "10px",
+                  gap: "8px",
                 }}
               >
-                {selectedData.mcap_files.map((item) => (
-                  <DownloadButton
-                    buttonText="MCAP"
-                    fileName={item.file_name}
-                    signedUrl={item.signed_url ?? null}
-                  />
-                ))}
-                {selectedData.mat_files.map((item) => (
-                  <DownloadButton
-                    buttonText="MAT"
-                    fileName={item.file_name}
-                    signedUrl={item.signed_url}
-                  />
-                ))}
+                <div>
+                  {selectedData.mcap_files.map((item) => (
+                    <DownloadButton
+                      buttonText="MCAP"
+                      fileName={item.file_name}
+                      signedUrl={item.signed_url ?? null}
+                    />
+                  ))}
+                  {selectedData.mat_files.map((item) => (
+                    <DownloadButton
+                      buttonText="MAT"
+                      fileName={item.file_name}
+                      signedUrl={item.signed_url}
+                    />
+                  ))}
+                  <Button loading={loading} loaderProps={{ type: 'dots' }} size="compact-md" color="red" onClick={handleDelete}>Delete</Button>
+                  {success && (
+                    <Notification color="green" onClose={() => setSuccess(null)} style={{ marginTop: 10 }}>
+                      {success}
+                    </Notification>
+                  )}
+                  {error && (
+                    <Notification color="red" onClose={() => setError(null)} style={{ marginTop: 10 }}>
+                      {error}
+                    </Notification>
+                  )}
+                </div>
+                
               </div>
             </>
           ) : (