refactor: add typescript support to project

src/routes/chat/SessionList/ContextMenu.tsx

@@ -1,4 +1,3 @@
-// import React from 'react'
 import Tippy from "@tippyjs/react";
 import { useDispatch, useSelector } from "react-redux";
 import { useNavigate, useLocation, useMatch } from "react-router-dom";
@@ -30,9 +29,11 @@ export default function SessionContextMenu({
       channelMuted: context == "channel" ? store.footprint.muteChannels[id] : false
     };
   });
+
   const handleChannelSetting = () => {
     navigateTo(`/setting/channel/${id}?f=${pathname}`);
   };
+
   const handleReadAll = () => {
     // console.log("last mid", mids, lastMid);
     if (mid) {
@@ -41,16 +42,19 @@ export default function SessionContextMenu({
       updateReadIndex(param);
     }
   };
+
   const handleRemoveSession = () => {
     dispatch(removeUserSession(id));
     if (pathMatched) {
       navigateTo("/chat");
     }
   };
+
   const handleChannelMute = () => {
     const data = channelMuted ? { remove_groups: [id] } : { add_groups: [{ gid: id }] };
     muteChannel(data);
   };
+
   const items =
     context == "user"
       ? [

src/routes/chat/SessionList/Session.tsx

@@ -13,7 +13,10 @@ import IconLock from "../../../assets/icons/lock.svg";
 import useContextMenu from "../../../common/hook/useContextMenu";
 import { useNavigate, NavLink } from "react-router-dom";
 import useUploadFile from "../../../common/hook/useUploadFile";
+
+// todo: move to root file
 dayjs.extend(relativeTime);
+
 export default function Session({
   type = "user",
   id,
@@ -23,6 +26,7 @@ export default function Session({
 }) {
   const navigate = useNavigate();
   const { addStageFile } = useUploadFile({ context: type, id });
+
   const [{ isActive }, drop] = useDrop(
     () => ({
       accept: [NativeTypes.FILE],
@@ -44,6 +48,7 @@ export default function Session({
     }),
     [type, id]
   );
+
   const { visible: contextMenuVisible, handleContextMenuEvent, hideContextMenu } = useContextMenu();
   const [data, setData] = useState(null);
   const { messageData, contactData, channelData, readIndex, loginUid, mids, muted } = useSelector(
@@ -60,10 +65,12 @@ export default function Session({
       };
     }
   );
+
   const handleImageError = (evt) => {
     evt.target.classList.add("channel_default");
     evt.target.src = iconChannel;
   };
+
   useEffect(() => {
     const tmp = type == "user" ? contactData[id] : channelData[id];
     if (!tmp) return;
@@ -81,6 +88,7 @@ export default function Session({
     messageData,
     loginUid
   });
+
   return (
     <li className="session">
       <ContextMenu

src/routes/chat/SessionList/index.tsx

@@ -1,15 +1,16 @@
 import { useState, useEffect } from "react";
-import { useSelector } from "react-redux";
 import Styled from "./styled";
 import Session from "./Session";
 import DeleteChannelConfirmModal from "../../settingChannel/DeleteConfirmModal";
 import InviteModal from "../../../common/component/InviteModal";
+import { useAppSelector } from "../../../app/store";
+
 export default function SessionList({ tempSession = null }) {
   const [deleteId, setDeleteId] = useState(null);
   const [inviteChannelId, setInviteChannelId] = useState(null);
   const [sessions, setSessions] = useState([]);
   const { channelIDs, DMs, readChannels, readUsers, channelMessage, userMessage, loginUid } =
-    useSelector((store) => {
+    useAppSelector((store) => {
       return {
         loginUid: store.authData.uid,
         channelIDs: store.channels.ids,
@@ -20,6 +21,7 @@ export default function SessionList({ tempSession = null }) {
         readUsers: store.footprint.readUsers
       };
     });
+
   useEffect(() => {
     const cSessions = channelIDs.map((id) => {
       const mids = channelMessage[id];
@@ -51,6 +53,7 @@ export default function SessionList({ tempSession = null }) {
     userMessage,
     tempSession
   ]);
+
   return (
     <>
       <Styled>