Merge pull request #13127 from mezonai/bug26b/webdesktop/Not-list-updated-when-removing-user/role-from-private-channel

260520 - WEB/DESKTOP - Not list updated when removing user/role from private channel

Author: huybuidoanquang

libs/components/src/lib/components/ChannelSetting/Component/Modal/addMemRoleModal.tsx

@@ -70,7 +70,7 @@ export const AddMemRole: React.FC<AddMemRoleProps> = ({
 	);
 
 	const usersClan = useSelector(selectAllUserClans);
-	const userChannelIds = getUserChannelIdsFromStore(channel.channel_id);
+	const userChannelIds = getUserChannelIdsFromStore(channel.id);
 
 	const listUserInvite = useMemo(() => {
 		if (channel.channel_private !== 1) {

libs/components/src/lib/components/ChannelSetting/Component/PermissionsChannel/listMemberPermission.tsx

@@ -4,6 +4,7 @@ import { channelUsersActions, selectCurrentClanId, selectMemberClanByUserId, sel
 import { Icons } from '@mezon/ui';
 import type { IChannel } from '@mezon/utils';
 import { createImgproxyUrl, generateE2eId, getAvatarForPrioritize, getNameForPrioritize } from '@mezon/utils';
+import { useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useSelector } from 'react-redux';
 import { AvatarImage } from '../../../AvatarImage/AvatarImage';
@@ -19,11 +20,24 @@ const ListMemberPermission = (props: ListMemberPermissionProps) => {
 
 	const dispatch = useAppDispatch();
 	const idUsers = useSelector((state) => selectUserChannelIds(state, channel.id));
+	const displayUserIds = useMemo(() => {
+		const sourceIds = channel.channel_private === 1 ? idUsers : props.selectedUserIds;
+		return Array.from(new Set(sourceIds.filter(Boolean)));
+	}, [channel.channel_private, idUsers, props.selectedUserIds]);
 	const currentClanId = useSelector(selectCurrentClanId);
 	const navigate = useCustomNavigate();
 	const userProfile = useAuth();
 	const { toMembersPage } = useAppNavigation();
+
 	const deleteMember = async (userId: string) => {
+		if (channel.channel_private !== 1) {
+			props.setSelectedUserIds?.(props.selectedUserIds.filter((selectedId) => selectedId !== userId));
+			return;
+		}
+
+		if (!idUsers.includes(userId)) {
+			return;
+		}
 		const body: removeChannelUsersPayload = {
 			channelId: channel.id,
 			userId,
@@ -36,15 +50,8 @@ const ListMemberPermission = (props: ListMemberPermissionProps) => {
 		}
 	};
 
-	return idUsers.map((id) => (
-		<ItemMemberPermission
-			key={id}
-			id={id}
-			onDelete={() => deleteMember(id as string)}
-			channelOwner={channel.creator_id === id}
-			selectedUserIds={props.selectedUserIds}
-			setSelectedUserIds={props.setSelectedUserIds}
-		/>
+	return displayUserIds.map((id) => (
+		<ItemMemberPermission key={id} id={id} onDelete={() => deleteMember(id as string)} channelOwner={channel.creator_id === id} />
 	));
 };
 
@@ -59,21 +66,15 @@ type ItemMemberPermissionProps = {
 	clanAvatar?: string;
 	onDelete: () => void;
 	channelOwner?: boolean;
-	selectedUserIds?: string[];
-	setSelectedUserIds?: (userIds: string[]) => void;
 };
 
 const ItemMemberPermission = (props: ItemMemberPermissionProps) => {
-	const { id = '', onDelete, channelOwner, selectedUserIds = [], setSelectedUserIds } = props;
+	const { id = '', onDelete, channelOwner } = props;
 	const user = useSelector((state) => selectMemberClanByUserId(state, id));
 	const namePrioritize = getNameForPrioritize(user?.clan_nick, user?.user?.display_name, user?.user?.username);
 	const avatarPrioritize = getAvatarForPrioritize(user?.clan_avatar, user?.user?.avatar_url);
 
 	const handleDelete = () => {
-		if (setSelectedUserIds && selectedUserIds) {
-			const newSelectedUserIds = selectedUserIds.filter((userId) => userId !== id);
-			setSelectedUserIds(newSelectedUserIds);
-		}
 		if (!channelOwner) {
 			onDelete();
 		}

libs/store/src/lib/permissionChannel/permissionChannel.slice.ts

@@ -16,7 +16,7 @@ type addChannelUsersPayload = {
 };
 export const addChannelUsers = createAsyncThunk(
 	'channelUsers/addChannelUsers',
-	async ({ channelId, channelType, userIds, clanId }: addChannelUsersPayload, thunkAPI) => {
+	async ({ channelId, channelType, userIds, clanId: _clanId }: addChannelUsersPayload, thunkAPI) => {
 		try {
 			const mezon = await ensureSession(getMezonCtx(thunkAPI));
 			const response = await mezon.client.addChannelUsers(mezon.session, channelId, userIds);
@@ -59,14 +59,17 @@ export type banChannelUsersPayload = {
 
 export const removeChannelUsers = createAsyncThunk(
 	'channelUsers/removeChannelUsers',
-	async ({ channelId, userId }: removeChannelUsersPayload, thunkAPI) => {
+	async ({ channelId, userId, channelType: _channelType }: removeChannelUsersPayload, thunkAPI) => {
 		try {
 			const mezon = await ensureSession(getMezonCtx(thunkAPI));
 			const userIds = [userId];
 			const response = await mezon.client.removeChannelUsers(mezon.session, channelId, userIds);
 			if (!response) {
 				return thunkAPI.rejectWithValue([]);
 			}
+			if (channelId) {
+				thunkAPI.dispatch(userChannelsActions.removeUserChannel({ channelId, userRemoves: userIds }));
+			}
 
 			return response;
 		} catch (error) {