chore: rename again

.vscode/settings.json

@@ -26,5 +26,5 @@
   "[javascript]": {
     "editor.defaultFormatter": "esbenp.prettier-vscode"
   },
-  "cSpell.words": ["btns", "oidc", "vocechat"]
+  "cSpell.words": ["btns", "oidc", "tippyjs", "vocechat"]
 }

package.json

@@ -118,6 +118,7 @@
   },
   "devDependencies": {
     "@babel/core": "^7.18.6",
+    "@babel/plugin-proposal-private-property-in-object": "^7.18.6",
     "@commitlint/cli": "^17.0.3",
     "@commitlint/config-conventional": "^17.0.3",
     "@types/emoji-mart": "^3.0.9",

src/app/cache/useRehydrate.ts

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

src/app/listener.middleware/handler.users.ts

@@ -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 + "");

src/app/services/user.ts

@@ -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,
+  useGetUsersQuery,
-  useLazyGetContactsQuery,
+  useLazyGetUsersQuery,
   useSendMsgMutation
 } = userApi;

src/app/slices/users.ts

@@ -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;

src/common/component/AddEntriesMenu.tsx

@@ -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 = () => {
+  const toggleUsersModalVisible = () => {
-    setContactsModalVisible((prevVisible) => {
+    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} />}
     </>
   );

src/common/component/BlankPlaceholder.tsx

@@ -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 = () => {
+  const toggleUserListVisible = () => {
-    setContactListVisible((prev) => !prev);
+    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} />}
     </>
   );

src/common/component/ManageMembers.tsx

@@ -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 { copyEmail, removeFromChannel, removeUser } = useUserOperation({ cid });
-  const [updateContact, { isSuccess: updateSuccess }] = useUpdateContactMutation();
+  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;

src/common/component/MarkdownStyleOverride.tsx

@@ -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,

src/common/component/NewVersion.tsx

