WIP Deleting

client/src/components/jobs-documents-gallery/jobs-documents-gallery.delete.component.jsx

@@ -5,9 +5,7 @@ import axios from "axios";
 import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { logImEXEvent } from "../../firebase/firebase.utils";
-import { DELETE_DOCUMENT } from "../../graphql/documents.queries";
-import cleanAxios from "../../utils/CleanAxios";
-import { DetermineFileType } from "../documents-upload/documents-upload.utility";
+import { DELETE_DOCUMENTS } from "../../graphql/documents.queries";
 //Context: currentUserEmail, bodyshop, jobid, invoiceid
 
 export default function JobsDocumentsDeleteButton({
@@ -15,73 +13,62 @@ export default function JobsDocumentsDeleteButton({
   deletionCallback,
 }) {
   const { t } = useTranslation();
-  const [deleteDocument] = useMutation(DELETE_DOCUMENT);
+  const [deleteDocument] = useMutation(DELETE_DOCUMENTS);
   const imagesToDelete = [
     ...galleryImages.images.filter((image) => image.isSelected),
     ...galleryImages.other.filter((image) => image.isSelected),
   ];
   const [loading, setLoading] = useState(false);
 
-  const handleDelete = () => {
+  console.log(
+    "🚀  ~ file: jobs-documents-gallery.delete.component.jsx  ~ line 29  ~ imagesToDelete",
+    imagesToDelete
+  );
+  const handleDelete = async () => {
     logImEXEvent("job_documents_delete", { count: imagesToDelete.length });
     setLoading(true);
-    imagesToDelete.forEach((image) => {
-      let timestamp = Math.floor(Date.now() / 1000);
-      let public_id = image.key;
-
-      axios
-        .post("/media/sign", {
-          public_id: public_id,
-          timestamp: timestamp,
-        })
-        .then((response) => {
-          var signature = response.data;
-          var options = {
-            headers: { "X-Requested-With": "XMLHttpRequest" },
-          };
-          const formData = new FormData();
-          formData.append("api_key", process.env.REACT_APP_CLOUDINARY_API_KEY);
-          formData.append("public_id", public_id);
-          formData.append("timestamp", timestamp);
-          formData.append("signature", signature);
-
-          cleanAxios
-            .post(
-              `${
-                process.env.REACT_APP_CLOUDINARY_ENDPOINT_API
-              }/${DetermineFileType(image.type)}/destroy`,
-              formData,
-              options
-            )
-            .then((response) => {
-              deleteDocument({ variables: { id: image.id } })
-                .then((r) => {
-                  notification.open({
-                    key: "docdeletedsuccesfully",
-                    type: "success",
-                    message: t("documents.successes.delete"),
-                  });
-
-                  if (deletionCallback) deletionCallback();
-                })
-                .catch((error) => {
-                  notification["error"]({
-                    message: t("documents.errors.deleting", {
-                      message: JSON.stringify(error),
-                    }),
-                  });
-                });
-              //Delete it from our database.
-            })
-            .catch((error) => {
-              notification["error"]({
-                message: t("documents.errors.deleting_cloudinary", {
-                  message: JSON.stringify(error),
-                }),
-              });
-            });
-        });
+    const res = await axios.post("/media/delete", {
+      ids: imagesToDelete,
     });
+    console.log(
+      "🚀  ~ file: jobs-documents-gallery.delete.component.jsx  ~ line 31  ~ res",
+      res
+    );
+    const successfulDeletes = [];
+    Object.keys(res.data.deleted).forEach((key) => {
+      if (res.data.deleted[key] !== "deleted") {
+        notification["error"]({
+          message: t("documents.errors.deleting_cloudinary", {
+            message: JSON.stringify(res.data.deleted[key]),
+          }),
+        });
+      } else {
+        successfulDeletes.push(key);
+      }
+    });
+    const delres = await deleteDocument({
+      variables: {
+        ids: imagesToDelete
+          .filter((i) => successfulDeletes.includes(i.key))
+          .map((i) => i.id),
+      },
+    });
+    if (delres.errors) {
+      notification["error"]({
+        message: t("documents.errors.deleting", {
+          message: JSON.stringify(delres.errors),
+        }),
+      });
+    } else {
+      notification.open({
+        key: "docdeletedsuccesfully",
+        type: "success",
+        message: t("documents.successes.delete"),
+      });
+
+      if (deletionCallback) deletionCallback();
+    }
+
     setLoading(false);
   };
 

client/src/components/vehicles-list/vehicles-list.component.jsx

@@ -30,7 +30,9 @@ export default function VehiclesListComponent({
       dataIndex: "v_vin",
       key: "v_vin",
       render: (text, record) => (
-        <Link to={"/manage/vehicles/" + record.id}>{record.v_vin}</Link>
+        <Link to={"/manage/vehicles/" + record.id}>
+          {record.v_vin || "N/A"}
+        </Link>
       ),
     },
     {
@@ -39,7 +41,9 @@ export default function VehiclesListComponent({
       key: "description",
       render: (text, record) => {
         return (
-          <span>{`${record.v_model_yr} ${record.v_make_desc} ${record.v_model_desc} ${record.v_color}`}</span>
+          <span>{`${record.v_model_yr || ""} ${record.v_make_desc || ""} ${
+            record.v_model_desc || ""
+          } ${record.v_color || ""}`}</span>
         );
       },
     },
@@ -48,7 +52,9 @@ export default function VehiclesListComponent({
       dataIndex: "plate",
       key: "plate",
       render: (text, record) => {
-        return <span>{`${record.plate_st} | ${record.plate_no}`}</span>;
+        return (
+          <span>{`${record.plate_st || ""} | ${record.plate_no || ""}`}</span>
+        );
       },
     },
   ];