refactor: replace image message with file message

src/common/component/Message/Reply.js

@@ -4,7 +4,7 @@ import { useSelector } from "react-redux";
 import MrakdownRender from "../MrakdownRender";
 
 import { ContentTypes } from "../../../app/config";
-import { getFileIcon } from "../../utils";
+import { getFileIcon, isImage } from "../../utils";
 import Avatar from "../Avatar";
 const Styled = styled.div`
   cursor: pointer;
@@ -98,20 +98,20 @@ const renderContent = (data) => {
         </div>
       );
       break;
-    case ContentTypes.image:
-    case ContentTypes.imageJPG:
-      res = <img className="pic" src={thumbnail} />;
-      break;
     case ContentTypes.file:
       {
-        const { file_type, name } = properties;
+        const { file_type, name, size } = properties;
         const icon = getFileIcon(file_type, name);
-        res = (
-          <>
-            {icon}
-            <span className="file_name">{name}</span>
-          </>
-        );
+        if (isImage(file_type, size)) {
+          res = <img className="pic" src={thumbnail} />;
+        } else {
+          res = (
+            <>
+              {icon}
+              <span className="file_name">{name}</span>
+            </>
+          );
+        }
       }
       break;
 

src/common/component/Message/renderContent.js

@@ -6,7 +6,7 @@ import Linkit from "react-linkify";
 import dayjs from "dayjs";
 import Mention from "./Mention";
 import MrakdownRender from "../MrakdownRender";
-import { getDefaultSize } from "../../utils";
+import { getDefaultSize, isImage } from "../../utils";
 import FileBox from "../FileBox";
 import URLPreview from "./URLPreview";
 import reactStringReplace from "react-string-replace";
@@ -68,35 +68,38 @@ const renderContent = ({
         ctn = <MrakdownRender content={content} />;
       }
       break;
-    case "image/png":
-    case "image/jpeg":
-      {
-        const { name, size, type } = properties;
-        const { width, height } = getDefaultSize(properties);
-        ctn = (
-          <img
-            className="img preview"
-            style={{ width: `${width}px`, height: `${height}px` }}
-            data-meta={JSON.stringify({ width, height, name, type, size })}
-            data-origin={content}
-            src={thumbnail || content}
-          />
-        );
-      }
-      break;
     case "rustchat/file":
       {
         const { size, name, file_type } = properties;
-        ctn = (
-          <FileBox
-            from_uid={from_uid}
-            created_at={created_at}
-            content={content}
-            size={size}
-            name={name}
-            file_type={file_type}
-          />
-        );
+        if (isImage(file_type, size)) {
+          const { width, height } = getDefaultSize(properties);
+          ctn = (
+            <img
+              className="img preview"
+              style={{ width: `${width}px`, height: `${height}px` }}
+              data-meta={JSON.stringify({
+                width,
+                height,
+                name,
+                file_type,
+                size,
+              })}
+              data-origin={content}
+              src={thumbnail || content}
+            />
+          );
+        } else {
+          ctn = (
+            <FileBox
+              from_uid={from_uid}
+              created_at={created_at}
+              content={content}
+              size={size}
+              name={name}
+              file_type={file_type}
+            />
+          );
+        }
       }
       break;