refactor: add typescript support to project

src/common/component/FileMessage/ImageMessage.tsx

@@ -2,6 +2,8 @@ import { useState, useEffect } from "react";
 import styled from "styled-components";
 import { CircularProgressbar, buildStyles } from "react-circular-progressbar";
 import "react-circular-progressbar/dist/styles.css";
+import { getDefaultSize } from "../../utils";
+
 const Styled = styled.div`
   position: relative;
   width: fit-content;
@@ -30,7 +32,7 @@ const Styled = styled.div`
     }
   }
 `;
-import { getDefaultSize } from "../../utils";
+
 export default function ImageMessage({
   uploading,
   progress,

src/common/component/FileMessage/Progress.tsx

@@ -1,5 +1,6 @@
-// import React from 'react'
+import { FC } from "react";
 import styled from "styled-components";
+
 const Styled = styled.div`
   background: #ecfdff;
   border-radius: 4px;
@@ -12,10 +13,18 @@ const Styled = styled.div`
     border-radius: 4px;
   }
 `;
-export default function Progress({ value, width = "100%" }) {
+
+interface Props {
+  value: number;
+  width?: string;
+}
+
+const Progress: FC<Props> = ({ value, width = "100%" }) => {
   return (
     <Styled style={{ width }}>
       <div className="progress" style={{ width: `${value}%` }}></div>
     </Styled>
   );
-}
+};
+
+export default Progress;

src/common/component/FileMessage/index.tsx

@@ -9,12 +9,16 @@ import useUploadFile from "../../hook/useUploadFile";
 import useSendMessage from "../../hook/useSendMessage";
 import Progress from "./Progress";
 import { getFileIcon, formatBytes, isImage, getImageSize } from "../../utils";
+// import { ReactComponent as IconDownload } from "../../../assets/icons/download.svg";
+// import { ReactComponent as IconClose } from "../../../assets/icons/close.circle.svg";
 import IconDownload from "../../../assets/icons/download.svg";
 import IconClose from "../../../assets/icons/close.circle.svg";
 
+// todo: move to root file
 dayjs.extend(relativeTime);
-const isLocalFile = (content) => {
-  return content && typeof content == "string" && content.startsWith("blob:");
+
+const isLocalFile = (content: string) => {
+  return content.startsWith("blob:");
 };
 
 export default function FileMessage({

src/common/component/FileMessage/styled.tsx

@@ -1,4 +1,5 @@
 import styled from "styled-components";
+
 const Styled = styled.div`
   background: #f3f4f6;
   border: 1px solid #d4d4d4;
@@ -58,4 +59,5 @@ const Styled = styled.div`
     }
   }
 `;
+
 export default Styled;