refactor: add typescript definition

src/common/component/FileMessage/index.tsx

@@ -1,16 +1,16 @@
-import { useEffect, useState } from "react";
+import { FC, useEffect, useState } from "react";
 import dayjs from "dayjs";
 import relativeTime from "dayjs/plugin/relativeTime";
-import { useSelector } from "react-redux";
 import Styled from "./styled";
 import ImageMessage from "./ImageMessage";
 import useRemoveLocalMessage from "../../hook/useRemoveLocalMessage";
 import useUploadFile from "../../hook/useUploadFile";
 import useSendMessage from "../../hook/useSendMessage";
 import Progress from "./Progress";
-import { getFileIcon, formatBytes, isImage, getImageSize } from "../../utils";
+import { getFileIcon, formatBytes, isImage, getImageSize, ImageSize } from "../../utils";
 // import { ReactComponent as IconDownload } from "../../../assets/icons/download.svg";
 // import { ReactComponent as IconClose } from "../../../assets/icons/close.circle.svg";
+import { useAppSelector } from "../../../app/store";
 import IconDownload from "../../../assets/icons/download.svg";
 import IconClose from "../../../assets/icons/close.circle.svg";
 
@@ -21,17 +21,33 @@ const isLocalFile = (content: string) => {
   return content.startsWith("blob:");
 };
 
-export default function FileMessage({
-  context = "",
-  to = null,
+interface Props {
+  context: "user" | "channel";
+  to: number;
+  created_at: number;
+  from_uid?: number;
+  content: string;
+  download: string;
+  thumbnail: string;
+  properties: {
+    local_id: number;
+    name: string;
+    size: number;
+    content_type: string;
+  };
+}
+
+const FileMessage: FC<Props> = ({
+  context,
+  to,
   created_at,
   from_uid = null,
   content = "",
   download = "",
   thumbnail = "",
   properties = { local_id: 0, name: "", size: 0, content_type: "" }
-}) {
-  const [imageSize, setImageSize] = useState(null);
+}) => {
+  const [imageSize, setImageSize] = useState<ImageSize | null>(null);
   const [uploadingFile, setUploadingFile] = useState(false);
   const removeLocalMessage = useRemoveLocalMessage({ context, id: to });
   const {
@@ -44,10 +60,18 @@ export default function FileMessage({
     to
   });
   const { stopUploading, data, uploadFile, progress, isSuccess: uploadSuccess } = useUploadFile();
-  const fromUser = useSelector((store) => store.contacts.byId[from_uid]);
+  const fromUser = useAppSelector((store) => store.contacts.byId[from_uid]);
   const { size, name, content_type } = properties ?? {};
   useEffect(() => {
-    const handleUpSend = async ({ url, name, type }) => {
+    const handleUpSend = async ({
+      url,
+      name,
+      type
+    }: {
+      url: string;
+      name: string;
+      type: string;
+    }) => {
       try {
         setUploadingFile(true);
         if (type.startsWith("image")) {
@@ -102,7 +126,6 @@ export default function FileMessage({
 
   if (!content || !name) return null;
 
-  console.log("file content", content, name, content_type, size);
   const sending = uploadingFile || isSending;
 
   if (isImage(content_type, size))
@@ -152,4 +175,6 @@ export default function FileMessage({
       </div>
     </Styled>
   );
-}
+};
+
+export default FileMessage;