chore: rename again

This commit is contained in:
Tristan Yang
2022-07-04 16:55:13 +08:00
parent 227ae51af3
commit 8330e45674
27 changed files with 141 additions and 94 deletions
+2 -2
View File
@@ -6,7 +6,7 @@ import { fullfillMessage } from "../slices/message";
import { fullfillChannelMsg } from "../slices/message.channel";
import { fullfillUserMsg } from "../slices/message.user";
import { fullfillChannels } from "../slices/channels";
import { fullfillContacts } from "../slices/users";
import { fullfillUsers } from "../slices/users";
import { fullfillFootprint } from "../slices/footprint";
import { fullfillFileMessage } from "../slices/message.file";
import { fullfillUI } from "../slices/ui";
@@ -75,7 +75,7 @@ const useRehydrate = () => {
})
);
batch(() => {
dispatch(fullfillContacts(rehydrateData.users));
dispatch(fullfillUsers(rehydrateData.users));
dispatch(fullfillServer(rehydrateData.server));
console.log("fullfill channels from indexedDB");
dispatch(fullfillChannels(rehydrateData.channels));
+3 -3
View File
@@ -7,7 +7,7 @@ export default async function handler({ operation, data, payload }) {
return;
}
switch (operation) {
case "fullfillContacts":
case "fullfillUsers":
{
const users = payload;
await Promise.all(
@@ -38,13 +38,13 @@ export default async function handler({ operation, data, payload }) {
);
}
break;
case "addContact":
case "addUser":
{
const { uid } = payload;
await table.setItem(uid + "", payload);
}
break;
case "removeContact":
case "removeUser":
{
const id = payload;
await table.removeItem(id + "");
+10 -10
View File
@@ -4,7 +4,7 @@ import { KEY_UID } from "../config";
import baseQuery from "./base.query";
import { resetAuthData } from "../slices/auth.data";
import { updateMute } from "../slices/footprint";
import { fullfillContacts } from "../slices/users";
import { fullfillUsers } from "../slices/users";
import BASE_URL, { ContentTypes } from "../config";
import { onMessageSendStarted } from "./handlers";
import handleChatMessage from "../../common/hook/useStreaming/chat.handler";
@@ -14,7 +14,7 @@ export const userApi = createApi({
reducerPath: "userApi",
baseQuery,
endpoints: (builder) => ({
getContacts: builder.query({
getUsers: builder.query({
query: () => ({ url: `user` }),
transformResponse: (data: User[]) => {
return data.map((user) => {
@@ -38,20 +38,20 @@ export const userApi = createApi({
console.log("no matched user, redirect to login");
dispatch(resetAuthData());
} else {
const markedContacts = users.map((u) => {
const markedUsers = users.map((u) => {
return u.uid == matchedUser.uid ? { ...u, online: true } : u;
});
dispatch(fullfillContacts(markedContacts));
dispatch(fullfillUsers(markedUsers));
}
} catch {
console.log("get user list error");
}
}
}),
deleteContact: builder.query({
deleteUser: builder.query({
query: (uid) => ({ url: `/admin/user/${uid}`, method: "DELETE" })
}),
updateContact: builder.mutation({
updateUser: builder.mutation({
query: ({ id, ...rest }) => ({
url: `/admin/user/${id}`,
body: rest,
@@ -127,12 +127,12 @@ export const userApi = createApi({
export const {
useLazyGetHistoryMessagesQuery,
useUpdateContactMutation,
useUpdateUserMutation,
useUpdateMuteSettingMutation,
useLazyDeleteContactQuery,
useLazyDeleteUserQuery,
useUpdateInfoMutation,
useUpdateAvatarMutation,
useGetContactsQuery,
useLazyGetContactsQuery,
useGetUsersQuery,
useLazyGetUsersQuery,
useSendMsgMutation
} = userApi;
+4 -4
View File
@@ -23,10 +23,10 @@ const usersSlice = createSlice({
name: "users",
initialState,
reducers: {
resetContacts() {
resetUsers() {
return initialState;
},
fullfillContacts(state, action: PayloadAction<StoredUser[]>) {
fullfillUsers(state, action: PayloadAction<StoredUser[]>) {
const users = action.payload || [];
state.ids = users.map(({ uid }) => uid);
state.byId = Object.fromEntries(
@@ -36,7 +36,7 @@ const usersSlice = createSlice({
})
);
},
removeContact(state, action: PayloadAction<number>) {
removeUser(state, action: PayloadAction<number>) {
const uid = action.payload;
state.ids = state.ids.filter((i) => i != uid);
delete state.byId[uid];
@@ -99,6 +99,6 @@ const usersSlice = createSlice({
}
});
export const { resetContacts, fullfillContacts, updateUsersByLogs, updateUsersStatus } =
export const { resetUsers, fullfillUsers, updateUsersByLogs, updateUsersStatus } =
usersSlice.actions;
export default usersSlice.reducer;
+6 -6
View File
@@ -6,7 +6,7 @@ import IconInvite from "../../assets/icons/add.person.svg";
import IconMention from "../../assets/icons/mention.svg";
import ChannelIcon from "./ChannelIcon";
import ChannelModal from "./ChannelModal";
import ContactsModal from "./UsersModal";
import UsersModal from "./UsersModal";
import InviteModal from "./InviteModal";
const Styled = styled.ul`
@@ -47,7 +47,7 @@ export default function AddEntriesMenu() {
const [inviteModalVisible, setInviteModalVisible] = useState(false);
const [channelModalVisible, setChannelModalVisible] = useState(false);
const [usersModalVisible, setContactsModalVisible] = useState(false);
const [usersModalVisible, setUsersModalVisible] = useState(false);
const toggleInviteModalVisible = () => {
setInviteModalVisible((prev) => {
if (!prev) {
@@ -56,8 +56,8 @@ export default function AddEntriesMenu() {
return !prev;
});
};
const toggleContactsModalVisible = () => {
setContactsModalVisible((prevVisible) => {
const toggleUsersModalVisible = () => {
setUsersModalVisible((prevVisible) => {
if (!prevVisible) {
hideAll();
}
@@ -86,7 +86,7 @@ export default function AddEntriesMenu() {
<ChannelIcon personal={true} className="icon" />
New Private Channel
</li>
<li className="item" onClick={toggleContactsModalVisible}>
<li className="item" onClick={toggleUsersModalVisible}>
<IconMention className="icon" />
New Message
</li>
@@ -96,7 +96,7 @@ export default function AddEntriesMenu() {
</li>
</Styled>
{channelModalVisible && <ChannelModal personal={isPrivate} closeModal={handleCloseModal} />}
{usersModalVisible && <ContactsModal closeModal={toggleContactsModalVisible} />}
{usersModalVisible && <UsersModal closeModal={toggleUsersModalVisible} />}
{inviteModalVisible && <InviteModal closeModal={toggleInviteModalVisible} />}
</>
);
+6 -6
View File
@@ -7,7 +7,7 @@ import IconChat from "../../assets/icons/placeholder.chat.svg";
import IconAsk from "../../assets/icons/placeholder.question.svg";
import IconInvite from "../../assets/icons/placeholder.invite.svg";
import IconDownload from "../../assets/icons/placeholder.download.svg";
import ContactsModal from "./UsersModal";
import UsersModal from "./UsersModal";
import { useAppSelector } from "../../app/store";
const Styled = styled.div`
@@ -75,19 +75,19 @@ const BlankPlaceholder: FC<Props> = ({ type = "chat" }) => {
const server = useAppSelector((store) => store.server);
const [inviteModalVisible, setInviteModalVisible] = useState(false);
const [createChannelVisible, setCreateChannelVisible] = useState(false);
const [userListVisible, setContactListVisible] = useState(false);
const [userListVisible, setUserListVisible] = useState(false);
const toggleChannelModalVisible = () => {
setCreateChannelVisible((prev) => !prev);
};
const toggleContactListVisible = () => {
setContactListVisible((prev) => !prev);
const toggleUserListVisible = () => {
setUserListVisible((prev) => !prev);
};
const toggleInviteModalVisible = () => {
setInviteModalVisible((prev) => !prev);
};
const chatTip =
type == "chat" ? "Create a Channel to Start a Conversation" : "Send a Direct Message";
const chatHandler = type == "chat" ? toggleChannelModalVisible : toggleContactListVisible;
const chatHandler = type == "chat" ? toggleChannelModalVisible : toggleUserListVisible;
return (
<>
@@ -121,7 +121,7 @@ const BlankPlaceholder: FC<Props> = ({ type = "chat" }) => {
{createChannelVisible && (
<ChannelModal personal={true} closeModal={toggleChannelModalVisible} />
)}
{userListVisible && <ContactsModal closeModal={toggleContactListVisible} />}
{userListVisible && <UsersModal closeModal={toggleUserListVisible} />}
{inviteModalVisible && <InviteModal closeModal={toggleInviteModalVisible} />}
</>
);
+5 -5
View File
@@ -3,7 +3,7 @@ import styled from "styled-components";
import Tippy from "@tippyjs/react";
import { hideAll } from "tippy.js";
import toast from "react-hot-toast";
import { useUpdateContactMutation } from "../../app/services/user";
import { useUpdateUserMutation } from "../../app/services/user";
import User from "./User";
import StyledMenu from "./styled/Menu";
import InviteLink from "./InviteLink";
@@ -11,7 +11,7 @@ import moreIcon from "../../assets/icons/more.svg?url";
import IconOwner from "../../assets/icons/owner.svg";
import IconArrowDown from "../../assets/icons/arrow.down.mini.svg";
import IconCheck from "../../assets/icons/check.sign.svg";
import useContactOperation from "../hook/useContactOperation";
import useUserOperation from "../hook/useUserOperation";
import { useAppSelector } from "../../app/store";
const StyledWrapper = styled.section`
@@ -126,8 +126,8 @@ const ManageMembers: FC<Props> = ({ cid }) => {
loginUser: store.authData.user
};
});
const { copyEmail, removeFromChannel, removeUser } = useContactOperation({ cid });
const [updateContact, { isSuccess: updateSuccess }] = useUpdateContactMutation();
const { copyEmail, removeFromChannel, removeUser } = useUserOperation({ cid });
const [updateUser, { isSuccess: updateSuccess }] = useUpdateUserMutation();
useEffect(() => {
if (updateSuccess) {
@@ -138,7 +138,7 @@ const ManageMembers: FC<Props> = ({ cid }) => {
const handleToggleRole = ({ ignore = false, uid = null, isAdmin = true }) => {
hideAll();
if (ignore) return;
updateContact({ id: uid, is_admin: isAdmin });
updateUser({ id: uid, is_admin: isAdmin });
};
const channel = channels.byId[cid] ?? null;
const uids = channel ? (channel.is_public ? users.ids : channel.members) : users.ids;
+1 -14
View File
@@ -1,19 +1,16 @@
import { createGlobalStyle } from 'styled-components';
import { createGlobalStyle } from "styled-components";
const MarkdownOverrides = createGlobalStyle`
[class^='toastui-editor-'] {
.toastui-editor-md-container {
border-bottom: none;
.toastui-editor-md-preview {
padding-right: 0;
padding-left: 8px;
}
.toastui-editor-md-splitter {
background-color: #D0D5DD;
}
.ProseMirror {
height: 100%;
}
@@ -23,7 +20,6 @@ const MarkdownOverrides = createGlobalStyle`
margin: 0;
padding: 0;
}
.ProseMirror, p, .toastui-editor.md-mode {
font-weight: 400;
font-size: 14px;
@@ -77,27 +73,18 @@ const MarkdownOverrides = createGlobalStyle`
white-space: nowrap;
margin-top: 0;
margin-bottom: 10px;
/* display: flex;
flex-direction:column;
margin-left: 20px; */
> li:before {
margin-top: 8px;
margin-left: -14px;
background-color: #475467;
}
/* list-style-type: disc; */
}
ul,
ol {
font-weight: 400;
font-size: 14px;
line-height: 20px;
color: #475467;
/* list-style-position: inside; */
}
h1,
-1
View File
@@ -10,7 +10,6 @@ const Styled = styled.span`
strong {
white-space: nowrap;
font-weight: bold;
/* padding-right: 5px; */
}
.btns {
gap: 5px;
+2 -2
View File
@@ -7,7 +7,7 @@ import IconMore from "../../../assets/icons/more.svg";
import Avatar from "../Avatar";
import StyledWrapper from "./styled";
import StyledMenu from "../styled/Menu";
import useContactOperation from "../../hook/useContactOperation";
import useUserOperation from "../../hook/useUserOperation";
import { useAppSelector } from "../../../app/store";
interface Props {
@@ -26,7 +26,7 @@ const Profile: FC<Props> = ({ uid, type = "embed", cid }) => {
canRemoveFromChannel,
canRemove,
removeUser
} = useContactOperation({ uid, cid });
} = useUserOperation({ uid, cid });
const { data } = useAppSelector((store) => {
return {
+4 -4
View File
@@ -1,6 +1,6 @@
import { FC, ReactElement } from "react";
import Tippy from "@tippyjs/react";
import useContactOperation from "../../hook/useContactOperation";
import useUserOperation from "../../hook/useUserOperation";
import ContextMenu from "../ContextMenu";
interface Props {
@@ -12,7 +12,7 @@ interface Props {
children: ReactElement;
}
const ContactContextMenu: FC<Props> = ({ enable = false, uid, cid, visible, hide, children }) => {
const UserContextMenu: FC<Props> = ({ enable = false, uid, cid, visible, hide, children }) => {
const {
canCall,
call,
@@ -23,7 +23,7 @@ const ContactContextMenu: FC<Props> = ({ enable = false, uid, cid, visible, hide
canRemoveFromChannel,
removeFromChannel,
removeUser
} = useContactOperation({
} = useUserOperation({
uid,
cid
});
@@ -72,4 +72,4 @@ const ContactContextMenu: FC<Props> = ({ enable = false, uid, cid, visible, hide
);
};
export default ContactContextMenu;
export default UserContextMenu;
+2 -2
View File
@@ -55,7 +55,7 @@ interface Props {
closeModal: () => void;
}
const ContactsModal: FC<Props> = ({ closeModal }) => {
const UsersModal: FC<Props> = ({ closeModal }) => {
const wrapperRef = useRef<HTMLDivElement>(null);
const { users, updateInput, input } = useFilteredUsers();
useOutsideClick(wrapperRef, closeModal);
@@ -89,4 +89,4 @@ const ContactsModal: FC<Props> = ({ closeModal }) => {
);
};
export default ContactsModal;
export default UsersModal;
+2 -2
View File
@@ -1,7 +1,7 @@
import { useDispatch, batch } from "react-redux";
import { resetFootprint } from "../../app/slices/footprint";
import { resetChannels } from "../../app/slices/channels";
import { resetContacts } from "../../app/slices/users";
import { resetUsers } from "../../app/slices/users";
import { resetChannelMsg } from "../../app/slices/message.channel";
import { resetUserMsg } from "../../app/slices/message.user";
import { resetReactionMessage } from "../../app/slices/message.reaction";
@@ -21,7 +21,7 @@ export default function useLogout() {
dispatch(resetChannelMsg());
dispatch(resetUserMsg());
dispatch(resetChannels());
dispatch(resetContacts());
dispatch(resetUsers());
dispatch(resetMessage());
dispatch(resetReactionMessage());
dispatch(resetFileMessage());
@@ -4,7 +4,7 @@ import toast from "react-hot-toast";
import { useNavigate, useMatch } from "react-router-dom";
import { hideAll } from "tippy.js";
import { useRemoveMembersMutation } from "../../app/services/channel";
import { useLazyDeleteContactQuery } from "../../app/services/user";
import { useLazyDeleteUserQuery } from "../../app/services/user";
import useConfig from "./useConfig";
import useCopy from "./useCopy";
import { useAppSelector } from "../../app/store";
@@ -12,11 +12,11 @@ interface Props {
uid?: number;
cid?: number;
}
const useContactOperation: FC<Props> = ({ uid, cid }) => {
const useUserOperation: FC<Props> = ({ uid, cid }) => {
const [passedUid, setPassedUid] = useState(undefined);
const { values: agoraConfig } = useConfig("agora");
const isUserDetailPath = useMatch(`/users/${uid}`);
const [removeUser, { isSuccess: removeUserSuccess }] = useLazyDeleteContactQuery();
const [removeUser, { isSuccess: removeUserSuccess }] = useLazyDeleteUserQuery();
const [removeInChannel, { isSuccess: removeSuccess }] = useRemoveMembersMutation();
const navigateTo = useNavigate();
const { copy } = useCopy();
@@ -89,4 +89,4 @@ const useContactOperation: FC<Props> = ({ uid, cid }) => {
call
};
};
export default useContactOperation;
export default useUserOperation;
+3 -3
View File
@@ -25,7 +25,7 @@ import IconHeadphone from "../../../assets/icons/headphone.svg";
import addIcon from "../../../assets/icons/add.svg?url";
import {
// StyledNotification,
StyledContacts,
StyledUsers,
StyledChannelChat,
StyledHeader
} from "./styled";
@@ -186,7 +186,7 @@ export default function ChannelChat({ cid = "", dropFiles = [] }) {
users={
membersVisible ? (
<>
<StyledContacts>
<StyledUsers>
{addVisible && (
<div className="add" onClick={toggleAddVisible}>
<img className="icon" src={addIcon} />
@@ -206,7 +206,7 @@ export default function ChannelChat({ cid = "", dropFiles = [] }) {
/>
);
})}
</StyledContacts>
</StyledUsers>
</>
) : null
}
+1 -1
View File
@@ -47,7 +47,7 @@ export const StyledNotification = styled.div`
outline: none;
}
`;
export const StyledContacts = styled.div`
export const StyledUsers = styled.div`
display: flex;
flex-direction: column;
gap: 5px;
+2 -2
View File
@@ -5,7 +5,7 @@ import { useUpdateMuteSettingMutation } from "../../../app/services/user";
import { useReadMessageMutation } from "../../../app/services/message";
import { removeUserSession } from "../../../app/slices/message.user";
import ContextMenu from "../../../common/component/ContextMenu";
import useContactOperation from "../../../common/hook/useContactOperation";
import useUserOperation from "../../../common/hook/useUserOperation";
export default function SessionContextMenu({
context = "user",
@@ -17,7 +17,7 @@ export default function SessionContextMenu({
setInviteChannelId,
children
}) {
const { canCopyEmail, copyEmail } = useContactOperation({ uid: context == "user" ? id : null });
const { canCopyEmail, copyEmail } = useUserOperation({ uid: context == "user" ? id : null });
const [muteChannel] = useUpdateMuteSettingMutation();
const [updateReadIndex] = useReadMessageMutation();
const pathMatched = useMatch(`/chat/dm/${id}`);
+6 -6
View File
@@ -15,7 +15,7 @@ import Tooltip from "../../common/component/Tooltip";
import ChannelChat from "./ChannelChat";
import DMChat from "./DMChat";
import ChannelList from "./ChannelList";
import ContactsModal from "../../common/component/UsersModal";
import UsersModal from "../../common/component/UsersModal";
import ChannelModal from "../../common/component/ChannelModal";
import DMList from "./DMList";
@@ -28,10 +28,10 @@ export default function ChatPage() {
};
});
const [channelModalVisible, setChannelModalVisible] = useState(false);
const [usersModalVisible, setContactsModalVisible] = useState(false);
const [usersModalVisible, setUsersModalVisible] = useState(false);
const { channel_id, user_id } = useParams();
const toggleContactsModalVisible = () => {
setContactsModalVisible((prev) => !prev);
const toggleUsersModalVisible = () => {
setUsersModalVisible((prev) => !prev);
};
const toggleChannelModalVisible = () => {
setChannelModalVisible((prev) => !prev);
@@ -49,7 +49,7 @@ export default function ChatPage() {
{channelModalVisible && (
<ChannelModal closeModal={toggleChannelModalVisible} personal={true} />
)}
{usersModalVisible && <ContactsModal closeModal={toggleContactsModalVisible} />}
{usersModalVisible && <UsersModal closeModal={toggleUsersModalVisible} />}
<StyledWrapper>
<div className="left">
<Server />
@@ -74,7 +74,7 @@ export default function ChatPage() {
DIRECT MESSAGE
</span>
<Tooltip tip="New DM" placement="bottom">
<AddIcon className="add_icon" onClick={toggleContactsModalVisible} />
<AddIcon className="add_icon" onClick={toggleUsersModalVisible} />
</Tooltip>
</h3>
<nav className="nav">
+5 -5
View File
@@ -9,20 +9,20 @@ import Server from "../../common/component/Server";
import CurrentUser from "../../common/component/CurrentUser";
import ChannelChat from "./ChannelChat";
import DMChat from "./DMChat";
import ContactsModal from "../../common/component/UsersModal";
import UsersModal from "../../common/component/UsersModal";
import ChannelModal from "../../common/component/ChannelModal";
import SessionList from "./SessionList";
export default function ChatPage() {
const [channelModalVisible, setChannelModalVisible] = useState(false);
const [usersModalVisible, setContactsModalVisible] = useState(false);
const [usersModalVisible, setUsersModalVisible] = useState(false);
const { channel_id, user_id } = useParams();
const { sessionUids } = useSelector((store) => {
return {
sessionUids: store.userMessage.ids
};
});
const toggleContactsModalVisible = () => {
setContactsModalVisible((prev) => !prev);
const toggleUsersModalVisible = () => {
setUsersModalVisible((prev) => !prev);
};
const toggleChannelModalVisible = () => {
setChannelModalVisible((prev) => !prev);
@@ -38,7 +38,7 @@ export default function ChatPage() {
{channelModalVisible && (
<ChannelModal closeModal={toggleChannelModalVisible} personal={true} />
)}
{usersModalVisible && <ContactsModal closeModal={toggleContactsModalVisible} />}
{usersModalVisible && <UsersModal closeModal={toggleUsersModalVisible} />}
<StyledWrapper>
<div className="left">
<Server />
+2 -2
View File
@@ -13,7 +13,7 @@ import Notification from "../../common/component/Notification";
import Manifest from "../../common/component/Manifest";
import ChatIcon from "../../assets/icons/chat.svg";
import ContactIcon from "../../assets/icons/user.svg";
import UserIcon from "../../assets/icons/user.svg";
import FavIcon from "../../assets/icons/bookmark.svg";
import FolderIcon from "../../assets/icons/folder.svg";
import { useAppSelector } from "../../app/store";
@@ -74,7 +74,7 @@ export default function HomePage() {
</NavLink>
<NavLink className="link" to={userNav}>
<Tooltip tip="Members">
<ContactIcon />
<UserIcon />
</Tooltip>
</NavLink>
<NavLink className="link" to={"/favs"}>
+4 -4
View File
@@ -1,7 +1,7 @@
import { useEffect } from "react";
import initCache, { useRehydrate } from "../../app/cache";
import { useLazyGetFavoritesQuery } from "../../app/services/message";
import { useLazyGetContactsQuery } from "../../app/services/user";
import { useLazyGetUsersQuery } from "../../app/services/user";
import { useLazyGetServerQuery } from "../../app/services/server";
import useStreaming from "../../common/hook/useStreaming";
import { useAppSelector } from "../../app/store";
@@ -26,9 +26,9 @@ export default function usePreload() {
}
] = useLazyGetFavoritesQuery();
const [
getContacts,
getUsers,
{ isLoading: usersLoading, isSuccess: usersSuccess, isError: usersError, data: users }
] = useLazyGetContactsQuery();
] = useLazyGetUsersQuery();
const [
getServer,
{ isLoading: serverLoading, isSuccess: serverSuccess, isError: serverError, data: server }
@@ -43,7 +43,7 @@ export default function usePreload() {
useEffect(() => {
if (rehydrated) {
getContacts();
getUsers();
getServer();
getFavorites();
}
+3 -3
View File
@@ -12,7 +12,7 @@ const SendMagicLinkPage = lazy(() => import("./sendMagicLink"));
const RegPage = lazy(() => import("./reg/Register"));
const LoginPage = lazy(() => import("./login"));
const OAuthPage = lazy(() => import("./oauth"));
const ContactsPage = lazy(() => import("./users"));
const UsersPage = lazy(() => import("./users"));
const FavoritesPage = lazy(() => import("./favs"));
const OnboardingPage = lazy(() => import("./onboarding"));
const InvitePage = lazy(() => import("./invite"));
@@ -143,7 +143,7 @@ const PageRoutes = () => {
index
element={
<Suspense fallback={<Loading />}>
<ContactsPage />
<UsersPage />
</Suspense>
}
/>
@@ -151,7 +151,7 @@ const PageRoutes = () => {
path=":user_id"
element={
<Suspense fallback={<Loading />}>
<ContactsPage />
<UsersPage />
</Suspense>
}
/>
+1 -1
View File
@@ -9,7 +9,7 @@ import Profile from "../../common/component/Profile";
import StyledWrapper from "./styled";
import BlankPlaceholder from "../../common/component/BlankPlaceholder";
export default function ContactsPage() {
export default function UsersPage() {
const dispatch = useDispatch();
const { pathname } = useLocation();