diff --git a/shared/helper/converse-helper.ts b/shared/helper/converse-helper.ts index 57db6145..e4ec303c 100644 --- a/shared/helper/converse-helper.ts +++ b/shared/helper/converse-helper.ts @@ -1,4 +1,5 @@ import { getCachedConverseInfo } from '../cache/cache'; +import { t } from '../i18n'; import type { ChatConverseInfo } from '../model/converse'; import { appendUserDMConverse } from '../model/user'; @@ -9,7 +10,11 @@ export async function ensureDMConverse( converseId: string ): Promise { const converse = await getCachedConverseInfo(converseId); - await appendUserDMConverse(converseId); + if (converse === null) { + // TODO + throw new Error(t('找不到私信会话')); + } + await appendUserDMConverse(converseId); // 添加到私人会话列表 return converse; } diff --git a/shared/redux/hooks/useConverseMessage.ts b/shared/redux/hooks/useConverseMessage.ts index fe8874f3..1b7f6ace 100644 --- a/shared/redux/hooks/useConverseMessage.ts +++ b/shared/redux/hooks/useConverseMessage.ts @@ -13,7 +13,12 @@ import { useAppDispatch, useAppSelector } from './useAppSelector'; /** * 会话消息管理 */ -export function useConverseMessage(converseId: string) { +interface ConverseContext { + converseId: string; + isGroup: boolean; +} +export function useConverseMessage(context: ConverseContext) { + const { converseId, isGroup } = context; const converse = useAppSelector((state) => state.chat.converses[converseId]); const dispatch = useAppDispatch(); const messages = converse?.messages ?? []; @@ -21,10 +26,23 @@ export function useConverseMessage(converseId: string) { const { loading, error } = useAsync(async () => { if (!converse) { // 如果是一个新会话(或者当前会话列表中没有) - - // Step 1. 创建会话 并确保私信列表中存在该会话 - const converse = await ensureDMConverse(converseId); - dispatch(chatActions.setConverseInfo(converse)); + if (!isGroup) { + // 如果是私信会话 + // Step 1. 创建会话 并确保私信列表中存在该会话 + const converse = await ensureDMConverse(converseId); + dispatch(chatActions.setConverseInfo(converse)); + } else { + // 如果是群组会话(文本频道) + // Step 1. 确保群组会话存在 + dispatch( + chatActions.setConverseInfo({ + _id: converseId, + name: '', + type: 'Group', + members: [], + }) + ); + } // Step 2. 拉取消息 const messages = await fetchConverseMessage(converseId); @@ -35,7 +53,7 @@ export function useConverseMessage(converseId: string) { }) ); } - }, [converse, converseId]); + }, [converse, converseId, isGroup]); const handleSendMessage = useCallback(async (payload: SendMessagePayload) => { // TODO: 增加临时消息, 对网络环境不佳的状态进行优化 diff --git a/shared/redux/setup.ts b/shared/redux/setup.ts index a023e995..80af1331 100644 --- a/shared/redux/setup.ts +++ b/shared/redux/setup.ts @@ -31,8 +31,8 @@ function initial(socket: AppSocket, store: AppStore) { store.dispatch(userActions.setFriendRequests(data)); }); - socket.request('user.dmlist.getAllConverse').then((data) => { - data.converseIds.forEach(async (converseId) => { + socket.request('user.dmlist.getAllConverse').then((data) => { + (data ?? []).forEach(async (converseId) => { // TODO: 待优化, 可以在后端一次性返回 const converse = await getCachedConverseInfo(converseId); diff --git a/web/src/components/ChatBox/index.tsx b/web/src/components/ChatBox/index.tsx index d39812dd..e65225d8 100644 --- a/web/src/components/ChatBox/index.tsx +++ b/web/src/components/ChatBox/index.tsx @@ -23,12 +23,23 @@ const ChatBoxPlaceholder: React.FC = React.memo(() => { }); ChatBoxPlaceholder.displayName = 'ChatBoxPlaceholder'; -export const ChatBox: React.FC<{ - converseId: string; -}> = React.memo((props) => { - const { messages, loading, error, handleSendMessage } = useConverseMessage( - props.converseId - ); +type ChatBoxProps = + | { + converseId: string; + isGroup: false; + groupId?: string; + } + | { + converseId: string; + isGroup: true; + groupId: string; + }; +export const ChatBox: React.FC = React.memo((props) => { + const { converseId, isGroup } = props; + const { messages, loading, error, handleSendMessage } = useConverseMessage({ + converseId, + isGroup, + }); if (loading) { return ; @@ -46,6 +57,7 @@ export const ChatBox: React.FC<{ onSendMsg={(msg) => handleSendMessage({ converseId: props.converseId, + groupId: props.groupId, content: msg, }) } diff --git a/web/src/components/Panel/group/TextPanel.tsx b/web/src/components/Panel/group/TextPanel.tsx index e73f17d4..d97c216c 100644 --- a/web/src/components/Panel/group/TextPanel.tsx +++ b/web/src/components/Panel/group/TextPanel.tsx @@ -2,10 +2,12 @@ import { ChatBox } from '@/components/ChatBox'; import React from 'react'; interface TextPanelProps { + groupId: string; panelId: string; } -export const TextPanel: React.FC = React.memo(({ panelId }) => { - // return ; - return
TODO: panelId: {panelId}
; -}); +export const TextPanel: React.FC = React.memo( + ({ groupId, panelId }) => { + return ; + } +); TextPanel.displayName = 'TextPanel'; diff --git a/web/src/routes/Main/Content/Group/Panel.tsx b/web/src/routes/Main/Content/Group/Panel.tsx index e49c4b40..6490c646 100644 --- a/web/src/routes/Main/Content/Group/Panel.tsx +++ b/web/src/routes/Main/Content/Group/Panel.tsx @@ -17,7 +17,7 @@ export const GroupPanelRender: React.FC = React.memo(() => { } if (panelInfo.type === GroupPanelType.TEXT) { - return ; + return ; } return ; diff --git a/web/src/routes/Main/Content/Personal/Converse/index.tsx b/web/src/routes/Main/Content/Personal/Converse/index.tsx index 4fc97ebe..77ca2c4d 100644 --- a/web/src/routes/Main/Content/Personal/Converse/index.tsx +++ b/web/src/routes/Main/Content/Personal/Converse/index.tsx @@ -11,7 +11,7 @@ export const ConversePanel: React.FC = React.memo(() => { return (
- +
); });