FIX | fixed image scale after add new message

src/containers/Chats/plugins/chat-item-image.component.tsx

@@ -16,8 +16,8 @@ interface ChatItemImageProps extends IMessage {
 export const ChatItemImage: FC<ChatItemImageProps> = (props) => {
   const [isOpenImageModal, setOpenImageModal] = useState<boolean>(false);
 
-  const [imgheight, setHeight] = useState(null);
-  const [imgwidth, setWidth] = useState(null);
+  const [imgHeight, setHeight] = useState(null);
+  const [imgWidth, setWidth] = useState(null);
 
   let chatAreaSize = document.querySelector(".chat-field-area");
   let width = chatAreaSize.clientWidth;
@@ -36,21 +36,22 @@ export const ChatItemImage: FC<ChatItemImageProps> = (props) => {
     }
   };
 
-  const imgUrl = props.content?.fileUrl;
-  let imgHeight = {};
-  let imgWidth = {};
-
   useEffect(() => {
+    const imgUrl = props.content?.fileUrl;
+
     let img = new Image();
     img.src = imgUrl;
+
     img.onload = () => {
-      imgHeight[imgUrl] = img.height;
-      imgWidth[imgUrl] = img.width;
-      const scale = calcSize(imgHeight[imgUrl], imgWidth[imgUrl]);
-      setHeight(imgHeight[imgUrl] * scale);
-      setWidth(imgWidth[imgUrl] * scale);
+      const imageHeight = img.height;
+      const imageWidth = img.width;
+
+      const scale = calcSize(imageHeight, imageWidth);
+
+      setHeight(imageHeight * scale);
+      setWidth(imageWidth * scale);
     };
-  }, []);
+  }, [props.content?.fileUrl]);
 
   return (
     <>
@@ -60,7 +61,7 @@ export const ChatItemImage: FC<ChatItemImageProps> = (props) => {
         imageSrc={props?.content?.fileUrl}
       />
       <ChatItem {...props}>
-        {imgheight && (
+        {imgHeight && (
           <div
             className="chat-item-image-container"
             onClick={() => {
@@ -70,7 +71,7 @@ export const ChatItemImage: FC<ChatItemImageProps> = (props) => {
             <img
               src={props.content?.fileUrl || null}
               className={props.isMy ? "myImage" : null}
-              style={{ width: imgwidth, height: imgheight }}
+              style={{ width: imgWidth, height: imgHeight }}
             />
           </div>
         )}