使用 Discussion 组件

dashboard/src/components/discussion/DiscussionBox.tsx

@@ -1,12 +1,8 @@
 import { useEffect, useState } from "react";
-import { ArrowLeftOutlined } from "@ant-design/icons";
 
-import DiscussionTopic from "./DiscussionTopic";
-import DiscussionListCard from "./DiscussionListCard";
 import { IComment } from "./DiscussionItem";
 import { useAppSelector } from "../../hooks";
 import {
-  countChange,
   IShowDiscussion,
   message,
   show,
@@ -14,6 +10,7 @@ import {
 } from "../../reducers/discussion";
 import { Button } from "antd";
 import store from "../../store";
+import Discussion from "./Discussion";
 
 export interface IAnswerCount {
   id: string;
@@ -25,10 +22,7 @@ interface IWidget {
 }
 
 const DiscussionBoxWidget = ({ onTopicChange }: IWidget) => {
-  const [childrenDrawer, setChildrenDrawer] = useState(false);
   const [topicId, setTopicId] = useState<string>();
-  const [topic, setTopic] = useState<IComment>();
-  const [answerCount, setAnswerCount] = useState<IAnswerCount>();
   const [currTopic, setCurrTopic] = useState<IComment>();
 
   const discussionMessage = useAppSelector(message);
@@ -36,25 +30,12 @@ const DiscussionBoxWidget = ({ onTopicChange }: IWidget) => {
   useEffect(() => {
     if (discussionMessage) {
       if (discussionMessage.topic) {
-        setChildrenDrawer(true);
         setTopicId(discussionMessage.topic);
       } else {
-        setChildrenDrawer(false);
       }
     }
   }, [discussionMessage]);
 
-  const showChildrenDrawer = (comment: IComment) => {
-    setChildrenDrawer(true);
-    if (comment.id) {
-      setTopicId(comment.id);
-      setTopic(undefined);
-    } else {
-      setTopicId(undefined);
-      setTopic(comment);
-    }
-  };
-
   return (
     <>
       <Button
@@ -73,51 +54,15 @@ const DiscussionBoxWidget = ({ onTopicChange }: IWidget) => {
       >
         显示译文
       </Button>
-      {childrenDrawer ? (
-        <div>
-          <Button
-            shape="circle"
-            icon={<ArrowLeftOutlined />}
-            onClick={() => setChildrenDrawer(false)}
-          />
-          <DiscussionTopic
-            resType={discussionMessage?.resType}
-            topicId={topicId}
-            topic={topic}
-            focus={discussionMessage?.comment}
-            onItemCountChange={(count: number, parent: string) => {
-              setAnswerCount({ id: parent, count: count });
-            }}
-            onTopicReady={(value: IComment) => {
-              setCurrTopic(value);
-            }}
-            onTopicDelete={() => {
-              setChildrenDrawer(false);
-            }}
-          />
-        </div>
-      ) : (
-        <DiscussionListCard
-          resId={discussionMessage?.resId}
-          resType={discussionMessage?.resType}
-          onSelect={(
-            e: React.MouseEvent<HTMLSpanElement, MouseEvent>,
-            comment: IComment
-          ) => showChildrenDrawer(comment)}
-          onReply={(comment: IComment) => showChildrenDrawer(comment)}
-          onReady={() => {}}
-          changedAnswerCount={answerCount}
-          onItemCountChange={(count: number) => {
-            store.dispatch(
-              countChange({
-                count: count,
-                resId: discussionMessage?.resId,
-                resType: discussionMessage?.resType,
-              })
-            );
-          }}
-        />
-      )}
+      <Discussion
+        resId={discussionMessage?.resId}
+        resType={discussionMessage?.resType}
+        focus={discussionMessage?.comment}
+        showTopicId={topicId}
+        onTopicReady={(value: IComment) => {
+          setCurrTopic(value);
+        }}
+      />
     </>
   );
 };