From 0f58129c748b232a619829d20d59ad6871b7300d Mon Sep 17 00:00:00 2001
From: moonrailgun <moonrailgun@gmail.com>
Date: Wed, 5 Oct 2022 00:03:47 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=88=9B=E5=BB=BA=E8=AF=9D=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 client/shared/hooks/useAsyncRequest.ts        |  6 +-
 client/web/tailchat.d.ts                      |  1 +
 .../plugins/com.msgbyte.topic/.ministarrc.js  |  2 +-
 .../services/topic.service.ts                 |  1 +
 .../plugins/com.msgbyte.topic/package.json    |  4 +-
 .../src/components/modals/TopicCreate.tsx     | 33 ++++++++
 .../src/group/GroupTopicPanelRender.tsx       | 37 ++++++---
 .../plugins/com.msgbyte.topic/src/index.tsx   |  3 +-
 .../com.msgbyte.topic/types/tailchat.d.ts     | 75 +++++++++++++++++--
 9 files changed, 140 insertions(+), 22 deletions(-)
 create mode 100644 server/plugins/com.msgbyte.topic/web/plugins/com.msgbyte.topic/src/components/modals/TopicCreate.tsx

diff --git a/client/shared/hooks/useAsyncRequest.ts b/client/shared/hooks/useAsyncRequest.ts
index cd427a21..06e05f0a 100644
--- a/client/shared/hooks/useAsyncRequest.ts
+++ b/client/shared/hooks/useAsyncRequest.ts
@@ -8,14 +8,14 @@ export function useAsyncRequest<T extends FunctionReturningPromise>(
   fn: T,
   deps: DependencyList = []
 ) {
-  const [{ loading }, call] = useAsyncFn(async (...args) => {
+  const [{ loading, value }, call] = useAsyncFn(async (...args: any[]) => {
     try {
-      await fn(...args);
+      return await fn(...args);
     } catch (err) {
       showErrorToasts(isDevelopment ? err : t('系统忙, 请稍后再试'));
       console.error(err);
     }
   }, deps);
 
-  return [{ loading }, call as T] as const;
+  return [{ loading, value }, call as T] as const;
 }
diff --git a/client/web/tailchat.d.ts b/client/web/tailchat.d.ts
index d793d59e..db546de0 100644
--- a/client/web/tailchat.d.ts
+++ b/client/web/tailchat.d.ts
@@ -310,6 +310,7 @@ declare module '@capital/component' {
     size?: 'small' | 'middle' | 'large';
     shape?: 'circle' | 'square';
     title?: string;
+    onClick?: React.MouseEventHandler<HTMLElement>;
   }>;
 
   export const PillTabs: any;
diff --git a/server/plugins/com.msgbyte.topic/.ministarrc.js b/server/plugins/com.msgbyte.topic/.ministarrc.js
index ab39d260..47fb5bdd 100644
--- a/server/plugins/com.msgbyte.topic/.ministarrc.js
+++ b/server/plugins/com.msgbyte.topic/.ministarrc.js
@@ -1,7 +1,7 @@
 const path = require('path');
 
 module.exports = {
-  externalDeps: ['react'],
+  externalDeps: ['react', 'styled-components'],
   pluginRoot: path.resolve(__dirname, './web'),
   outDir: path.resolve(__dirname, '../../public'),
 };
diff --git a/server/plugins/com.msgbyte.topic/services/topic.service.ts b/server/plugins/com.msgbyte.topic/services/topic.service.ts
index fed32db8..d1000953 100644
--- a/server/plugins/com.msgbyte.topic/services/topic.service.ts
+++ b/server/plugins/com.msgbyte.topic/services/topic.service.ts
@@ -71,6 +71,7 @@ class GroupTopicService extends TcService {
       })
       .limit(size)
       .skip((page - 1) * 20)
+      .sort({ _id: 'desc' })
       .exec();
 
     const json = await this.transformDocuments(ctx, {}, topic);
diff --git a/server/plugins/com.msgbyte.topic/web/plugins/com.msgbyte.topic/package.json b/server/plugins/com.msgbyte.topic/web/plugins/com.msgbyte.topic/package.json
index e48c780f..208ecc6a 100644
--- a/server/plugins/com.msgbyte.topic/web/plugins/com.msgbyte.topic/package.json
+++ b/server/plugins/com.msgbyte.topic/web/plugins/com.msgbyte.topic/package.json
@@ -8,6 +8,8 @@
     "sync:declaration": "tailchat declaration github"
   },
   "devDependencies": {
-    "react": "18.2.0"
+    "@types/styled-components": "^5.1.26",
+    "react": "18.2.0",
+    "styled-components": "^5.3.6"
   }
 }
