refactor: add typescript definition and fix some type error

src/common/hook/useChatScroll.ts

@@ -1,9 +1,8 @@
 import { useRef, useEffect } from "react";
 // import { useDebounce } from "rooks";
 
-function useChatScroll(deps = []) {
-  // todo: ref should be initialized to null
-  const ref = useRef();
+function useChatScroll<T extends HTMLElement>() {
+  const ref = useRef<T>(null);
   // useEffect(() => {
   //   console.log("chat scroll", ref);
   //   if (ref.current) {

src/common/hook/useContextMenu.tsx

@@ -1,14 +1,19 @@
-import { useState } from "react";
+import { useState, MouseEvent, ReactElement } from "react";
 import { hideAll } from "tippy.js";
 import Tippy from "@tippyjs/react";
-import Menu from "../component/ContextMenu";
+import Menu, { Item } from "../component/ContextMenu";
+
+interface ContextMenuProps {
+  key: string | number;
+  children: ReactElement;
+  items: Item[];
+}
 
 export default function useContextMenu(placement = "right-start") {
   const [visible, setVisible] = useState(false);
   // for tippy.js
   const [offset, setOffset] = useState({ x: 0, y: 0 });
-  const handleContextMenuEvent = (evt) => {
-    // console.log("context menu event", evt, evt.currentTarget);
+  const handleContextMenuEvent = (evt: MouseEvent) => {
     hideAll();
     evt.preventDefault();
     const { currentTarget, clientX, clientY } = evt;
@@ -22,14 +27,14 @@ export default function useContextMenu(placement = "right-start") {
       y = top - clientY;
     }
     setOffset({ x, y });
-
     setVisible(true);
-    console.log("offset", x, y);
   };
+
   const hideContextMenu = () => {
     setVisible(false);
   };
-  const ContextMenu = ({ key, items, children }) => {
+
+  const ContextMenu = ({ key, items, children }: ContextMenuProps) => {
     return (
       <Tippy
         visible={visible}
@@ -45,6 +50,7 @@ export default function useContextMenu(placement = "right-start") {
       </Tippy>
     );
   };
+
   return {
     ContextMenu,
     offset,

src/common/hook/useRemoveLocalMessage.ts

@@ -1,14 +1,20 @@
-// import second from 'first'
-import { useDispatch } from "react-redux";
 import { removeMessage } from "../../app/slices/message";
 import { removeChannelMsg } from "../../app/slices/message.channel";
 import { removeUserMsg } from "../../app/slices/message.user";
-export default function useRemoveLocalMessage({ context = "user", id = 0 }) {
-  const dispatch = useDispatch();
+import { useAppDispatch } from "../../app/store";
+
+// todo: check usage
+interface Props {
+  context: "user" | "channel";
+  id: number;
+}
+
+export default function useRemoveLocalMessage({ context = "user", id = 0 }: Props) {
+  const dispatch = useAppDispatch();
   const removeContextMessage = context == "channel" ? removeChannelMsg : removeUserMsg;
-  const removeLocalMessage = (mid) => {
+
+  return (mid: number) => {
     dispatch(removeContextMessage({ id, mid }));
     dispatch(removeMessage(mid));
   };
-  return removeLocalMessage;
 }

src/common/hook/useSendMessage.ts

@@ -1,14 +1,34 @@
-// import second from 'first'
+import toast from "react-hot-toast";
 import { removeReplyingMessage, addReplyingMessage } from "../../app/slices/message";
 import { useSendChannelMsgMutation } from "../../app/services/channel";
 import { useSendMsgMutation } from "../../app/services/contact";
 import { useReplyMessageMutation } from "../../app/services/message";
-import { useDispatch, useSelector } from "react-redux";
-import toast from "react-hot-toast";
-export default function useSendMessage(props) {
+import { useAppDispatch, useAppSelector } from "../../app/store";
+
+interface Props {
+  context: "user" | "channel";
+  from: number;
+  to: number;
+}
+
+interface SendMessagesDTO {
+  type: "text";
+  content: string;
+  users: number[];
+  channels: number[];
+}
+
+interface SendMessageDTO {
+  type: "text";
+  content: string;
+  properties: object;
+  reply_mid?: number;
+}
+
+export default function useSendMessage(props?: Props) {
   const { context = "user", from = null, to = null } = props || {};
-  const dispatch = useDispatch();
-  const stageFiles = useSelector((store) => store.ui.uploadFiles[`${context}_${to}`] || []);
+  const dispatch = useAppDispatch();
+  const stageFiles = useAppSelector((store) => store.ui.uploadFiles[`${context}_${to}`] || []);
   const [replyMessage, { isError: replyErr, isLoading: replying, isSuccess: replySuccess }] =
     useReplyMessageMutation();
   const [
@@ -18,7 +38,12 @@ export default function useSendMessage(props) {
   const [sendUserMsg, { isLoading: userSending, isSuccess: userSuccess, isError: userError }] =
     useSendMsgMutation();
   const sendFn = context == "user" ? sendUserMsg : sendChannelMsg;
-  const sendMessages = async ({ type = "text", content, users = [], channels = [] }) => {
+  const sendMessages = async ({
+    type = "text",
+    content,
+    users = [],
+    channels = []
+  }: SendMessagesDTO) => {
     if (users.length) {
       for await (const uid of users) {
         await sendUserMsg({
@@ -42,9 +67,9 @@ export default function useSendMessage(props) {
     type = "text",
     content,
     properties = {},
-    reply_mid = null,
+    reply_mid,
     ...rest
-  }) => {
+  }: SendMessageDTO) => {
     if (reply_mid) {
       removeReplying();
       await replyMessage({
@@ -66,7 +91,7 @@ export default function useSendMessage(props) {
       });
     }
   };
-  const setReplying = (mid) => {
+  const setReplying = (mid: number) => {
     if (stageFiles.length !== 0) {
       toast.error("Only text is supported when replying a message");
       return;