refactor: image message

src/common/component/ChannelModal/index.js

@@ -94,7 +94,7 @@ export default function ChannelModal({ personal = false, closeModal }) {
               <input
                 value={input}
                 onChange={handleInputChange}
-                placeholder="Type username to search"
+                placeholder="Type Username to search"
               />
             </div>
             {contacts && (

src/common/component/ContactsModal.js

@@ -16,7 +16,7 @@ const StyledWrapper = styled.div`
   box-shadow: 0px 25px 50px rgba(31, 41, 55, 0.25);
   border-radius: 8px;
   transition: all 0.5s ease;
-  overflow-y: scroll;
+  /* overflow-y: scroll; */
   .search {
     box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.1);
     padding: 8px;
@@ -67,7 +67,7 @@ export default function ContactsModal({ closeModal }) {
           <input
             value={input}
             onChange={handleSearch}
-            placeholder="Type username to search"
+            placeholder="Type Username to search"
           />
         </div>
         {contacts && (

src/common/component/FileMessage/ImageMessage.js

@@ -1,4 +1,4 @@
-// import React from 'react'
+import { useState, useEffect } from "react";
 import styled from "styled-components";
 import { CircularProgressbar, buildStyles } from "react-circular-progressbar";
 import "react-circular-progressbar/dist/styles.css";
@@ -29,7 +29,7 @@ const Styled = styled.div`
   }
 `;
 import { getDefaultSize } from "../../utils";
-export default function Image({
+export default function ImageMessage({
   uploading,
   progress,
   thumbnail,
@@ -37,8 +37,21 @@ export default function Image({
   content,
   properties = {},
 }) {
+  const [url, setUrl] = useState(thumbnail);
   const { width = 0, height = 0 } = getDefaultSize(properties);
   console.log("image props", properties, width, height);
+  useEffect(() => {
+    const newUrl = thumbnail;
+    const img = new Image();
+    img.onload = () => {
+      setUrl(newUrl);
+    };
+    img.onerror = () => {
+      setUrl("");
+    };
+    img.src = newUrl;
+  }, [thumbnail]);
+
   return (
     <Styled>
       {uploading && (
@@ -64,7 +77,7 @@ export default function Image({
         data-meta={JSON.stringify(properties)}
         data-origin={content}
         data-download={download}
-        src={thumbnail || download || content}
+        src={url}
       />
     </Styled>
   );

src/common/component/FileMessage/index.js

@@ -3,7 +3,7 @@ import dayjs from "dayjs";
 import relativeTime from "dayjs/plugin/relativeTime";
 import { useSelector } from "react-redux";
 import Styled from "./styled";
-import Image from "./Image";
+import ImageMessage from "./ImageMessage";
 import useRemoveLocalMessage from "../../hook/useRemoveLocalMessage";
 import useUploadFile from "../../hook/useUploadFile";
 import useSendMessage from "../../hook/useSendMessage";
@@ -113,7 +113,8 @@ export default function FileMessage({
 
   if (isImage(content_type, size))
     return (
-      <Image
+      <ImageMessage
+        key={properties?.local_id}
         uploading={sending}
         progress={progress}
         properties={{ ...imageSize, ...properties }}