diff --git a/server/plugins/com.msgbyte.topic/web/plugins/com.msgbyte.topic/src/components/modals/TopicCreate.tsx b/server/plugins/com.msgbyte.topic/web/plugins/com.msgbyte.topic/src/components/modals/TopicCreate.tsx
new file mode 100644
index 00000000..e4057413
--- /dev/null
+++ b/server/plugins/com.msgbyte.topic/web/plugins/com.msgbyte.topic/src/components/modals/TopicCreate.tsx
@@ -0,0 +1,33 @@
+import { useAsyncRequest } from '@capital/common';
+import { Button, ModalWrapper, TextArea } from '@capital/component';
+import React, { useState } from 'react';
+import styled from 'styled-components';
+import { Translate } from '../../translate';
+
+const Footer = styled.div({
+  textAlign: 'right',
+  paddingTop: 10,
+});
+
+export const TopicCreate: React.FC<{
+  onCreate: (text: string) => Promise<void>;
+}> = React.memo((props) => {
+  const [text, setText] = useState('');
+
+  const [{ loading }, handleCreate] = useAsyncRequest(async () => {
+    await props.onCreate(text);
+  }, [text]);
+
+  return (
+    <ModalWrapper title={Translate.createBtn}>
+      <TextArea value={text} onChange={(e) => setText(e.target.value)} />
+
+      <Footer>
+        <Button type="primary" loading={loading} onClick={handleCreate}>
+          {Translate.createBtn}
+        </Button>
+      </Footer>
+    </ModalWrapper>
+  );
+});
+TopicCreate.displayName = 'TopicCreate';
diff --git a/server/plugins/com.msgbyte.topic/web/plugins/com.msgbyte.topic/src/group/GroupTopicPanelRender.tsx b/server/plugins/com.msgbyte.topic/web/plugins/com.msgbyte.topic/src/group/GroupTopicPanelRender.tsx
index d6580bf4..e472ddd2 100644
--- a/server/plugins/com.msgbyte.topic/web/plugins/com.msgbyte.topic/src/group/GroupTopicPanelRender.tsx
+++ b/server/plugins/com.msgbyte.topic/web/plugins/com.msgbyte.topic/src/group/GroupTopicPanelRender.tsx
@@ -1,20 +1,23 @@
 import React, { useCallback, useEffect } from 'react';
 import { TopicCard } from '../components/TopicCard';
+import { useAsyncRequest, useGroupPanelContext } from '@capital/common';
 import {
-  showToasts,
-  useAsyncRequest,
-  useGroupPanelContext,
-} from '@capital/common';
-import { Button, Empty, IconBtn } from '@capital/component';
+  Button,
+  Empty,
+  IconBtn,
+  openModal,
+  closeModal,
+} from '@capital/component';
 import { request } from '../request';
-import './GroupTopicPanelRender.less';
 import { Translate } from '../translate';
