refactor: 会话消息获取

pull/13/head
moonrailgun 4 years ago
parent 06fc8083ff
commit 646e62f63f

@ -1,3 +1,4 @@
import { ChatConverseInfo, fetchConverseInfo } from '../model/converse';
import { fetchUserInfo, UserBaseInfo } from '../model/user'; import { fetchUserInfo, UserBaseInfo } from '../model/user';
import { queryClient } from './index'; import { queryClient } from './index';
@ -18,3 +19,8 @@ export const getCachedUserInfo = buildCacheFactory<UserBaseInfo>(
'user', 'user',
fetchUserInfo fetchUserInfo
); );
export const getCachedConverseInfo = buildCacheFactory<ChatConverseInfo>(
'converse',
fetchConverseInfo
);

@ -60,6 +60,7 @@ export {
// redux // redux
export { useAppSelector, useAppDispatch } from './redux/hooks/useAppSelector'; export { useAppSelector, useAppDispatch } from './redux/hooks/useAppSelector';
export { useConverseMessage } from './redux/hooks/useConverseMessage';
export { userActions } from './redux/slices'; export { userActions } from './redux/slices';
export { setupRedux } from './redux/setup'; export { setupRedux } from './redux/setup';
export { createStore } from './redux/store'; export { createStore } from './redux/store';

@ -20,3 +20,19 @@ export async function createDMConverse(
return data; return data;
} }
/**
*
* @param converseId ID
*/
export async function fetchConverseInfo(
converseId: string
): Promise<ChatConverseInfo> {
const { data } = await request.get('/api/chat/converse/findConverseInfo', {
params: {
converseId,
},
});
return data;
}

@ -0,0 +1,36 @@
import { request } from '../api/request';
export interface ChatMessage {
_id: string;
content: string;
author?: string;
groupId?: string;
converseId: string;
createdAt?: string;
updatedAt?: string;
}
/**
*
* @param converseId ID
* @param startId ID
*/
export async function fetchConverseMessage(
converseId: string,
startId?: string
): Promise<ChatMessage[]> {
const { data } = await request.get('/api/chat/message/fetchConverseMessage', {
params: {
converseId,
startId,
},
});
return data;
}

@ -0,0 +1,31 @@
import { getCachedConverseInfo } from '../../cache/cache';
import { useAsync } from '../../hooks/useAsync';
import { fetchConverseMessage } from '../../model/message';
import { chatActions } from '../slices';
import { useAppDispatch, useAppSelector } from './useAppSelector';
/**
*
*/
export function useConverseMessage(converseId: string) {
const converse = useAppSelector((state) => state.chat.converses[converseId]);
const dispatch = useAppDispatch();
const messages = converse?.messages ?? [];
const { loading, error } = useAsync(async () => {
if (!converse) {
const converse = await getCachedConverseInfo(converseId);
dispatch(chatActions.setConverseInfo(converse));
const messages = await fetchConverseMessage(converseId);
dispatch(
chatActions.appendConverseMessage({
converseId,
messages,
})
);
}
}, [converse, converseId]);
return { messages, loading, error };
}

@ -0,0 +1,18 @@
import React from 'react';
import { Alert } from 'antd';
/**
*
*/
export const AlertErrorView: React.FC<{
error: Error;
}> = React.memo((props) => {
return (
<Alert
type="error"
message={String(props.error.name)}
description={String(props.error.message)}
/>
);
});
AlertErrorView.displayName = 'AlertErrorView';

@ -1,5 +1,7 @@
import { Skeleton } from 'antd'; import { Skeleton } from 'antd';
import React from 'react'; import React from 'react';
import { useConverseMessage } from 'pawchat-shared';
import { AlertErrorView } from '../AlertErrorView';
const ChatBoxPlaceholder: React.FC = React.memo(() => { const ChatBoxPlaceholder: React.FC = React.memo(() => {
return ( return (
@ -19,11 +21,19 @@ const ChatBoxPlaceholder: React.FC = React.memo(() => {
}); });
ChatBoxPlaceholder.displayName = 'ChatBoxPlaceholder'; ChatBoxPlaceholder.displayName = 'ChatBoxPlaceholder';
export const ChatBox: React.FC = React.memo(() => { export const ChatBox: React.FC<{
return ( converseId: string;
<> }> = React.memo((props) => {
<ChatBoxPlaceholder /> const { messages, loading, error } = useConverseMessage(props.converseId);
</>
); if (loading) {
return <ChatBoxPlaceholder />;
}
if (error) {
return <AlertErrorView error={error} />;
}
return <div>: {JSON.stringify(messages)}</div>;
}); });
ChatBox.displayName = 'ChatBox'; ChatBox.displayName = 'ChatBox';

@ -3,7 +3,7 @@ import React from 'react';
import { useParams } from 'react-router'; import { useParams } from 'react-router';
interface UserConversePanelParams { interface UserConversePanelParams {
converseUUID: string; converseId: string;
} }
export const ConversePanel: React.FC = React.memo(() => { export const ConversePanel: React.FC = React.memo(() => {
@ -11,8 +11,7 @@ export const ConversePanel: React.FC = React.memo(() => {
return ( return (
<div className="w-full h-full overflow-hidden"> <div className="w-full h-full overflow-hidden">
<div>{params.converseUUID}</div> <ChatBox converseId={params.converseId} />
<ChatBox />
</div> </div>
); );
}); });

@ -15,7 +15,7 @@ export const Personal: React.FC = React.memo(() => {
<Route path="/main/personal/plugins" component={IsDeveloping} /> <Route path="/main/personal/plugins" component={IsDeveloping} />
<Route <Route
path="/main/personal/converse/:converseUUID" path="/main/personal/converse/:converseId"
component={ConversePanel} component={ConversePanel}
/> />

Loading…
Cancel
Save