IO-2348 add http auth for media.

client/src/components/chat-messages-list/chat-message-list.component.jsx

@@ -1,5 +1,5 @@
 import Icon from "@ant-design/icons";
-import { Tooltip } from "antd";
+import { Spin, Tooltip } from "antd";
 import i18n from "i18next";
 import moment from "moment";
 import React, { useEffect, useRef } from "react";
@@ -12,6 +12,8 @@ import {
 } from "react-virtualized";
 import { DateTimeFormatter } from "../../utils/DateFormatter";
 import "./chat-message-list.styles.scss";
+import { useState } from "react";
+import axios from "axios";
 
 export default function ChatMessageListComponent({ messages }) {
   const virtualizedListRef = useRef(null);
@@ -95,9 +97,7 @@ const MessageRender = (message) => {
               key={idx}
               style={{ display: "flex", justifyContent: "center" }}
             >
-              <a href={i} target="__blank">
-                <img alt="Received" className="message-img" src={i} />
-              </a>
+              <ImageDisplay src={i} />
             </div>
           ))}
         <div>{message.text}</div>
@@ -116,3 +116,21 @@ const StatusRender = (status) => {
       return null;
   }
 };
+
+const ImageDisplay = ({ src }) => {
+  const [state, setstate] = useState({ loading: true, url: null });
+
+  useEffect(() => {
+    axios
+
+      .post("/sms/fetchmedia", { mediaUrl: src })
+      .then(({ data }) => setstate({ loading: false, url: data }));
+  }, [src]);
+
+  if (state.loading === true) return <Spin />;
+  return (
+    <a href={i} target="__blank">
+      <img alt="Received" className="message-img" src={state.url} />
+    </a>
+  );
+};