diff --git a/public/locales/en/member.json b/public/locales/en/member.json index 2d7076e4..b2fb80f9 100644 --- a/public/locales/en/member.json +++ b/public/locales/en/member.json @@ -27,7 +27,7 @@ "remove_from_channel": "Remove from channel", "roles": "Roles", "set_admin": "Admin", - "set_normal": "Normal User", + "set_normal": "User", "search_not_found": "Not found, or this user is not allowed to be searched.", "search_by_id": "Search by ID", diff --git a/src/assets/index.css b/src/assets/index.css index 7f855ff1..3b7a7134 100644 --- a/src/assets/index.css +++ b/src/assets/index.css @@ -168,6 +168,9 @@ background-color: #22ccee; color: #fff; } + .context-menu .item:hover svg { + fill: white; + } .context-menu .item.bottom_line { margin-bottom: 9px; } diff --git a/src/components/ManageMembers/MemberList.tsx b/src/components/ManageMembers/MemberList.tsx index f978b259..d377d3e1 100644 --- a/src/components/ManageMembers/MemberList.tsx +++ b/src/components/ManageMembers/MemberList.tsx @@ -23,13 +23,14 @@ const MemberList: FC = ({ cid }) => { const ref = useRef(null); const { t } = useTranslation("member"); const { t: ct } = useTranslation(); - const { channels, loginUser } = useAppSelector((store) => { + const { userMap, channels, loginUser } = useAppSelector((store) => { return { + userMap: store.users.byId, channels: store.channels, loginUser: store.authData.user }; }); - const { users, input, updateInput } = useFilteredUsers(); + const { uids, input, updateInput } = useFilteredUsers(); const { copyEmail, removeFromChannel, removeUser } = useUserOperation({ cid }); const [updateUser, { isSuccess: updateSuccess }] = useUpdateUserMutation(); @@ -54,8 +55,7 @@ const MemberList: FC = ({ cid }) => { }; const channel = cid ? channels.byId[cid] : null; - const ids = users.map((u) => u.uid); - const uids = channel ? (channel.is_public ? ids : channel.members) : ids; + const finalUids = channel ? (channel.is_public ? uids : channel.members) : uids; return ( <> @@ -63,9 +63,9 @@ const MemberList: FC = ({ cid }) => { className="flex flex-col gap-1 w-full md:w-[512px] mb-44 max-h-[800px] overflow-y-scroll" ref={ref} > - + {(uid) => { - const currUser = users.find((u) => u.uid == uid); + const currUser = userMap[uid]; if (!currUser) return null; const { name, email, is_admin } = currUser; const owner = channel && channel.owner == uid; diff --git a/src/hooks/useFilteredUsers.ts b/src/hooks/useFilteredUsers.ts index ce360e42..4bbb2859 100644 --- a/src/hooks/useFilteredUsers.ts +++ b/src/hooks/useFilteredUsers.ts @@ -1,23 +1,26 @@ import { useEffect, useState } from "react"; +import { escapeRegExp } from "lodash"; import { StoredUser } from "@/app/slices/users"; import { useAppSelector } from "@/app/store"; export default function useFilteredUsers() { const [input, setInput] = useState(""); - const { originUsers, enableContact } = useAppSelector((store) => { + const { originUsers, enableContact, isAdmin } = useAppSelector((store) => { return { + isAdmin: store.authData.user?.is_admin, enableContact: store.server.contact_verification_enable, originUsers: Object.values(store.users.byId) }; }); const [filteredUsers, setFilteredUsers] = useState([]); - const users = enableContact ? originUsers.filter((u) => u.status == "added") : originUsers; + const useContactList = enableContact && !isAdmin; + const users = useContactList ? originUsers.filter((u) => u.status == "added") : originUsers; useEffect(() => { if (!input) { setFilteredUsers(users); } else { - let str = ["", input.toLowerCase(), ""].join(".*"); + let str = ["", escapeRegExp(input.toLowerCase()), ""].join(".*"); let reg = new RegExp(str); setFilteredUsers( users.filter((c) => { @@ -35,6 +38,7 @@ export default function useFilteredUsers() { return { input, users: filteredUsers, + uids: filteredUsers.map((u) => u.uid), updateInput }; }