refactor: 群组面板界面

pull/13/head
moonrailgun 4 years ago
parent 3e8e8870d6
commit fce6b81ba2

@ -69,7 +69,7 @@ export {
export { useAppSelector, useAppDispatch } from './redux/hooks/useAppSelector';
export { useDMConverseList } from './redux/hooks/useConverse';
export { useConverseMessage } from './redux/hooks/useConverseMessage';
export { useGroupInfo } from './redux/hooks/useGroup';
export { useGroupInfo, useGroupPanel } from './redux/hooks/useGroup';
export { useUserId } from './redux/hooks/useUserInfo';
export { userActions } from './redux/slices';
export type { ChatConverseState } from './redux/slices/chat';

@ -1,4 +1,5 @@
import type { GroupInfo } from '../../model/group';
import { useMemo } from 'react';
import type { GroupInfo, GroupPanel } from '../../model/group';
import { useAppSelector } from './useAppSelector';
/**
@ -7,3 +8,18 @@ import { useAppSelector } from './useAppSelector';
export function useGroupInfo(groupId: string): GroupInfo | undefined {
return useAppSelector((state) => state.group.groups[groupId]);
}
/**
*
*/
export function useGroupPanel(
groupId: string,
panelId: string
): GroupPanel | undefined {
const groupInfo = useGroupInfo(groupId);
return useMemo(
() => groupInfo?.panels.find((p) => p.id === panelId),
[groupInfo, panelId]
);
}

@ -0,0 +1,11 @@
import { ChatBox } from '@/components/ChatBox';
import React from 'react';
interface TextPanelProps {
panelId: string;
}
export const TextPanel: React.FC<TextPanelProps> = React.memo(({ panelId }) => {
// return <ChatBox converseId={panelId} />;
return <div>TODO: panelId: {panelId}</div>;
});
TextPanel.displayName = 'TextPanel';

@ -0,0 +1,25 @@
import { TextPanel } from '@/components/Panel/group/TextPanel';
import { Alert } from 'antd';
import React from 'react';
import { useParams } from 'react-router';
import { GroupPanelType, useGroupPanel } from 'tailchat-shared';
export const GroupPanelRender: React.FC = React.memo(() => {
const { groupId, panelId } = useParams<{
groupId: string;
panelId: string;
}>();
const panelInfo = useGroupPanel(groupId, panelId);
if (panelInfo === undefined) {
return null;
}
if (panelInfo.type === GroupPanelType.TEXT) {
return <TextPanel panelId={panelInfo.id} />;
}
return <Alert message="未知的面板类型" />;
});
GroupPanelRender.displayName = 'GroupPanelRender';

@ -1,11 +1,18 @@
import React from 'react';
import { Route, Switch } from 'react-router-dom';
import { PageContent } from '../PageContent';
import { GroupPanelRender } from './Panel';
import { Sidebar } from './Sidebar';
export const Group: React.FC = React.memo(() => {
return (
<PageContent sidebar={<Sidebar />}>
<div>TODO</div>
<Switch>
<Route
path="/main/group/:groupId/:panelId"
component={GroupPanelRender}
/>
</Switch>
</PageContent>
);
});

Loading…
Cancel
Save