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

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