diff --git a/.vscode/settings.json b/.vscode/settings.json index 86d7ff13..8a37b8d8 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -26,5 +26,5 @@ "[javascript]": { "editor.defaultFormatter": "esbenp.prettier-vscode" }, - "cSpell.words": ["btns", "oidc", "vocechat"] + "cSpell.words": ["btns", "oidc", "tippyjs", "vocechat"] } diff --git a/package.json b/package.json index b1c13d39..ca578d1f 100644 --- a/package.json +++ b/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", diff --git a/src/app/cache/useRehydrate.ts b/src/app/cache/useRehydrate.ts index 9790ec47..c01286b5 100644 --- a/src/app/cache/useRehydrate.ts +++ b/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)); diff --git a/src/app/listener.middleware/handler.users.ts b/src/app/listener.middleware/handler.users.ts index 4894f712..60782bf1 100644 --- a/src/app/listener.middleware/handler.users.ts +++ b/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 + ""); diff --git a/src/app/services/user.ts b/src/app/services/user.ts index b86a0361..5863e2bb 100644 --- a/src/app/services/user.ts +++ b/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, - useLazyGetContactsQuery, + useGetUsersQuery, + useLazyGetUsersQuery, useSendMsgMutation } = userApi; diff --git a/src/app/slices/users.ts b/src/app/slices/users.ts index fd9726a4..8f706dc4 100644 --- a/src/app/slices/users.ts +++ b/src/app/slices/users.ts @@ -23,10 +23,10 @@ const usersSlice = createSlice({ name: "users", initialState, reducers: { - resetContacts() { + resetUsers() { return initialState; }, - fullfillContacts(state, action: PayloadAction) { + fullfillUsers(state, action: PayloadAction) { 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) { + removeUser(state, action: PayloadAction) { 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; diff --git a/src/common/component/AddEntriesMenu.tsx b/src/common/component/AddEntriesMenu.tsx index b656e334..d9832114 100644 --- a/src/common/component/AddEntriesMenu.tsx +++ b/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 = () => { - setContactsModalVisible((prevVisible) => { + const toggleUsersModalVisible = () => { + setUsersModalVisible((prevVisible) => { if (!prevVisible) { hideAll(); } @@ -86,7 +86,7 @@ export default function AddEntriesMenu() { New Private Channel -
  • +
  • New Message
    • @@ -96,7 +96,7 @@ export default function AddEntriesMenu() { {channelModalVisible && } - {usersModalVisible && } + {usersModalVisible && } {inviteModalVisible && } ); diff --git a/src/common/component/BlankPlaceholder.tsx b/src/common/component/BlankPlaceholder.tsx index ad0ff17d..44895124 100644 --- a/src/common/component/BlankPlaceholder.tsx +++ b/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 = ({ 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 = ({ type = "chat" }) => { {createChannelVisible && ( )} - {userListVisible && } + {userListVisible && } {inviteModalVisible && } ); diff --git a/src/common/component/ManageMembers.tsx b/src/common/component/ManageMembers.tsx index 633a03f1..2bf94aac 100644 --- a/src/common/component/ManageMembers.tsx +++ b/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 = ({ 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 = ({ 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; diff --git a/src/common/component/MarkdownStyleOverride.tsx b/src/common/component/MarkdownStyleOverride.tsx index 1d5d4cea..ef398e6a 100644 --- a/src/common/component/MarkdownStyleOverride.tsx +++ b/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, diff --git a/src/common/component/NewVersion.tsx b/src/common/component/NewVersion.tsx index 64fa6ee8..5ce20a29 100644 --- a/src/common/component/NewVersion.tsx +++ b/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; diff --git a/src/common/component/Profile/index.tsx b/src/common/component/Profile/index.tsx index 516d9b81..aec5122c 100644 --- a/src/common/component/Profile/index.tsx +++ b/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 = ({ uid, type = "embed", cid }) => { canRemoveFromChannel, canRemove, removeUser - } = useContactOperation({ uid, cid }); + } = useUserOperation({ uid, cid }); const { data } = useAppSelector((store) => { return { diff --git a/src/common/component/User/ContextMenu.tsx b/src/common/component/User/ContextMenu.tsx index a2e8ff88..6213d8d0 100644 --- a/src/common/component/User/ContextMenu.tsx +++ b/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 = ({ enable = false, uid, cid, visible, hide, children }) => { +const UserContextMenu: FC = ({ enable = false, uid, cid, visible, hide, children }) => { const { canCall, call, @@ -23,7 +23,7 @@ const ContactContextMenu: FC = ({ enable = false, uid, cid, visible, hide canRemoveFromChannel, removeFromChannel, removeUser - } = useContactOperation({ + } = useUserOperation({ uid, cid }); @@ -72,4 +72,4 @@ const ContactContextMenu: FC = ({ enable = false, uid, cid, visible, hide ); }; -export default ContactContextMenu; +export default UserContextMenu; diff --git a/src/common/component/UsersModal.tsx b/src/common/component/UsersModal.tsx index ab0a7c08..c18a4e8f 100644 --- a/src/common/component/UsersModal.tsx +++ b/src/common/component/UsersModal.tsx @@ -55,7 +55,7 @@ interface Props { closeModal: () => void; } -const ContactsModal: FC = ({ closeModal }) => { +const UsersModal: FC = ({ closeModal }) => { const wrapperRef = useRef(null); const { users, updateInput, input } = useFilteredUsers(); useOutsideClick(wrapperRef, closeModal); @@ -89,4 +89,4 @@ const ContactsModal: FC = ({ closeModal }) => { ); }; -export default ContactsModal; +export default UsersModal; diff --git a/src/common/hook/useLogout.ts b/src/common/hook/useLogout.ts index c220e98c..666564f3 100644 --- a/src/common/hook/useLogout.ts +++ b/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()); diff --git a/src/common/hook/useContactOperation.ts b/src/common/hook/useUserOperation.ts similarity index 93% rename from src/common/hook/useContactOperation.ts rename to src/common/hook/useUserOperation.ts index b3e46b10..873abb6f 100644 --- a/src/common/hook/useContactOperation.ts +++ b/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 = ({ uid, cid }) => { +const useUserOperation: FC = ({ 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 = ({ uid, cid }) => { call }; }; -export default useContactOperation; +export default useUserOperation; diff --git a/src/routes/chat/ChannelChat/index.tsx b/src/routes/chat/ChannelChat/index.tsx index 45747dcd..4f61c995 100644 --- a/src/routes/chat/ChannelChat/index.tsx +++ b/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 ? ( <> - + {addVisible && (
    @@ -206,7 +206,7 @@ export default function ChannelChat({ cid = "", dropFiles = [] }) { /> ); })} - + ) : null } diff --git a/src/routes/chat/ChannelChat/styled.tsx b/src/routes/chat/ChannelChat/styled.tsx index a3f8d6db..927d23c9 100644 --- a/src/routes/chat/ChannelChat/styled.tsx +++ b/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; diff --git a/src/routes/chat/SessionList/ContextMenu.tsx b/src/routes/chat/SessionList/ContextMenu.tsx index cb414a86..a3ec73ae 100644 --- a/src/routes/chat/SessionList/ContextMenu.tsx +++ b/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}`); diff --git a/src/routes/chat/index.team.tsx b/src/routes/chat/index.team.tsx index d33a89c8..53b97bd9 100644 --- a/src/routes/chat/index.team.tsx +++ b/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 = () => { - setContactsModalVisible((prev) => !prev); + const toggleUsersModalVisible = () => { + setUsersModalVisible((prev) => !prev); }; const toggleChannelModalVisible = () => { setChannelModalVisible((prev) => !prev); @@ -49,7 +49,7 @@ export default function ChatPage() { {channelModalVisible && ( )} - {usersModalVisible && } + {usersModalVisible && }
    @@ -74,7 +74,7 @@ export default function ChatPage() { DIRECT MESSAGE - +