IO-2027 LMS Texting & Emails.

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

@@ -0,0 +1,79 @@
+import React, { useEffect } from "react";
+import Gallery from "react-grid-gallery";
+import { useTranslation } from "react-i18next";
+import { connect } from "react-redux";
+import { createStructuredSelector } from "reselect";
+import {
+  getJobMedia,
+  toggleMediaSelected,
+} from "../../redux/media/media.actions";
+import { selectAllMedia } from "../../redux/media/media.selectors";
+import { selectBodyshop } from "../../redux/user/user.selectors";
+
+const mapStateToProps = createStructuredSelector({
+  bodyshop: selectBodyshop,
+  allMedia: selectAllMedia,
+});
+
+const mapDispatchToProps = (dispatch) => ({
+  getJobMedia: (id) => dispatch(getJobMedia(id)),
+
+  toggleMediaSelected: ({ jobid, filename }) =>
+    dispatch(toggleMediaSelected({ jobid, filename })),
+});
+
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(JobDocumentsLocalGalleryExternal);
+
+function JobDocumentsLocalGalleryExternal({
+  jobId,
+  externalMediaState,
+  getJobMedia,
+  toggleMediaSelected,
+  allMedia,
+}) {
+  const [galleryImages, setgalleryImages] = externalMediaState;
+  const { t } = useTranslation();
+
+  useEffect(() => {
+    if ( jobId) {
+      getJobMedia(jobId);
+    }
+  }, [jobId, getJobMedia]);
+
+  useEffect(() => {
+    let documents =
+      allMedia && allMedia[jobId]
+        ? allMedia[jobId].reduce((acc, val) => {
+            if (
+              val.type &&
+              val.type.mime &&
+              val.type.mime.startsWith("image")
+            ) {
+              acc.push(val);
+            }
+            return acc;
+          }, [])
+        : [];
+
+    setgalleryImages(documents);
+  }, [allMedia, jobId, 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>
+  );
+}