refactor: useSelector -> useAppSelector

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 });
   };