From 4ba7bc728ef861eedeed04b50bbe80d3e962bffd Mon Sep 17 00:00:00 2001
From: moonrailgun <moonrailgun@gmail.com>
Date: Thu, 17 Mar 2022 17:02:56 +0800
Subject: [PATCH] =?UTF-8?q?refactor:=20=E5=A2=9E=E5=8A=A0groupId=E4=B8=8A?=
 =?UTF-8?q?=E4=B8=8B=E6=96=87?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/modals/GroupDetail/index.tsx   | 14 ++++++----
 web/src/context/GroupIdContext.tsx            | 10 +++++++
 web/src/plugin/common/index.ts                |  6 +++--
 web/src/routes/Main/Content/Group/index.tsx   | 27 ++++++++++---------
 4 files changed, 38 insertions(+), 19 deletions(-)
 create mode 100644 web/src/context/GroupIdContext.tsx

diff --git a/web/src/components/modals/GroupDetail/index.tsx b/web/src/components/modals/GroupDetail/index.tsx
index 2914fc5e..e5b6248d 100644
--- a/web/src/components/modals/GroupDetail/index.tsx
+++ b/web/src/components/modals/GroupDetail/index.tsx
@@ -4,6 +4,7 @@ import {
   SidebarViewMenuItem,
   SidebarViewMenuType,
 } from '@/components/SidebarView';
+import { GroupIdContextProvider } from '@/context/GroupIdContext';
 import { pluginCustomPanel } from '@/plugin/common';
 import React, { useCallback, useMemo } from 'react';
 import { t } from 'tailchat-shared';
@@ -15,6 +16,7 @@ interface SettingsViewProps {
   onClose: () => void;
 }
 export const GroupDetail: React.FC<SettingsViewProps> = React.memo((props) => {
+  const groupId = props.groupId;
   const handleChangeVisible = useCallback(
     (visible) => {
       if (visible === false && typeof props.onClose === 'function') {
@@ -34,12 +36,12 @@ export const GroupDetail: React.FC<SettingsViewProps> = React.memo((props) => {
           {
             type: 'item',
             title: t('概述'),
-            content: <GroupSummary groupId={props.groupId} />,
+            content: <GroupSummary groupId={groupId} />,
           },
           {
             type: 'item',
             title: t('面板'),
-            content: <GroupPanel groupId={props.groupId} />,
+            content: <GroupPanel groupId={groupId} />,
           },
         ],
       },
@@ -66,9 +68,11 @@ export const GroupDetail: React.FC<SettingsViewProps> = React.memo((props) => {
   }, []);
 
   return (
-    <FullModal onChangeVisible={handleChangeVisible}>
-      <SidebarView menu={menu} defaultContentPath="0.children.0.content" />
-    </FullModal>
+    <GroupIdContextProvider value={groupId}>
+      <FullModal onChangeVisible={handleChangeVisible}>
+        <SidebarView menu={menu} defaultContentPath="0.children.0.content" />
+      </FullModal>
+    </GroupIdContextProvider>
   );
 });
 GroupDetail.displayName = 'GroupDetail';
diff --git a/web/src/context/GroupIdContext.tsx b/web/src/context/GroupIdContext.tsx
new file mode 100644
index 00000000..50369bec
--- /dev/null
+++ b/web/src/context/GroupIdContext.tsx
@@ -0,0 +1,10 @@
+import React, { useContext } from 'react';
+
+const GroupIdContext = React.createContext<string>('');
+GroupIdContext.displayName = 'GroupIdContext';
+
+export const GroupIdContextProvider = GroupIdContext.Provider;
+
+export function useGroupIdContext() {
+  return useContext(GroupIdContext);
+}
diff --git a/web/src/plugin/common/index.ts b/web/src/plugin/common/index.ts
index ec33599a..b92f689e 100644
--- a/web/src/plugin/common/index.ts
+++ b/web/src/plugin/common/index.ts
@@ -15,6 +15,7 @@ export {
 export { Loadable } from '@/components/Loadable';
 export { getGlobalState } from '@/utils/global-state-helper';
 export { dataUrlToFile } from '@/utils/file-helper';
+export { useGroupIdContext } from '@/context/GroupIdContext';
 import { request, RequestConfig } from 'tailchat-shared';
 export {
   getCachedUserInfo,
@@ -25,6 +26,7 @@ export {
   useAsync,
   useAsyncFn,
   useAsyncRefresh,
+  useAsyncRequest,
   uploadFile,
   showToasts,
   showErrorToasts,
@@ -63,13 +65,13 @@ export function createPluginRequest(pluginName: string) {
   return {
     get(actionName: string, config?: RequestConfig) {
       return request.get(
-        `/api/plugin:${pluginName}/${actionName}`,
+        `/api/plugin:${pluginName}/${actionName.replaceAll('.', '/')}`,
         purgeRequestConfig(config)
       );
     },
     post(actionName: string, data?: any, config?: RequestConfig) {
       return request.post(
-        `/api/plugin:${pluginName}/${actionName}`,
+        `/api/plugin:${pluginName}/${actionName.replaceAll('.', '/')}`,
         data,
         purgeRequestConfig(config)
       );
diff --git a/web/src/routes/Main/Content/Group/index.tsx b/web/src/routes/Main/Content/Group/index.tsx
index c2cc93df..0e7de6bc 100644
--- a/web/src/routes/Main/Content/Group/index.tsx
+++ b/web/src/routes/Main/Content/Group/index.tsx
@@ -1,5 +1,6 @@
 import { LoadingSpinner } from '@/components/LoadingSpinner';
 import { SplitPanel } from '@/components/SplitPanel';
+import { GroupIdContextProvider } from '@/context/GroupIdContext';
 import React from 'react';
 import { Route, Switch, useParams } from 'react-router-dom';
 import { isValidStr, useGroupInfo } from 'tailchat-shared';
@@ -32,18 +33,20 @@ export const Group: React.FC = React.memo(() => {
   );
 
   return (
-    <PageContent data-tc-role="content-group" sidebar={<Sidebar />}>
-      {isValidStr(pinnedPanelId) ? (
-        <SplitPanel className="flex-auto">
-          <div>{routeMatch}</div>
-          <div>
-            <GroupPanelRender groupId={groupId} panelId={pinnedPanelId} />
-          </div>
-        </SplitPanel>
-      ) : (
-        routeMatch
-      )}
-    </PageContent>
+    <GroupIdContextProvider value={groupId}>
+      <PageContent data-tc-role="content-group" sidebar={<Sidebar />}>
+        {isValidStr(pinnedPanelId) ? (
+          <SplitPanel className="flex-auto">
+            <div>{routeMatch}</div>
+            <div>
+              <GroupPanelRender groupId={groupId} panelId={pinnedPanelId} />
+            </div>
+          </SplitPanel>
+        ) : (
+          routeMatch
+        )}
+      </PageContent>
+    </GroupIdContextProvider>
   );
 });
 Group.displayName = 'Group';