refactor: more TS code

src/common/component/ContextMenu.tsx

@@ -3,7 +3,7 @@ import StyledMenu from "./styled/Menu";
 
 export interface Item {
   title: string;
-  icon: string;
+  icon?: string;
   handler: (e: MouseEvent) => void;
   underline?: boolean;
   danger?: boolean;

src/common/component/Message/PreviewMessage.tsx

@@ -15,7 +15,7 @@ const PreviewMessage: FC<Props> = ({ mid = 0 }) => {
   });
   if (!msg) return null;
   const { from_uid, created_at, content_type, content, thumbnail, properties } = msg;
-  const { name, avatar } = usersData[from_uid];
+  const { name, avatar } = usersData[from_uid] || {};
   return (
     <StyledWrapper className={`preview`}>
       <div className="avatar">

src/common/component/Message/Reaction.tsx

@@ -143,7 +143,7 @@ export default function Reaction({ mid, reactions = null }) {
   return (
     <StyledWrapper className="reactions">
       {Object.entries(reactions).map(([reaction, uids], idx) => {
-        const reacted = uids.findIndex((id) => id == currUid) > -1;
+        const reacted = uids.findIndex((id: number) => id == currUid) > -1;
         return uids.length > 0 ? (
           <span
             onClick={handleReact.bind(null, reaction)}

src/common/component/Message/URLPreview.tsx

@@ -18,8 +18,6 @@ const StyledCompact = styled.a`
     height: 48px;
     border-radius: 4px;
     img {
-      /* width: 100%;
-      height: 100%; */
       object-fit: contain;
     }
   }
@@ -96,15 +94,17 @@ const StyledDetails = styled.a`
 export default function URLPreview({ url = "" }) {
   const [favicon, setFavicon] = useState("");
   const [getInfo] = useLazyGetOGInfoQuery();
-  const [data, setData] = useState(null);
+  const [data, setData] = useState<{ title: string; description: string; ogImage: string } | null>(
+    null
+  );
   useEffect(() => {
     const getMetaData = async (url: string) => {
       // todo
       const { data } = await getInfo(url);
-      const title = data.title || data.site_name;
-      const description = data.description;
-      const ogImage = data.images.find((i) => !!i.url)?.url || "";
-      const favicon = data.favicon_url || `${new URL(url).origin}/favicon.ico`;
+      const title = data?.title || data?.site_name || "";
+      const description = data?.description || "";
+      const ogImage = data?.images.find((i) => !!i.url)?.url || "";
+      const favicon = data?.favicon_url || `${new URL(url).origin}/favicon.ico`;
       setFavicon(favicon);
       setData({ title, description, ogImage });
       // console.log("wtf url", data);

src/common/component/Message/index.tsx

@@ -1,8 +1,7 @@
-import React, { useRef, useState, useEffect } from "react";
+import React, { useRef, useState, useEffect, FC } from "react";
 import dayjs from "dayjs";
 import isToday from "dayjs/plugin/isToday";
 import isYesterday from "dayjs/plugin/isYesterday";
-import { useSelector } from "react-redux";
 import useInView from "./useInView";
 import Tippy from "@tippyjs/react";
 import Reaction from "./Reaction";
@@ -17,29 +16,37 @@ import Tooltip from "../Tooltip";
 import ContextMenu from "./ContextMenu";
 import useContextMenu from "../../hook/useContextMenu";
 import usePinMessage from "../../hook/usePinMessage";
+import { useAppSelector } from "../../../app/store";
 
 // todo: move to root file
 dayjs.extend(isToday);
 dayjs.extend(isYesterday);
-
-function Message({
+interface IProps {
+  readOnly?: boolean;
+  contextId: number;
+  context?: "user" | "channel";
+  read?: boolean;
+  mid: number;
+  updateReadIndex: (any) => void;
+}
+const Message: FC<IProps> = ({
   readOnly = false,
-  contextId = 0,
-  mid = "",
+  contextId,
+  mid,
   context = "user",
   updateReadIndex,
   read = true
-}) {
+}) => {
   const { visible: contextMenuVisible, handleContextMenuEvent, hideContextMenu } = useContextMenu();
   const inviewRef = useInView();
   const [edit, setEdit] = useState(false);
   const avatarRef = useRef(null);
-  const { getPinInfo } = usePinMessage(context == "channel" ? contextId : null);
+  const { getPinInfo } = usePinMessage(context == "channel" ? contextId : 0);
   const {
     message = {},
     reactionMessageData,
     usersData
-  } = useSelector((store) => {
+  } = useAppSelector((store) => {
     return {
       reactionMessageData: store.reactionMessage,
       message: store.message[mid] || {},
@@ -75,7 +82,7 @@ function Message({
   }, [mid, read]);
 
   const reactions = reactionMessageData[mid];
-  const currUser = usersData[fromUid] || {};
+  const currUser = usersData[fromUid];
   // if (!message) return null;
   let timePrefix = null;
   const dayjsTime = dayjs(time);
@@ -104,7 +111,7 @@ function Message({
         content={<Profile uid={fromUid} type="card" cid={contextId} />}
       >
         <div className="avatar" data-uid={fromUid} ref={avatarRef}>
-          <Avatar url={currUser.avatar} name={currUser.name} />
+          <Avatar url={currUser?.avatar} name={currUser?.name} />
         </div>
       </Tippy>
       <ContextMenu
@@ -115,9 +122,14 @@ function Message({
         visible={contextMenuVisible}
         hide={hideContextMenu}
       >
-        <div className="details" data-pin-tip={`pinned by ${usersData[pinInfo?.created_by]?.name}`}>
+        <div
+          className="details"
+          data-pin-tip={`pinned by ${
+            pinInfo?.created_by ? usersData[pinInfo.created_by]?.name : ""
+          }`}
+        >
           <div className="up">
-            <span className="name">{currUser.name}</span>
+            <span className="name">{currUser?.name}</span>
             <Tooltip
               delay={200}
               disabled={!timePrefix || readOnly}
@@ -166,7 +178,7 @@ function Message({
       )}
     </StyledWrapper>
   );
-}
+};
 export default React.memo(Message, (prevs, nexts) => {
   return prevs.mid == nexts.mid;
 });

src/common/component/Send/index.tsx

@@ -2,7 +2,7 @@ import { useEffect, useState, FC } from "react";
 import useSendMessage from "../../hook/useSendMessage";
 import useAddLocalFileMessage from "../../hook/useAddLocalFileMessage";
 import { updateInputMode } from "../../../app/slices/ui";
-import { ContentTypes, ChatPrefixs } from "../../../app/config";
+import { ContentTypes, ChatPrefixes } from "../../../app/config";
 
 import StyledSend from "./styled";
 import UploadFileList from "./UploadFileList";
@@ -132,7 +132,7 @@ const Send: FC<IProps> = ({
     setMarkdownFullscreen((prev) => !prev);
   };
   const name = context == "channel" ? channelsData[id]?.name : usersData[id]?.name;
-  const placeholder = `Send to ${ChatPrefixs[context]}${name} `;
+  const placeholder = `Send to ${ChatPrefixes[context]}${name} `;
   const members =
     context == "channel" ? (channelsData[id]?.is_public ? uids : channelsData[id]?.members) : [];
   return (