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

client/src/components/jobs-documents-gallery/jobs-document-gallery.download.component.jsx

@@ -0,0 +1,24 @@
+import { Button, notification } from "antd";
+import React from "react";
+import { useTranslation } from "react-i18next";
+import axios from "axios";
+
+export default function JobsDocumentsDownloadButton({ galleryImages }) {
+  const { t } = useTranslation();
+  const imagesToDownload = galleryImages.filter((image) => image.isSelected);
+  const handleDelete = () => {
+    axios
+      .post("/media/download", {
+        ids: imagesToDownload.map((_) => _.key),
+      })
+      .then((r) => {
+        window.open(r.data);
+      });
+  };
+
+  return (
+    <Button disabled={imagesToDownload.length < 1} onClick={handleDelete}>
+      {t("documents.actions.download")}
+    </Button>
+  );
+}

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

@@ -1,94 +1,54 @@
-import axios from "axios";
 import React, { useEffect, useState } from "react";
 import Gallery from "react-grid-gallery";
-//import { Document, Page, pdfjs } from "react-pdf";
 import DocumentsUploadContainer from "../documents-upload/documents-upload.container";
-//import LoadingSpinner from "../loading-spinner/loading-spinner.component";
-import { Collapse } from "antd";
-import { useTranslation } from "react-i18next";
-
-//pdfjs.GlobalWorkerOptions.workerSrc = `https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.1.266/pdf.worker.min.js`;
+import JobsDocumentsDownloadButton from "./jobs-document-gallery.download.component";
+import JobsDocumentsDeleteButton from "./jobs-documents-gallery.delete.component";
 
 function JobsDocumentsComponent({ data, jobId, refetch }) {
   const [galleryImages, setgalleryImages] = useState([]);
-  const [pdfDocuments, setPdfDocuments] = useState([]);
 
   useEffect(() => {
     setgalleryImages(
-      data
-        .filter((item) => item.thumb_url !== "application/pdf")
-        .reduce((acc, value) => {
-          acc.push({
-            src: value.url,
-            thumbnail: value.thumb_url,
-            thumbnailHeight: 150,
-            thumbnailWidth: 150,
-            isSelected: false,
-          });
-          return acc;
-        }, [])
+      data.reduce((acc, value) => {
+        acc.push({
+          src: value.url,
+          thumbnail: `${
+            process.env.REACT_APP_CLOUDINARY_IMAGE_ENDPOINT
+          }/h_200,w_200,c_thumb/${value.key}${
+            value.type.includes("pdf") ? ".jpg" : ""
+          }`,
+          tags: value.type.includes("pdf") ? [{ value: "PDF" }] : [],
+          thumbnailHeight: 200,
+          thumbnailWidth: 200,
+          isSelected: false,
+          key: value.key,
+          id: value.id,
+        });
+        return acc;
+      }, [])
     );
   }, [data, setgalleryImages]);
 
-  useEffect(() => {
-    setPdfDocuments(
-      data
-        .filter((item) => item.thumb_url === "application/pdf")
-        .reduce((acc, value) => {
-          acc.push({
-            src: value.url,
-            thumbnail: value.thumb_url,
-            thumbnailHeight: 150,
-            thumbnailWidth: 150,
-            isSelected: false,
-          });
-          return acc;
-        }, [])
-    );
-  }, [data, setPdfDocuments]);
-  const { t } = useTranslation();
   return (
     <div className="clearfix">
       <DocumentsUploadContainer jobId={jobId} callbackAfterUpload={refetch} />
 
-      <Collapse defaultActiveKey="photos">
-        <Collapse.Panel key="t" header="t">
-          <Gallery
-            images={pdfDocuments}
-            onSelectImage={(index, image) => {
-              setPdfDocuments(
-                pdfDocuments.map((g, idx) =>
-                  index === idx ? { ...g, isSelected: !g.isSelected } : g
-                )
-              );
-            }}
-          />
-        </Collapse.Panel>
-        <Collapse.Panel key="photos" header={t("documents.labels.photos")}>
-          <Gallery
-            images={galleryImages}
-            onSelectImage={(index, image) => {
-              setgalleryImages(
-                galleryImages.map((g, idx) =>
-                  index === idx ? { ...g, isSelected: !g.isSelected } : g
-                )
-              );
-            }}
-          ></Gallery>
-        </Collapse.Panel>
-        {
-          //           <Collapse.Panel
-          //   key="documents"
-          //   header={t("documents.labels.documents")}
-          // >
-          //   {pdfDocuments.map((doc, idx) => (
-          //     <Document key={idx} loading={<LoadingSpinner />} file={doc.src}>
-          //       <Page pageIndex={0} />
-          //     </Document>
-          //   ))}
-          // </Collapse.Panel>
-        }
-      </Collapse>
+      <JobsDocumentsDownloadButton galleryImages={galleryImages} />
+      <JobsDocumentsDeleteButton
+        galleryImages={galleryImages}
+        deletionCallback={refetch}
+      />
+
+      <Gallery
+        images={galleryImages}
+        onSelectImage={(index, image) => {
+          setgalleryImages(
+            galleryImages.map((g, idx) =>
+              index === idx ? { ...g, isSelected: !g.isSelected } : g
+            )
+          );
+        }}
+      />
     </div>
   );
 }

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>
+  );
+}