Added MMS support for messaging. IO-538

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

@@ -1,5 +1,5 @@
-import React from "react";
 import { useQuery } from "@apollo/react-hooks";
+import React from "react";
 import { GET_DOCUMENTS_BY_JOB } from "../../graphql/documents.queries";
 import AlertComponent from "../alert/alert.component";
 import LoadingSpinner from "../loading-spinner/loading-spinner.component";

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

@@ -0,0 +1,58 @@
+import React, { useEffect } from "react";
+import Gallery from "react-grid-gallery";
+import { useTranslation } from "react-i18next";
+import { DetermineFileType } from "../documents-upload/documents-upload.utility";
+
+function JobsDocumentGalleryExternal({
+  data,
+
+  externalMediaState,
+}) {
+  const [galleryImages, setgalleryImages] = externalMediaState;
+  const { t } = useTranslation();
+
+  useEffect(() => {
+    let documents = data.reduce((acc, value) => {
+      if (value.type.startsWith("image")) {
+        acc.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 }],
+        });
+      }
+
+      return acc;
+    }, []);
+    setgalleryImages(documents);
+  }, [data, setgalleryImages, t]);
+
+  return (
+    <div className="clearfix">
+      <Gallery
+        images={galleryImages}
+        backdropClosesModal={true}
+        onSelectImage={(index, image) => {
+          setgalleryImages(
+            galleryImages.map((g, idx) =>
+              index === idx ? { ...g, isSelected: !g.isSelected } : g
+            )
+          );
+        }}
+      />
+    </div>
+  );
+}
+export default JobsDocumentGalleryExternal;