From fce6b81ba2dc1f66b82dbbd29c913fb7390aeef2 Mon Sep 17 00:00:00 2001
From: moonrailgun <moonrailgun@gmail.com>
Date: Sat, 24 Jul 2021 20:53:39 +0800
Subject: [PATCH] =?UTF-8?q?refactor:=20=E7=BE=A4=E7=BB=84=E9=9D=A2?=
 =?UTF-8?q?=E6=9D=BF=E7=95=8C=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 shared/index.tsx                             |  2 +-
 shared/redux/hooks/useGroup.ts               | 18 +++++++++++++-
 web/src/components/Panel/group/TextPanel.tsx | 11 +++++++++
 web/src/routes/Main/Content/Group/Panel.tsx  | 25 ++++++++++++++++++++
 web/src/routes/Main/Content/Group/index.tsx  |  9 ++++++-
 5 files changed, 62 insertions(+), 3 deletions(-)
 create mode 100644 web/src/components/Panel/group/TextPanel.tsx
 create mode 100644 web/src/routes/Main/Content/Group/Panel.tsx

diff --git a/shared/index.tsx b/shared/index.tsx
index c6de0f31..f56e1896 100644
--- a/shared/index.tsx
+++ b/shared/index.tsx
@@ -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';
diff --git a/shared/redux/hooks/useGroup.ts b/shared/redux/hooks/useGroup.ts
index 3ed119cc..8e3533b1 100644
--- a/shared/redux/hooks/useGroup.ts
+++ b/shared/redux/hooks/useGroup.ts
@@ -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]
+  );
+}
diff --git a/web/src/components/Panel/group/TextPanel.tsx b/web/src/components/Panel/group/TextPanel.tsx
new file mode 100644
index 00000000..e73f17d4
--- /dev/null
+++ b/web/src/components/Panel/group/TextPanel.tsx
@@ -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';
diff --git a/web/src/routes/Main/Content/Group/Panel.tsx b/web/src/routes/Main/Content/Group/Panel.tsx
new file mode 100644
index 00000000..e49c4b40
--- /dev/null
+++ b/web/src/routes/Main/Content/Group/Panel.tsx
@@ -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';
diff --git a/web/src/routes/Main/Content/Group/index.tsx b/web/src/routes/Main/Content/Group/index.tsx
index 433b1958..c63a7712 100644
--- a/web/src/routes/Main/Content/Group/index.tsx
+++ b/web/src/routes/Main/Content/Group/index.tsx
@@ -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>
   );
 });