Added MMS support for messaging. IO-538

client/src/components/chat-media-selector/chat-media-selector.component.jsx

@@ -0,0 +1,88 @@
+import { PictureFilled } from "@ant-design/icons";
+import { useQuery } from "@apollo/react-hooks";
+import { Badge, Popover } from "antd";
+import React, { useEffect, useState } 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 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
+});
+const mapDispatchToProps = (dispatch) => ({
+  //setUserLanguage: language => dispatch(setUserLanguage(language))
+});
+export default connect(mapStateToProps, mapDispatchToProps)(ChatMediaSelector);
+
+export function ChatMediaSelector({
+  selectedMedia,
+  setSelectedMedia,
+  conversation,
+}) {
+  const { t } = useTranslation();
+  console.log("conversation", conversation);
+  const { loading, error, data, refetch } = useQuery(GET_DOCUMENTS_BY_JOB, {
+    variables: {
+      jobId:
+        conversation.job_conversations[0] &&
+        conversation.job_conversations[0].jobid,
+    },
+    fetchPolicy: "network-only",
+    skip:
+      !conversation.job_conversations ||
+      conversation.job_conversations.length === 0,
+  });
+
+  const [visible, setVisible] = useState(false);
+
+  const handleVisibleChange = (visible) => {
+    setVisible(visible);
+  };
+
+  useEffect(() => {
+    setSelectedMedia([]);
+  }, [setSelectedMedia, conversation]);
+
+  const content = (
+    <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>
+  );
+
+  return (
+    <Popover
+      content={
+        conversation.job_conversations.length === 0 ? (
+          <div>{t("messaging.errors.noattachedjobs")}</div>
+        ) : (
+          content
+        )
+      }
+      title={t("messaging.labels.selectmedia")}
+      trigger="click"
+      visible={visible}
+      onVisibleChange={handleVisibleChange}
+    >
+      <Badge
+        size="small"
+        count={selectedMedia.filter((s) => s.isSelected).length}
+      >
+        <PictureFilled style={{ margin: "0 .5rem" }} />
+      </Badge>
+    </Popover>
+  );
+}