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

import { FileExcelFilled } from "@ant-design/icons";
import { Card } from "antd";
import React, { useEffect, useState } from "react";
import Gallery from "react-grid-gallery";
import { useTranslation } from "react-i18next";
import DocumentsUploadComponent from "../documents-upload/documents-upload.component";
import { DetermineFileType } from "../documents-upload/documents-upload.utility";
import JobsDocumentsDownloadButton from "./jobs-document-gallery.download.component";
import JobsDocumentsGalleryReassign from "./jobs-document-gallery.reassign.component";
import JobsDocumentsDeleteButton from "./jobs-documents-gallery.delete.component";
import JobsDocumentsGallerySelectAllComponent from "./jobs-documents-gallery.selectall.component";

function JobsDocumentsComponent({
  data,
  jobId,
  refetch,
  billId,
  billsCallback,
}) {
  const [galleryImages, setgalleryImages] = useState({ images: [], other: [] });
  const { t } = useTranslation();

  useEffect(() => {
    let documents = data.reduce(
      (acc, value) => {
        const fileType = DetermineFileType(value.type);
        if (value.type.startsWith("image")) {
          acc.images.push({
            src: `${
              process.env.REACT_APP_CLOUDINARY_ENDPOINT
            }/${DetermineFileType(value.type)}/upload/${value.key}`,
            thumbnail: `${
              process.env.REACT_APP_CLOUDINARY_ENDPOINT
            }/${DetermineFileType(value.type)}/upload/${
              process.env.REACT_APP_CLOUDINARY_THUMB_TRANSFORMATIONS
            }/${value.key}`,
            thumbnailHeight: 225,
            thumbnailWidth: 225,
            isSelected: false,
            key: value.key,
            extension: value.extension,
            id: value.id,
            type: value.type,
            tags: [{ value: value.type, title: value.type }],
          });
        } else {
          let thumb;
          switch (fileType) {
            case "video":
              thumb = `${process.env.REACT_APP_CLOUDINARY_ENDPOINT}/${fileType}/upload/c_fill,f_png,h_250,w_250/${value.key}`;
              break;
            case "raw":
              thumb = "";
              break;
            default:
              thumb = `${process.env.REACT_APP_CLOUDINARY_ENDPOINT}/${fileType}/upload/${process.env.REACT_APP_CLOUDINARY_THUMB_TRANSFORMATIONS}/${value.key}`;
              break;
          }

          acc.other.push({
            src: `${
              process.env.REACT_APP_CLOUDINARY_ENDPOINT
            }/${fileType}/upload/${fileType === "video" ? "q_auto/" : ""}${
              value.key
            }${fileType === "raw" ? `.${value.extension}` : ""}`,
            thumbnail: thumb,
            tags: [
              { value: value.type, title: value.type },
              ...(value.bill
                ? [
                    {
                      value: value.bill.vendor.name,
                      title: t("vendors.fields.name"),
                    },
                    { value: value.bill.date, title: t("bills.fields.date") },
                    {
                      value: value.bill.invoice_number,
                      title: t("bills.fields.invoice_number"),
                    },
                  ]
                : []),
            ],
            thumbnailHeight: 225,
            thumbnailWidth: 225,
            isSelected: false,
            extension: value.extension,
            key: value.key,
            id: value.id,
            type: value.type,
          });
        }

        return acc;
      },
      { images: [], other: [] }
    );
    setgalleryImages(documents);
  }, [data, setgalleryImages, t]);

  return (
    <div className="clearfix">
      <div className="imex-flex-row">
        <JobsDocumentsGallerySelectAllComponent
          galleryImages={galleryImages}
          setGalleryImages={setgalleryImages}
        />
        <JobsDocumentsDownloadButton galleryImages={galleryImages} />
        <JobsDocumentsDeleteButton
          galleryImages={galleryImages}
          deletionCallback={billsCallback || refetch}
        />
        <JobsDocumentsGalleryReassign galleryImages={galleryImages} />
      </div>
      <DocumentsUploadComponent
        jobId={jobId}
        billId={billId}
        callbackAfterUpload={billsCallback || refetch}
        tagsArray={["test"]}
      ></DocumentsUploadComponent>
      <div style={{ marginTop: "2rem" }}>
        <Card title={t("jobs.labels.documents-images")}>
          <Gallery
            images={galleryImages.images}
            backdropClosesModal={true}
            onClickImage={(props) => {
              window.open(
                props.target.src,
                "_blank",
                "toolbar=0,location=0,menubar=0"
              );
            }}
            onSelectImage={(index, image) => {
              setgalleryImages({
                ...galleryImages,
                images: galleryImages.images.map((g, idx) =>
                  index === idx ? { ...g, isSelected: !g.isSelected } : g
                ),
              });
            }}
          />
        </Card>

        <Card title={t("jobs.labels.documents-other")}>
          <Gallery
            images={galleryImages.other}
            backdropClosesModal={true}
            enableLightbox={false}
            thumbnailStyle={() => {
              return {
                backgroundImage: <FileExcelFilled />,
                height: "100%",
                width: "100%",
              };
            }}
            onClickThumbnail={(index) => {
              window.open(
                galleryImages.other[index].src,
                "_blank",
                "toolbar=0,location=0,menubar=0"
              );
            }}
            onSelectImage={(index) => {
              setgalleryImages({
                ...galleryImages,
                other: galleryImages.other.map((g, idx) =>
                  index === idx ? { ...g, isSelected: !g.isSelected } : g
                ),
              });
            }}
          />
        </Card>
      </div>
    </div>
  );
}
export default JobsDocumentsComponent;