refactor: more TS code

src/common/component/ContextMenu.tsx

@@ -1,9 +1,9 @@
-import { FC, MouseEvent } from "react";
+import { FC, MouseEvent, ReactElement } from "react";
 import StyledMenu from "./styled/Menu";
 
 export interface Item {
   title: string;
-  icon?: string;
+  icon?: string | ReactElement;
   handler: (e: MouseEvent) => void;
   underline?: boolean;
   danger?: boolean;

src/common/component/InviteModal/AddMembers.tsx

@@ -97,12 +97,12 @@ interface Props {
   closeModal: () => void;
 }
 
-const AddMembers: FC<Props> = ({ cid, closeModal }) => {
+const AddMembers: FC<Props> = ({ cid = 0, closeModal }) => {
   const [addMembers, { isLoading: isAdding, isSuccess }] = useAddMembersMutation();
   const [selects, setSelects] = useState<number[]>([]);
   const { channel, userData } = useAppSelector((store) => {
     return {
-      channel: cid ? store.channels.byId[cid] : null,
+      channel: store.channels.byId[cid],
       userData: store.users.byId
     };
   });

src/common/component/InviteModal/index.tsx

@@ -29,8 +29,6 @@ const Styled = styled.div`
   }
 `;
 
-// type: server,channel
-
 interface Props {
   type?: "server" | "channel";
   cid?: number;

src/common/component/MarkdownEditor/index.tsx

@@ -1,4 +1,4 @@
-import { useRef, useEffect } from "react";
+import { useRef, useEffect, FC } from "react";
 import "@toast-ui/editor/dist/toastui-editor.css";
 import { Editor } from "@toast-ui/react-editor";
 import "prismjs/themes/prism.css";
@@ -9,15 +9,22 @@ import StyledWrapper from "./styled";
 import useUploadFile from "../../hook/useUploadFile";
 
 import Button from "../styled/Button";
-
-function MarkdownEditor({
+type Props = {
+  updateDraft?: (draft: string) => void;
+  initialValue: string;
+  height: string;
+  placeholder: string;
+  sendMarkdown: (md: string) => void;
+  setEditorInstance: () => void;
+};
+const MarkdownEditor: FC<Props> = ({
   updateDraft = null,
   initialValue = "",
   height = "50vh",
   placeholder,
   sendMarkdown,
   setEditorInstance
-}) {
+}) => {
   const editorRef = useRef<Editor | undefined>(undefined);
   const { uploadFile } = useUploadFile();
   // const [pHolder, setPHolder] = useState(placeholder);
@@ -73,5 +80,5 @@ function MarkdownEditor({
       </Button>
     </StyledWrapper>
   );
-}
+};
 export default MarkdownEditor;

src/common/component/Message/Commands.tsx

@@ -1,4 +1,4 @@
-import { useState, useRef } from "react";
+import { useState, useRef, FC } from "react";
 import { useDispatch } from "react-redux";
 import styled from "styled-components";
 import Tippy from "@tippyjs/react";
@@ -61,8 +61,13 @@ const StyledCmds = styled.ul`
     transform: translateX(-100%);
   }
 `;
-
-export default function Commands({ context = "user", contextId = 0, mid = 0, toggleEditMessage }) {
+type Props = {
+  context: "user" | "channel";
+  contextId: number;
+  mid: number;
+  toggleEditMessage: () => void;
+};
+const Commands: FC<Props> = ({ context = "user", contextId = 0, mid = 0, toggleEditMessage }) => {
   const {
     canDelete,
     canReply,
@@ -84,19 +89,17 @@ export default function Commands({ context = "user", contextId = 0, mid = 0, tog
   const dispatch = useDispatch();
   const [tippyVisible, setTippyVisible] = useState(false);
   const cmdsRef = useRef(null);
-  const handleReply = (fromMenu) => {
+  const handleReply = () => {
     if (contextId) {
       setReplying(mid);
     }
-    if (fromMenu) {
-      hideAll();
-    }
+    hideAll();
   };
 
   const handleTippyVisible = (visible = true) => {
     setTippyVisible(visible);
   };
-  const handleSelect = (mid) => {
+  const handleSelect = (mid: number) => {
     dispatch(updateSelectMessages({ context, id: contextId, data: mid }));
     hideAll();
   };
@@ -202,4 +205,5 @@ export default function Commands({ context = "user", contextId = 0, mid = 0, tog
       {DeleteModal}
     </>
   );
-}
+};
+export default Commands;

src/common/component/Message/styled.tsx

@@ -8,11 +8,6 @@ const StyledMsg = styled.div`
   padding: 4px 8px;
   margin: 8px 0;
   border-radius: 8px;
-  /* content-visibility: auto;
-  contain-intrinsic-size: auto 150px; */
-  /* &.in_view {
-    content-visibility: visible;
-  } */
   &[data-highlight="true"] {
     background: #f5f6f7;
   }
@@ -22,8 +17,6 @@ const StyledMsg = styled.div`
   &:hover,
   &.contextVisible,
   &.preview {
-    /* content-visibility: inherit;
-    contain-intrinsic-size: inherit; */
     background: #f5f6f7;
     .cmds {
       visibility: visible;

src/common/component/Send/EmojiPicker.tsx

@@ -4,6 +4,7 @@ import { useOutsideClick } from "rooks";
 import Tooltip from "../Tooltip";
 import Picker from "../EmojiPicker";
 import SmileIcon from "../../../assets/icons/emoji.smile.svg";
+import { BaseEmoji, EmojiData } from "emoji-mart";
 
 const Styled = styled.div`
   position: relative;
@@ -29,7 +30,7 @@ const Styled = styled.div`
   }
 `;
 
-export default function EmojiPicker({ selectEmoji }) {
+export default function EmojiPicker({ selectEmoji }: { selectEmoji: (e: string) => void }) {
   const ref = useRef<HTMLDivElement>(null);
   const [visible, setVisible] = useState(false);
 
@@ -37,9 +38,9 @@ export default function EmojiPicker({ selectEmoji }) {
     setVisible((prev) => !prev);
   };
 
-  const handleSelect = (emoji) => {
+  const handleSelect = (emoji: EmojiData) => {
     console.log("semojii", emoji);
-    selectEmoji(emoji.native);
+    selectEmoji((emoji as BaseEmoji).native);
   };
 
   useOutsideClick(
@@ -49,9 +50,7 @@ export default function EmojiPicker({ selectEmoji }) {
       const ignore =
         (clickEle.nodeName == "svg" && clickEle.dataset.emoji == "toggler") ||
         (clickEle.nodeName == "path" && clickEle.parentElement.dataset.emoji == "toggler");
-      // console.log("outside click", clickEle, clickEle.parentElement, ignore);
       if (ignore) return;
-      // if(clickEle)
       setVisible(false);
     },
     visible

src/common/component/Send/index.tsx

@@ -64,7 +64,7 @@ const Send: FC<IProps> = ({
     }
   }, [replying_mid]);
 
-  const insertEmoji = (emoji) => {
+  const insertEmoji = (emoji: string) => {
     if (mode == Modes.markdown && markdownEditor) {
       // markdown insert emoji
       markdownEditor.insertText(emoji);

src/common/component/User/index.tsx

@@ -12,7 +12,7 @@ import { useAppSelector } from "../../../app/store";
 interface Props {
   uid: number;
   cid?: number;
-  owner?: number;
+  owner?: boolean;
   dm?: boolean;
   interactive?: boolean;
   popover?: boolean;