refactor: useSelector -> useAppSelector

src/app/slices/favorites.ts

@@ -1,7 +1,6 @@
 import { createSlice, PayloadAction } from "@reduxjs/toolkit";
 // import BASE_URL from "../config";
 
-// todo: check messages type
 export interface Favorite {
   id: number;
   messages: any[];

src/common/component/Message/Reaction.tsx

@@ -1,4 +1,3 @@
-import { useSelector } from "react-redux";
 import styled from "styled-components";
 import { getEmojiDataFromNative } from "emoji-mart";
 import AppleEmojiData from "emoji-mart/data/apple.json";
@@ -106,7 +105,7 @@ const StyledDetails = styled.div`
   }
 `;
 const ReactionDetails = ({ uids = [], emoji, index }) => {
-  const usersData = useSelector((store) => store.users.byId);
+  const usersData = useAppSelector((store) => store.users.byId);
   const names = uids.map((id) => {
     return usersData[id]?.name;
   });

src/common/component/MixedInput/index.tsx

@@ -1,6 +1,5 @@
 import { useRef, useEffect, useState, useCallback } from "react";
 import { useKey } from "rooks";
-import { useSelector } from "react-redux";
 import { Editor, Transforms } from "slate";
 import {
   createPlateUI,
@@ -31,6 +30,7 @@ import useUploadFile from "../../hook/useUploadFile";
 import Styled from "./styled";
 import { CONFIG } from "./config";
 import User from "../User";
+import { useAppSelector } from "../../../app/store";
 export const TEXT_EDITOR_PREFIX = "_text_editor";
 
 let components = createPlateUI({
@@ -50,7 +50,7 @@ const Plugins = ({
   const [context, to] = id.split("_");
   const { addStageFile } = useUploadFile({ context, id: to });
   const enableMentions = members.length > 0;
-  const userData = useSelector((store) => store.users.byId);
+  const userData = useAppSelector((store) => store.users.byId);
   const [msgs, setMsgs] = useState([]);
   const [cmdKey, setCmdKey] = useState(false);
   const editableRef = useRef(null);

src/routes/chat/LoadMore.tsx

@@ -9,7 +9,6 @@ const Styled = styled.div`
   align-items: center;
   width: 100%;
   padding: 30px 0;
-  /* background-color: #eee; */
 `;
 export default function LoadMore({ pullUp = null }) {
   const ref = useRef(undefined);

src/routes/chat/index.team.tsx

@@ -1,7 +1,6 @@
 // import React from 'react';
-import { useState } from "react";
+import { useState, MouseEvent } from "react";
 import { useParams } from "react-router-dom";
-import { useSelector } from "react-redux";
 
 import { AiOutlineCaretDown } from "react-icons/ai";
 
@@ -18,30 +17,30 @@ import ChannelList from "./ChannelList";
 import UsersModal from "../../common/component/UsersModal";
 import ChannelModal from "../../common/component/ChannelModal";
 import DMList from "./DMList";
+import { useAppSelector } from "../../app/store";
 
 export default function ChatPage() {
   const [channelDropFiles, setChannelDropFiles] = useState([]);
   const [userDropFiles, setUserDropFiles] = useState([]);
-  const { sessionUids } = useSelector((store) => {
+  const { sessionUids } = useAppSelector((store) => {
     return {
       sessionUids: store.userMessage.ids
     };
   });
   const [channelModalVisible, setChannelModalVisible] = useState(false);
   const [usersModalVisible, setUsersModalVisible] = useState(false);
-  const { channel_id, user_id } = useParams();
+  const { channel_id, user_id = 0 } = useParams();
   const toggleUsersModalVisible = () => {
     setUsersModalVisible((prev) => !prev);
   };
   const toggleChannelModalVisible = () => {
     setChannelModalVisible((prev) => !prev);
   };
-  const handleToggleExpand = (evt) => {
+  const handleToggleExpand = (evt: MouseEvent<HTMLElement>) => {
     const { currentTarget } = evt;
-    const listEle = currentTarget.parentElement.parentElement;
-    listEle.classList.toggle("collapse");
+    currentTarget.classList.toggle("collapse");
   };
-  const tmpUid = sessionUids.findIndex((i) => i == user_id) > -1 ? null : user_id;
+  const tmpUid = sessionUids.findIndex((i) => i == +user_id) > -1 ? null : user_id;
   // console.log("temp uid", tmpUid);
   const placeholderVisible = !channel_id && !user_id;
   return (

src/routes/home/Menu.tsx

@@ -42,22 +42,7 @@ const Menu: FC<Props> = () => {
             <img src={settingIcon} alt="setting icon" className="icon" />
           </Tooltip>
         </NavLink>
-        {/* {expand && (
-          <span className="txt animate__animated animate__fadeIn">
-            Settings
-          </span>
-        )} */}
       </li>
-      {/* <li className="menu" onClick={toggle}>
-        <img
-          src={expand ? foldIcon : unfoldIcon}
-          alt="expand icon"
-          className="icon"
-        />
-        {expand && (
-          <span className="txt animate__animated animate__fadeIn">Expand</span>
-        )}
-      </li> */}
     </StyledMenus>
   );
 };

src/routes/resources/Filter/Date.tsx

@@ -58,11 +58,6 @@ export const Dates = {
 };
 
 export default function Date({ select = "", updateFilter }) {
-  // const { input, updateInput, users } = useFilteredUsers();
-  // const users=useSelector(store=>store.users);
-
-  // const uid=users.ids;
-  // const dataMap=users.byId;
   const handleClick = (dur) => {
     updateFilter({ date: dur });
   };

src/routes/resources/Filter/From.tsx

@@ -50,10 +50,6 @@ const Styled = styled.div`
 
 export default function From({ select = "", updateFilter }) {
   const { input, updateInput, users } = useFilteredUsers();
-  // const users=useSelector(store=>store.users);
-
-  // const uid=users.ids;
-  // const dataMap=users.byId;
   const handleClick = (uid) => {
     updateFilter({ from: uid });
   };

src/routes/resources/Filter/Type.tsx

@@ -78,11 +78,6 @@ export const FileTypes = {
   }
 };
 export default function Type({ select = "", updateFilter }) {
-  // const { input, updateInput, users } = useFilteredUsers();
-  // const users=useSelector(store=>store.users);
-
-  // const uid=users.ids;
-  // const dataMap=users.byId;
   const handleClick = (type) => {
     updateFilter({ type });
   };