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;

src/common/hook/useFavMessage.ts

@@ -2,7 +2,13 @@ import { useState, useEffect } from "react";
 import { useLazyRemoveFavoriteQuery, useFavoriteMessageMutation } from "../../app/services/message";
 import { useAppSelector } from "../../app/store";
 
-export default function useFavMessage({ cid = null, uid = null }) {
+export default function useFavMessage({
+  cid = null,
+  uid = null
+}: {
+  cid?: number | null;
+  uid?: number | null;
+}) {
   const [removeFav] = useLazyRemoveFavoriteQuery();
   const [addFav] = useFavoriteMessageMutation();
   const [favorites, setFavorites] = useState([]);

src/common/hook/useSendMessage.ts

@@ -7,7 +7,7 @@ import { useAppDispatch, useAppSelector } from "../../app/store";
 
 interface Props {
   context: "user" | "channel";
-  from: number;
+  from?: number;
   to: number;
 }
 
@@ -25,7 +25,7 @@ interface SendMessageDTO {
 }
 
 const useSendMessage = (props?: Props) => {
-  const { context = "user", from, to = null } = props || {};
+  const { context = "user", from = 0, to = null } = props || {};
   const dispatch = useAppDispatch();
   const stageFiles = useAppSelector((store) => store.ui.uploadFiles[`${context}_${to}`] || []);
   const [replyMessage, { isError: replyErr, isLoading: replying, isSuccess: replySuccess }] =

src/common/hook/useUploadFile.ts

@@ -4,13 +4,14 @@ import { updateUploadFiles } from "../../app/slices/ui";
 import BASE_URL, { FILE_SLICE_SIZE } from "../../app/config";
 import { usePrepareUploadFileMutation, useUploadFileMutation } from "../../app/services/message";
 import { useAppDispatch, useAppSelector } from "../../app/store";
+import { Message } from "../../types/channel";
 
 // todo: check props type
 interface IProps {
   context: "channel" | "user";
   id: number;
 }
-const useUploadFile = (props: IProps) => {
+const useUploadFile = (props?: IProps) => {
   const { context, id } = props ? props : { context: "channel", id: 0 };
   const dispatch = useAppDispatch();
   const { stageFiles, replying } = useAppSelector((store) => {
@@ -19,8 +20,7 @@ const useUploadFile = (props: IProps) => {
       replying: store.message.replying[`${context}_${id}`]
     };
   });
-  const [data, setData] = useState(null);
-  // const [uploadingFile, setUploadingFile] = useState(false);
+  const [data, setData] = useState<Message | null>(null);
   const canceledRef = useRef(false);
   const sliceUploadedCountRef = useRef(0);
   const totalSliceCountRef = useRef(1);

src/common/hook/useUserOperation.ts

@@ -8,6 +8,7 @@ import { useLazyDeleteUserQuery } from "../../app/services/user";
 import useConfig from "./useConfig";
 import useCopy from "./useCopy";
 import { useAppSelector } from "../../app/store";
+import { AgoraConfig } from "../../types/server";
 interface IProps {
   uid?: number;
   cid?: number;
@@ -79,7 +80,7 @@ const useUserOperation = ({ uid, cid }: IProps) => {
   const canDeleteChannel = cid && !channel?.is_public && isAdmin;
   const canRemoveFromChannel =
     cid && !channel?.is_public && (isAdmin || channel?.owner == loginUid) && uid != channel?.owner;
-  const canCall: boolean = agoraConfig.enabled && loginUid != uid;
+  const canCall: boolean = (agoraConfig as AgoraConfig)?.enabled && loginUid != uid;
   const canRemove: boolean = isAdmin && loginUid != uid && !cid;
 
   return {