IO-557 Send documents in emails.

client/src/components/email-documents/email-documents.component.jsx

@@ -0,0 +1,58 @@
+import { useQuery } from "@apollo/client";
+import React from "react";
+import { useTranslation } from "react-i18next";
+import { connect } from "react-redux";
+import { createStructuredSelector } from "reselect";
+import { GET_DOCUMENTS_BY_JOB } from "../../graphql/documents.queries";
+import { selectEmailConfig } from "../../redux/email/email.selectors";
+import AlertComponent from "../alert/alert.component";
+import JobDocumentsGalleryExternal from "../jobs-documents-gallery/jobs-documents-gallery.external.component";
+import LoadingSpinner from "../loading-spinner/loading-spinner.component";
+
+const mapStateToProps = createStructuredSelector({
+  //currentUser: selectCurrentUser
+  emailConfig: selectEmailConfig,
+});
+const mapDispatchToProps = (dispatch) => ({
+  //setUserLanguage: language => dispatch(setUserLanguage(language))
+});
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(EmailDocumentsComponent);
+
+export function EmailDocumentsComponent({
+  emailConfig,
+
+  selectedMediaState,
+}) {
+  const { t } = useTranslation();
+
+  const [selectedMedia, setSelectedMedia] = selectedMediaState;
+  const { loading, error, data } = useQuery(GET_DOCUMENTS_BY_JOB, {
+    variables: {
+      jobId: emailConfig.jobid,
+    },
+    skip: !emailConfig.jobid,
+  });
+  console.log(
+    "🚀  ~ file: email-documents.component.jsx  ~ line 38  ~ emailConfig",
+    emailConfig
+  );
+
+  return (
+    <div>
+      {loading && <LoadingSpinner />}
+      {error && <AlertComponent message={error.message} type="error" />}
+      {selectedMedia.filter((s) => s.isSelected).length >= 10 ? (
+        <div style={{ color: "red" }}>{t("messaging.labels.maxtenimages")}</div>
+      ) : null}
+      {data && (
+        <JobDocumentsGalleryExternal
+          data={data ? data.documents : []}
+          externalMediaState={[selectedMedia, setSelectedMedia]}
+        />
+      )}
+    </div>
+  );
+}