Merge pull request #10876 from kind6688/fix-channel-list

251125 WEB/DESKTOP - fix : list channel , dont have socket

Author: nguyentrannhan

apps/chat/src/app/pages/setting/channelSetting.tsx

@@ -8,7 +8,8 @@ import {
 	selectNumberChannelCount,
 	useAppDispatch
 } from '@mezon/store';
-import { ChangeEvent, useEffect, useMemo, useState } from 'react';
+import type { ChangeEvent } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 import { useSelector } from 'react-redux';
 import { useDebouncedCallback } from 'use-debounce';
 import ChannelTopBar from './ChannelTopBar';
@@ -42,8 +43,7 @@ const ChannelSetting = () => {
 			return listChannelSearch;
 		}
 		return listChannel;
-	}, [listChannelSearch, listChannel]);
-
+	}, [listChannelSearch, listChannel, searchFilter]);
 	useEffect(() => {
 		async function fetchListChannel() {
 			await dispatch(

libs/components/src/lib/components/ChannelList/EventChannelModal/ModalCreate/modalDetailItemEvent.tsx

@@ -141,6 +141,8 @@ const EventInfoDetail = (props: EventInfoDetailProps) => {
 			}
 		}
 	};
+	const avatarDefault = userCreate?.clan_avatar || userCreate?.user?.avatar_url;
+	const avatarLetter = (userCreate?.clan_nick || userCreate?.user?.display_name || userCreate?.user?.username)?.trim().charAt(0).toUpperCase();
 
 	return (
 		<div className="px-4 py-8 space-y-2 text-theme-primary max-h-[370px] h-fit hide-scrollbar overflow-auto">
@@ -218,11 +220,17 @@ const EventInfoDetail = (props: EventInfoDetailProps) => {
 				<p>{t('eventDetail.personInterested', { count: event?.user_ids?.length || 0 })}</p>
 			</div>
 			<div className="flex items-center gap-x-3">
-				<img
-					src={createImgproxyUrl(userCreate?.clan_avatar || userCreate?.user?.avatar_url || '')}
-					alt={userCreate?.clan_nick || userCreate?.user?.username}
-					className="size-5 rounded-full"
-				/>
+				{avatarDefault ? (
+					<img
+						src={createImgproxyUrl(avatarDefault)}
+						alt={userCreate?.clan_nick || userCreate?.user?.username}
+						className="size-5 rounded-full object-cover"
+					/>
+				) : (
+					<div className="size-5 bg-bgAvatarDark rounded-full flex justify-center items-center text-bgAvatarLight text-lg ">
+						{avatarLetter || '?'}
+					</div>
+				)}
 				<p>{t('eventDetail.createdBy', { username: userCreate?.clan_nick || userCreate?.user?.username })}</p>
 			</div>
 			<div className="break-all" data-e2e={generateE2eId('clan_page.modal.create_event.event_management.item.modal_detail_item.description')}>

libs/components/src/lib/components/ClanSettings/SettingSoundEffect/ModalUploadSound.tsx

@@ -283,11 +283,15 @@ const ModalUploadSound = ({ sound, onSuccess, onClose }: ModalUploadSoundProps)
 											value={name}
 											maxLength={62}
 											onChange={(e) => setName(e.target.value)}
-											className="w-full h-full px-3 py-2 bg-transparent text-theme-messaga=e border-none rounded-md text-sm focus:outline-none focus:ring-0 focus:border-none "
+											className="w-full h-full px-3 py-2 bg-transparent text-theme-messaga=e border-none rounded-md text-sm focus:outline-none focus:ring-0 focus:border-none pr-[50px]"
 										/>
 										<div className="absolute right-3 top-1/2 transform -translate-y-1/2">
-											<span className={`text-xs font-medium ${name.length > 25 ? 'text-[#faa61a]' : ''}`}>
-												{name.length}/62
+											<span
+												className={`text-xs font-medium ${
+													(name.length ?? 0) > 59 ? 'text-red-500' : (name.length ?? 0) > 40 ? 'text-[#faa61a]' : ''
+												}`}
+											>
+												{name.length ?? 0}/62
 											</span>
 										</div>
 									</div>

libs/components/src/lib/components/GifsStickersEmojis/inputSearch.tsx

@@ -95,7 +95,7 @@ export const InputSearch: React.FC = () => {
 						onChange={handleInputChange}
 						type="text"
 						placeholder={placeHolder}
-						className="bg-theme-input outline-none bg-theme-input flex-1 p-2 rounded-md "
+						className="bg-theme-input outline-none bg-theme-input flex-1 p-2 rounded-md pr-10"
 						value={valueInput}
 						ref={searchInputRef}
 					/>

libs/core/src/lib/chat/contexts/ChatContext.tsx

@@ -15,6 +15,7 @@ import {
 	channelMembers,
 	channelMembersActions,
 	channelMetaActions,
+	channelSettingActions,
 	channelsActions,
 	channelsSlice,
 	clansActions,
@@ -1472,8 +1473,24 @@ const ChatContextProvider: React.FC<ChatContextProviderProps> = ({ children, isM
 				);
 			}
 		}
-	}, []);
 
+		if (channelCreated.channel_type !== ChannelType.CHANNEL_TYPE_DM && channelCreated.channel_type !== ChannelType.CHANNEL_TYPE_GROUP) {
+			dispatch(
+				channelSettingActions.addChannelFromSocket({
+					id: channelCreated.channel_id,
+					channel_id: channelCreated.channel_id,
+					channel_label: channelCreated.channel_label,
+					parent_id: channelCreated.parent_id,
+					category_id: channelCreated.category_id,
+					clan_id: channelCreated.clan_id,
+					channel_private: channelCreated.channel_private,
+					channel_type: channelCreated.channel_type,
+					creator_id: channelCreated.creator_id,
+					app_id: channelCreated.app_id
+				})
+			);
+		}
+	}, []);
 	const oncategoryevent = useCallback(async (categoryEvent: CategoryEvent) => {
 		if (categoryEvent.status === EEventAction.CREATED) {
 			dispatch(
@@ -1630,6 +1647,10 @@ const ChatContextProvider: React.FC<ChatContextProviderProps> = ({ children, isM
 				dispatch(voiceActions.resetVoiceControl());
 			}
 
+			if (channelDeleted.channel_id !== '0') {
+				dispatch(channelSettingActions.removeChannelFromSocket(channelDeleted.channel_id));
+			}
+
 			if (channelDeleted?.deletor === userId) {
 				dispatch(channelsActions.deleteChannelSocket(channelDeleted));
 				dispatch(listChannelsByUserActions.remove(channelDeleted.channel_id));
@@ -1757,7 +1778,22 @@ const ChatContextProvider: React.FC<ChatContextProviderProps> = ({ children, isM
 				}
 				return dispatch(directActions.updateOne({ ...channelUpdated, currentUserId: userId }));
 			}
-
+			if (channelUpdated.channel_type !== ChannelType.CHANNEL_TYPE_DM && channelUpdated.channel_type !== ChannelType.CHANNEL_TYPE_GROUP) {
+				dispatch(
+					channelSettingActions.updateChannelFromSocket({
+						id: channelUpdated.channel_id,
+						channel_id: channelUpdated.channel_id,
+						channel_label: channelUpdated.channel_label,
+						parent_id: channelUpdated.parent_id,
+						category_id: channelUpdated.category_id,
+						clan_id: channelUpdated.clan_id,
+						channel_private: channelUpdated.channel_private,
+						channel_type: channelUpdated.channel_type,
+						creator_id: channelUpdated.creator_id,
+						app_id: channelUpdated.app_id
+					})
+				);
+			}
 			// Switch public to private
 			if (channelUpdated.channel_private && channelExist && channelExist.channel_private !== channelUpdated.channel_private) {
 				const result = await dispatch(

libs/store/src/lib/clans/clanSettingChannel.slice.ts

@@ -145,7 +145,64 @@ export const fetchChannelSettingInClan = createAsyncThunk(
 export const settingClanChannelSlice = createSlice({
 	name: SETTING_CLAN_CHANNEL,
 	initialState: initialSettingClanChannelState,
-	reducers: {},
+	reducers: {
+		addChannelFromSocket: (state, action) => {
+			const channel = action.payload;
+			if (!channel?.id) return;
+			if (channel.parent_id && channel.parent_id !== '0') {
+				if (!state.threadsByChannel[channel.parent_id]) {
+					state.threadsByChannel[channel.parent_id] = [];
+				}
+				const existingThread = state.threadsByChannel[channel.parent_id].find((t) => t.id === channel.id);
+				if (!existingThread) {
+					state.threadsByChannel[channel.parent_id].push(channel);
+					state.threadCount += 1;
+				}
+				return;
+			}
+			channelSettingAdapter.addOne(state, channel);
+			state.channelCount += 1;
+		},
+		removeChannelFromSocket: (state, action) => {
+			const channelId = action.payload;
+			if (state.entities[channelId]) {
+				channelSettingAdapter.removeOne(state, channelId);
+				state.channelCount = Math.max(0, state.channelCount - 1);
+				return;
+			}
+			Object.keys(state.threadsByChannel).some((parentId) => {
+				const threads = state.threadsByChannel[parentId];
+				const threadExists = threads.some((t) => t.id === channelId);
+				if (threadExists) {
+					state.threadsByChannel[parentId] = threads.filter((t) => t.id !== channelId);
+					state.threadCount = Math.max(0, state.threadCount - 1);
+					return true;
+				}
+				return false;
+			});
+		},
+		updateChannelFromSocket: (state, action) => {
+			const channel = action.payload;
+			if (!channel?.id) return;
+			if (state.entities[channel.id]) {
+				channelSettingAdapter.updateOne(state, {
+					id: channel.id,
+					changes: channel
+				});
+				return;
+			}
+			if (channel.parent_id && state.threadsByChannel[channel.parent_id]) {
+				const threads = state.threadsByChannel[channel.parent_id];
+				const threadIndex = threads.findIndex((t) => t.id === channel.id);
+				if (threadIndex !== -1) {
+					state.threadsByChannel[channel.parent_id][threadIndex] = {
+						...threads[threadIndex],
+						...channel
+					};
+				}
+			}
+		}
+	},
 	extraReducers(builder) {
 		builder
 			.addCase(fetchChannelSettingInClan.fulfilled, (state: SettingClanChannelState, actions) => {