@@ -10,7 +10,6 @@ const Styled = styled.span`
   strong {
     white-space: nowrap;
     font-weight: bold;
-    /* padding-right: 5px; */
   }
   .btns {
     gap: 5px;

src/common/component/Profile/index.tsx

@@ -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 {

src/common/component/User/ContextMenu.tsx

@@ -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;

src/common/component/UsersModal.tsx

@@ -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;

src/common/hook/useLogout.ts

@@ -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());

src/common/hook/useUserOperation.ts

@@ -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;

src/routes/chat/ChannelChat/index.tsx

@@ -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
         }

src/routes/chat/ChannelChat/styled.tsx

@@ -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;

src/routes/chat/SessionList/ContextMenu.tsx

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

src/routes/chat/index.team.tsx

@@ -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 = () => {
+  const toggleUsersModalVisible = () => {
-    setContactsModalVisible((prev) => !prev);
+    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">

src/routes/chat/index.tsx

@@ -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 = () => {
+  const toggleUsersModalVisible = () => {
-    setContactsModalVisible((prev) => !prev);
+    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 />

src/routes/home/index.tsx

@@ -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"}>

src/routes/home/usePreload.ts

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

src/routes/index.tsx

@@ -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>
                 }
               />

src/routes/users/index.tsx

@@ -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();
 

tsconfig.json

@@ -1,6 +1,6 @@
 {
   "compilerOptions": {
-    "target": "es5",
+    "target": "es6",
     "lib": ["dom", "dom.iterable", "esnext"],
     "allowJs": true,
     "skipLibCheck": true,

yarn.lock

@@ -149,6 +149,13 @@
   dependencies:
     "@babel/types" "^7.16.7"
 
+"@babel/helper-annotate-as-pure@^7.18.6":
+  version "7.18.6"
+  resolved "https://mirrors.tencent.com/npm/@babel%2fhelper-annotate-as-pure/-/helper-annotate-as-pure-7.18.6.tgz#eaa49f6f80d5a33f9a5dd2276e6d6e451be0a6bb"
+  integrity sha512-duORpUiYrEpzKIop6iNbjnwKLAKnJ47csTyRACyEmWj0QdUrm5aqNJGHSSEQSUAvNW0ojX0dOmK9dZduvkfeXA==
+  dependencies:
+    "@babel/types" "^7.18.6"
+
 "@babel/helper-builder-binary-assignment-operator-visitor@^7.16.7":
   version "7.16.7"
   resolved "https://mirrors.tencent.com/npm/@babel%2fhelper-builder-binary-assignment-operator-visitor/-/helper-builder-binary-assignment-operator-visitor-7.16.7.tgz#38d138561ea207f0f69eb1626a418e4f7e6a580b"
@@ -200,6 +207,19 @@
     "@babel/helper-replace-supers" "^7.16.7"
     "@babel/helper-split-export-declaration" "^7.16.7"
 
+"@babel/helper-create-class-features-plugin@^7.18.6":
+  version "7.18.6"
+  resolved "https://mirrors.tencent.com/npm/@babel%2fhelper-create-class-features-plugin/-/helper-create-class-features-plugin-7.18.6.tgz#6f15f8459f3b523b39e00a99982e2c040871ed72"
+  integrity sha512-YfDzdnoxHGV8CzqHGyCbFvXg5QESPFkXlHtvdCkesLjjVMT2Adxe4FGUR5ChIb3DxSaXO12iIOCWoXdsUVwnqw==
+  dependencies:
+    "@babel/helper-annotate-as-pure" "^7.18.6"
+    "@babel/helper-environment-visitor" "^7.18.6"
+    "@babel/helper-function-name" "^7.18.6"
+    "@babel/helper-member-expression-to-functions" "^7.18.6"
+    "@babel/helper-optimise-call-expression" "^7.18.6"
+    "@babel/helper-replace-supers" "^7.18.6"
+    "@babel/helper-split-export-declaration" "^7.18.6"
+
 "@babel/helper-create-regexp-features-plugin@^7.16.7", "@babel/helper-create-regexp-features-plugin@^7.17.12":
   version "7.17.12"
   resolved "https://mirrors.tencent.com/npm/@babel%2fhelper-create-regexp-features-plugin/-/helper-create-regexp-features-plugin-7.17.12.tgz#bb37ca467f9694bbe55b884ae7a5cc1e0084e4fd"
@@ -283,6 +303,13 @@
   dependencies:
     "@babel/types" "^7.17.0"
 
+"@babel/helper-member-expression-to-functions@^7.18.6":
+  version "7.18.6"
+  resolved "https://mirrors.tencent.com/npm/@babel%2fhelper-member-expression-to-functions/-/helper-member-expression-to-functions-7.18.6.tgz#44802d7d602c285e1692db0bad9396d007be2afc"
+  integrity sha512-CeHxqwwipekotzPDUuJOfIMtcIHBuc7WAzLmTYWctVigqS5RktNMQ5bEwQSuGewzYnCtTWa3BARXeiLxDTv+Ng==
+  dependencies:
+    "@babel/types" "^7.18.6"
+
 "@babel/helper-module-imports@^7.0.0", "@babel/helper-module-imports@^7.10.4", "@babel/helper-module-imports@^7.12.13", "@babel/helper-module-imports@^7.16.0", "@babel/helper-module-imports@^7.16.7":
   version "7.16.7"
   resolved "https://mirrors.tencent.com/npm/@babel%2fhelper-module-imports/-/helper-module-imports-7.16.7.tgz#25612a8091a999704461c8a222d0efec5d091437"
@@ -332,11 +359,23 @@
   dependencies:
     "@babel/types" "^7.16.7"
 
+"@babel/helper-optimise-call-expression@^7.18.6":
+  version "7.18.6"
+  resolved "https://mirrors.tencent.com/npm/@babel%2fhelper-optimise-call-expression/-/helper-optimise-call-expression-7.18.6.tgz#9369aa943ee7da47edab2cb4e838acf09d290ffe"
+  integrity sha512-HP59oD9/fEHQkdcbgFCnbmgH5vIQTJbxh2yf+CdM89/glUNnuzr87Q8GIjGEnOktTROemO0Pe0iPAYbqZuOUiA==
+  dependencies:
+    "@babel/types" "^7.18.6"
+
 "@babel/helper-plugin-utils@^7.0.0", "@babel/helper-plugin-utils@^7.10.4", "@babel/helper-plugin-utils@^7.12.13", "@babel/helper-plugin-utils@^7.13.0", "@babel/helper-plugin-utils@^7.14.5", "@babel/helper-plugin-utils@^7.16.7", "@babel/helper-plugin-utils@^7.17.12", "@babel/helper-plugin-utils@^7.8.0", "@babel/helper-plugin-utils@^7.8.3":
   version "7.17.12"
   resolved "https://mirrors.tencent.com/npm/@babel%2fhelper-plugin-utils/-/helper-plugin-utils-7.17.12.tgz#86c2347da5acbf5583ba0a10aed4c9bf9da9cf96"
   integrity sha512-JDkf04mqtN3y4iAbO1hv9U2ARpPyPL1zqyWs/2WG1pgSq9llHFjStX5jdxb84himgJm+8Ng+x0oiWF/nw/XQKA==
 
+"@babel/helper-plugin-utils@^7.18.6":
+  version "7.18.6"
+  resolved "https://mirrors.tencent.com/npm/@babel%2fhelper-plugin-utils/-/helper-plugin-utils-7.18.6.tgz#9448974dd4fb1d80fefe72e8a0af37809cd30d6d"
+  integrity sha512-gvZnm1YAAxh13eJdkb9EWHBnF3eAub3XTLCZEehHT2kWxiKVRL64+ae5Y6Ivne0mVHmMYKT+xWgZO+gQhuLUBg==
+
 "@babel/helper-remap-async-to-generator@^7.16.8":
   version "7.16.8"
   resolved "https://mirrors.tencent.com/npm/@babel%2fhelper-remap-async-to-generator/-/helper-remap-async-to-generator-7.16.8.tgz#29ffaade68a367e2ed09c90901986918d25e57e3"
@@ -357,6 +396,17 @@
     "@babel/traverse" "^7.16.7"
     "@babel/types" "^7.16.7"
 
+"@babel/helper-replace-supers@^7.18.6":
+  version "7.18.6"
+  resolved "https://mirrors.tencent.com/npm/@babel%2fhelper-replace-supers/-/helper-replace-supers-7.18.6.tgz#efedf51cfccea7b7b8c0f00002ab317e7abfe420"
+  integrity sha512-fTf7zoXnUGl9gF25fXCWE26t7Tvtyn6H4hkLSYhATwJvw2uYxd3aoXplMSe0g9XbwK7bmxNes7+FGO0rB/xC0g==
+  dependencies:
+    "@babel/helper-environment-visitor" "^7.18.6"
+    "@babel/helper-member-expression-to-functions" "^7.18.6"
+    "@babel/helper-optimise-call-expression" "^7.18.6"
+    "@babel/traverse" "^7.18.6"
+    "@babel/types" "^7.18.6"
+
 "@babel/helper-simple-access@^7.17.7":
   version "7.17.7"
   resolved "https://mirrors.tencent.com/npm/@babel%2fhelper-simple-access/-/helper-simple-access-7.17.7.tgz#aaa473de92b7987c6dfa7ce9a7d9674724823367"
@@ -637,6 +687,16 @@
     "@babel/helper-plugin-utils" "^7.17.12"
     "@babel/plugin-syntax-private-property-in-object" "^7.14.5"
 
+"@babel/plugin-proposal-private-property-in-object@^7.18.6":
+  version "7.18.6"
+  resolved "https://mirrors.tencent.com/npm/@babel%2fplugin-proposal-private-property-in-object/-/plugin-proposal-private-property-in-object-7.18.6.tgz#a64137b232f0aca3733a67eb1a144c192389c503"
+  integrity sha512-9Rysx7FOctvT5ouj5JODjAFAkgGoudQuLPamZb0v1TGLpapdNaftzifU8NTWQm0IRjqoYypdrSmyWgkocDQ8Dw==
+  dependencies:
+    "@babel/helper-annotate-as-pure" "^7.18.6"
+    "@babel/helper-create-class-features-plugin" "^7.18.6"
+    "@babel/helper-plugin-utils" "^7.18.6"
+    "@babel/plugin-syntax-private-property-in-object" "^7.14.5"
+
 "@babel/plugin-proposal-unicode-property-regex@^7.17.12", "@babel/plugin-proposal-unicode-property-regex@^7.4.4":
   version "7.17.12"
   resolved "https://mirrors.cloud.tencent.com/npm/@babel%2fplugin-proposal-unicode-property-regex/-/plugin-proposal-unicode-property-regex-7.17.12.tgz#3dbd7a67bd7f94c8238b394da112d86aaf32ad4d"