From b79abcfa9f2526cb3bcd80cc27a61b0966e82211 Mon Sep 17 00:00:00 2001 From: Tristan Yang Date: Thu, 21 Jul 2022 18:37:13 +0800 Subject: [PATCH] refactor: useSelector -> useAppSelector --- src/app/slices/favorites.ts | 1 - src/common/component/Message/Reaction.tsx | 3 +-- src/common/component/MixedInput/index.tsx | 4 ++-- src/routes/chat/LoadMore.tsx | 1 - src/routes/chat/index.team.tsx | 15 +++++++-------- src/routes/home/Menu.tsx | 15 --------------- src/routes/resources/Filter/Date.tsx | 5 ----- src/routes/resources/Filter/From.tsx | 4 ---- src/routes/resources/Filter/Type.tsx | 5 ----- 9 files changed, 10 insertions(+), 43 deletions(-) diff --git a/src/app/slices/favorites.ts b/src/app/slices/favorites.ts index 796458ee..eb9f2d10 100644 --- a/src/app/slices/favorites.ts +++ b/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[]; diff --git a/src/common/component/Message/Reaction.tsx b/src/common/component/Message/Reaction.tsx index 841ce11d..44703995 100644 --- a/src/common/component/Message/Reaction.tsx +++ b/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; }); diff --git a/src/common/component/MixedInput/index.tsx b/src/common/component/MixedInput/index.tsx index be52a348..06297473 100644 --- a/src/common/component/MixedInput/index.tsx +++ b/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); diff --git a/src/routes/chat/LoadMore.tsx b/src/routes/chat/LoadMore.tsx index f297fbe7..b2d30009 100644 --- a/src/routes/chat/LoadMore.tsx +++ b/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); diff --git a/src/routes/chat/index.team.tsx b/src/routes/chat/index.team.tsx index 53b97bd9..3b8bc341 100644 --- a/src/routes/chat/index.team.tsx +++ b/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) => { 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 ( diff --git a/src/routes/home/Menu.tsx b/src/routes/home/Menu.tsx index d4bf5513..7ab9dc78 100644 --- a/src/routes/home/Menu.tsx +++ b/src/routes/home/Menu.tsx @@ -42,22 +42,7 @@ const Menu: FC = () => { setting icon - {/* {expand && ( - - Settings - - )} */} - {/*
  • - expand icon - {expand && ( - Expand - )} -
    • */} ); }; diff --git a/src/routes/resources/Filter/Date.tsx b/src/routes/resources/Filter/Date.tsx index 11e86e4c..143bb54c 100644 --- a/src/routes/resources/Filter/Date.tsx +++ b/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 }); }; diff --git a/src/routes/resources/Filter/From.tsx b/src/routes/resources/Filter/From.tsx index 4c3ab876..877c1450 100644 --- a/src/routes/resources/Filter/From.tsx +++ b/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 }); }; diff --git a/src/routes/resources/Filter/Type.tsx b/src/routes/resources/Filter/Type.tsx index 9805264e..b0aaa0a1 100644 --- a/src/routes/resources/Filter/Type.tsx +++ b/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 }); };