+import { TopicCreate } from '../components/modals/TopicCreate';
+import './GroupTopicPanelRender.less';
 
 const GroupTopicPanelRender: React.FC = React.memo(() => {
   const panelInfo = useGroupPanelContext();
 
   const [{ value: list = [] }, fetch] = useAsyncRequest(async () => {
-    if (!panelInfo) {
+    if (!panelInfo.groupId || !panelInfo.panelId) {
       return [];
     }
 
@@ -26,15 +29,29 @@ const GroupTopicPanelRender: React.FC = React.memo(() => {
     });
 
     return data;
-  }, [panelInfo]);
+  }, [panelInfo.groupId, panelInfo.panelId]);
 
   useEffect(() => {
     fetch();
   }, [fetch]);
 
   const handleCreateTopic = useCallback(() => {
-    showToasts('TODO: 创建话题');
-  }, []);
+    const key = openModal(
+      <TopicCreate
+        onCreate={async (text) => {
+          await request.post('create', {
+            groupId: panelInfo.groupId,
+            panelId: panelInfo.panelId,
+            content: text,
+          });
+
+          fetch();
+
+          closeModal(key);
+        }}
+      />
+    );
+  }, [panelInfo, fetch]);
 
   return (
     <div className="plugin-topic-group-panel">
diff --git a/server/plugins/com.msgbyte.topic/web/plugins/com.msgbyte.topic/src/index.tsx b/server/plugins/com.msgbyte.topic/web/plugins/com.msgbyte.topic/src/index.tsx
index 313c89e9..e88278a5 100644
--- a/server/plugins/com.msgbyte.topic/web/plugins/com.msgbyte.topic/src/index.tsx
+++ b/server/plugins/com.msgbyte.topic/web/plugins/com.msgbyte.topic/src/index.tsx
@@ -1,4 +1,5 @@
-import { regGroupPanel, Loadable } from '@capital/common';
+import { regGroupPanel } from '@capital/common';
+import { Loadable } from '@capital/component';
 import { Translate } from './translate';
 
 const PLUGIN_NAME = 'com.msgbyte.topic';
diff --git a/server/plugins/com.msgbyte.topic/web/plugins/com.msgbyte.topic/types/tailchat.d.ts b/server/plugins/com.msgbyte.topic/web/plugins/com.msgbyte.topic/types/tailchat.d.ts
index 0ea783da..d793d59e 100644
--- a/server/plugins/com.msgbyte.topic/web/plugins/com.msgbyte.topic/types/tailchat.d.ts
+++ b/server/plugins/com.msgbyte.topic/web/plugins/com.msgbyte.topic/types/tailchat.d.ts
@@ -16,6 +16,7 @@ declare module '@capital/common' {
 
   /**
    * 打开模态框
+   * @deprecated 请从 @capital/component 引入
    */
   export const openModal: (
     content: React.ReactNode,
@@ -39,16 +40,34 @@ declare module '@capital/common' {
     }
   ) => number;
 
+  /**
+   * @deprecated 请从 @capital/component 引入
+   */
   export const closeModal: any;
 
+  /**
+   * @deprecated 请从 @capital/component 引入
+   */
   export const ModalWrapper: any;
 
+  /**
+   * @deprecated 请从 @capital/component 引入
+   */
   export const useModalContext: any;
 
+  /**
+   * @deprecated 请从 @capital/component 引入
+   */
   export const openConfirmModal: any;
 
+  /**
+   * @deprecated 请从 @capital/component 引入
+   */
   export const openReconfirmModal: any;
 
+  /**
+   * @deprecated 请从 @capital/component 引入
+   */
   export const Loadable: any;
 
   export const getGlobalState: any;
@@ -109,13 +128,16 @@ declare module '@capital/common' {
 
   export const uploadFile: any;
 
-  export const showToasts: any;
+  export const showToasts: (
+    message: string,
+    type?: 'info' | 'success' | 'error' | 'warning'
+  ) => void;
 
-  export const showErrorToasts: any;
+  export const showErrorToasts: (error: any) => void;
 
   export const fetchAvailableServices: any;
 
-  export const isValidStr: any;
+  export const isValidStr: (str: any) => str is string;
 
   export const useGroupPanelInfo: any;
 
@@ -215,6 +237,14 @@ declare module '@capital/common' {
     required?: string[];
   }) => void;
 
+  export const pluginGroupPanelBadges: any;
+
+  export const regGroupPanelBadge: any;
+
+  export const pluginGroupTextPanelExtraMenus: any;
+
+  export const regPluginGroupTextPanelExtraMenu: any;
+
   export const useGroupIdContext: () => string;
 
   export const useGroupPanelContext: () => {
@@ -233,8 +263,6 @@ declare module '@capital/component' {
 
   export const Checkbox: any;
 
-  export const Empty: any;
-
   export const Input: any;
 
   export const Divider: any;
@@ -254,6 +282,17 @@ declare module '@capital/component' {
    */
   export const notification: any;
 
+  export const Empty: React.FC<
+    React.PropsWithChildren<{
+      prefixCls?: string;
+      className?: string;
+      style?: React.CSSProperties;
+      imageStyle?: React.CSSProperties;
+      image?: React.ReactNode;
+      description?: React.ReactNode;
+    }>
+  >;
+
   export const Avatar: any;
 
   export const SensitiveText: React.FC<{ className?: string; text: string }>;
@@ -266,7 +305,9 @@ declare module '@capital/component' {
 
   export const IconBtn: React.FC<{
     icon: string;
+    className?: string;
     iconClassName?: string;
+    size?: 'small' | 'middle' | 'large';
     shape?: 'circle' | 'square';
     title?: string;
   }>;
@@ -291,7 +332,27 @@ declare module '@capital/component' {
 
   export const DefaultFullModalTextAreaEditorRender: any;
 
-  export const openModal: any;
+  export const openModal: (
+    content: React.ReactNode,
+
+    props?: {
+      /**
+       * 是否显示右上角的关闭按钮
+       * @default false
+       */
+      closable?: boolean;
+
+      /**
+       * 遮罩层是否可关闭
+       */
+      maskClosable?: boolean;
+
+      /**
+       * 关闭modal的回调
+       */
+      onCloseModal?: () => void;
+    }
+  ) => number;
 
   export const closeModal: any;
 
@@ -303,6 +364,8 @@ declare module '@capital/component' {
 
   export const openReconfirmModal: any;
 
+  export const Loadable: any;
+
   export const Loading: any;
 
   export const SidebarView: any;