BOD-25 BOD-24 Uploading to cloudinary + thumbnail generation

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

@@ -0,0 +1,72 @@
+import { Button, notification } from "antd";
+import React from "react";
+import { useTranslation } from "react-i18next";
+import axios from "axios";
+import { useMutation } from "@apollo/react-hooks";
+import { DELETE_DOCUMENT } from "../../graphql/documents.queries";
+
+export default function JobsDocumentsDeleteButton({
+  galleryImages,
+  deletionCallback,
+}) {
+  const { t } = useTranslation();
+  const [deleteDocument] = useMutation(DELETE_DOCUMENT);
+  const imagesToDelete = galleryImages.filter((image) => image.isSelected);
+  const handleDelete = () => {
+    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);
+
+          axios
+            .post(
+              `${process.env.REACT_APP_CLOUDINARY_ENDPOINT}/destroy`,
+              formData,
+              options
+            )
+            .then((response) => {
+              deleteDocument({ variables: { id: image.id } })
+                .then((r) => {
+                  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),
+                }),
+              });
+            });
+        });
+    });
+  };
+
+  return (
+    <Button disabled={imagesToDelete.length < 1} onClick={handleDelete}>
+      {t("documents.actions.delete")}
+    </Button>
+  );
+}