refactor: add typescript definition and fix type error(null -> undefined)

src/common/component/Contact/index.tsx

@@ -1,3 +1,4 @@
+import { FC } from "react";
 import { useNavigate } from "react-router-dom";
 import Tippy from "@tippyjs/react";
 import IconOwner from "../../../assets/icons/owner.svg";
@@ -8,17 +9,29 @@ import StyledWrapper from "./styled";
 import useContextMenu from "../../hook/useContextMenu";
 import { useAppSelector } from "../../../app/store";
 
-export default function Contact({
-  cid = null,
+interface Props {
+  cid: number;
+  uid: number;
+  owner?: number;
+  dm?: boolean;
+  interactive?: boolean;
+  popover?: boolean;
+  compact?: boolean;
+  avatarSize?: number;
+  enableContextMenu?: boolean;
+}
+
+const Contact: FC<Props> = ({
+  cid,
+  uid,
   owner = false,
   dm = false,
   interactive = true,
-  uid = "",
   popover = false,
   compact = false,
   avatarSize = 32,
   enableContextMenu = false
-}) {
+}) => {
   const navigate = useNavigate();
   const { visible: contextMenuVisible, handleContextMenuEvent, hideContextMenu } = useContextMenu();
   const curr = useAppSelector((store) => store.contacts.byId[uid]);
@@ -43,10 +56,10 @@ export default function Contact({
         content={<Profile uid={uid} type="card" cid={cid} />}
       >
         <StyledWrapper
-          onContextMenu={enableContextMenu ? handleContextMenuEvent : null}
           size={avatarSize}
-          onDoubleClick={dm ? handleDoubleClick : null}
           className={`${interactive ? "interactive" : ""} ${compact ? "compact" : ""}`}
+          onDoubleClick={dm ? handleDoubleClick : undefined}
+          onContextMenu={enableContextMenu ? handleContextMenuEvent : undefined}
         >
           <div className="avatar">
             <Avatar url={curr.avatar} name={curr.name} alt="avatar" />
@@ -58,4 +71,6 @@ export default function Contact({
       </Tippy>
     </ContextMenu>
   );
-}
+};
+
+export default Contact;