Merge pull request #2272 from visuddhinanda/development

Development

dashboard-v4/dashboard/src/components/article/TypeTask.tsx

@@ -1,14 +1,7 @@
-import { useState } from "react";
-import { Modal } from "antd";
-import { ExclamationCircleOutlined } from "@ant-design/icons";
-import { IArticleDataResponse } from "../api/Article";
 import { ArticleMode, ArticleType } from "./Article";
-import TypeArticleReader from "./TypeArticleReader";
-import ArticleEdit from "./ArticleEdit";
-import TaskEdit from "../task/TaskEdit";
 import { ITaskData } from "../api/task";
-import TaskReader from "../task/TaskReader";
 import Task from "../task/Task";
+import { openDiscussion } from "../discussion/DiscussionButton";
 
 interface IWidget {
   type?: ArticleType;
@@ -30,7 +23,12 @@ const TypeTask = ({
 }: IWidget) => {
   return (
     <div>
-      <Task taskId={articleId} />
+      <Task
+        taskId={articleId}
+        onDiscussion={() => {
+          articleId && openDiscussion(articleId, "task", false);
+        }}
+      />
     </div>
   );
 };

dashboard-v4/dashboard/src/components/discussion/DiscussionDrawer.tsx

@@ -1,4 +1,4 @@
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import { Button, Divider, Drawer, Space } from "antd";
 import { FullscreenOutlined, FullscreenExitOutlined } from "@ant-design/icons";
 
@@ -8,6 +8,7 @@ import { IComment } from "./DiscussionItem";
 import DiscussionAnchor from "./DiscussionAnchor";
 import { Link } from "react-router-dom";
 import { useIntl } from "react-intl";
+import Discussion from "./Discussion";
 
 export interface IAnswerCount {
   id: string;
@@ -15,35 +16,35 @@ export interface IAnswerCount {
 }
 interface IWidget {
   trigger?: JSX.Element;
+  open?: boolean;
+  onClose?: () => void;
   resId?: string;
   resType?: TResType;
-  onCommentCountChange?: Function;
 }
 const DiscussionDrawerWidget = ({
   trigger,
+  open,
+  onClose,
   resId,
   resType,
-  onCommentCountChange,
 }: IWidget) => {
   const intl = useIntl();
-  const [open, setOpen] = useState(false);
-  const [childrenDrawer, setChildrenDrawer] = useState(false);
-  const [topicComment, setTopicComment] = useState<IComment>();
-  const [answerCount, setAnswerCount] = useState<IAnswerCount>();
-  const drawerMinWidth = 720;
+  const [openDrawer, setOpenDrawer] = useState(open);
+
+  useEffect(() => {
+    setOpenDrawer(open);
+  }, [open]);
+
+  const drawerMinWidth = 600;
   const drawerMaxWidth = 1100;
 
   const [drawerWidth, setDrawerWidth] = useState(drawerMinWidth);
-  const showChildrenDrawer = (comment: IComment) => {
-    setChildrenDrawer(true);
-    setTopicComment(comment);
-  };
 
   return (
     <>
       <span
         onClick={() => {
-          setOpen(true);
+          setOpenDrawer(true);
         }}
       >
         {trigger}
@@ -75,46 +76,20 @@ const DiscussionDrawerWidget = ({
         }
         width={drawerWidth}
         onClose={() => {
-          setOpen(false);
+          if (onClose) {
+            onClose();
+          } else {
+            setOpenDrawer(false);
+          }
+
           if (document.getElementsByTagName("body")[0].hasAttribute("style")) {
             document.getElementsByTagName("body")[0].removeAttribute("style");
           }
         }}
-        open={open}
+        open={openDrawer}
         maskClosable={false}
       >
-        <DiscussionAnchor resId={resId} resType={resType} />
-        <Divider></Divider>
-        <DiscussionListCard
-          resId={resId}
-          resType={resType}
-          onSelect={(
-            e: React.MouseEvent<HTMLSpanElement, MouseEvent>,
-            comment: IComment
-          ) => showChildrenDrawer(comment)}
-          onReply={(comment: IComment) => showChildrenDrawer(comment)}
-          changedAnswerCount={answerCount}
-          onItemCountChange={(count: number) => {
-            if (typeof onCommentCountChange !== "undefined") {
-              onCommentCountChange(count);
-            }
-          }}
-        />
-        <Drawer
-          title="Answer"
-          width={700}
-          onClose={() => {
-            setChildrenDrawer(false);
-          }}
-          open={childrenDrawer}
-        >
-          <DiscussionTopic
-            topicId={topicComment?.id}
-            onItemCountChange={(count: number, parent: string) => {
-              setAnswerCount({ id: parent, count: count });
-            }}
-          />
-        </Drawer>
+        <Discussion resId={resId} resType={resType} showStudent={false} />
       </Drawer>
     </>
   );

dashboard-v4/dashboard/src/components/task/Description.tsx

@@ -7,20 +7,28 @@ import MdView from "../template/MdView";
 import MDEditor from "@uiw/react-md-editor";
 import "../article/article.css";
 import { patch } from "../../request";
-import { openDiscussion } from "../discussion/DiscussionButton";
+import DiscussionDrawer from "../discussion/DiscussionDrawer";
 
 interface IWidget {
   task?: ITaskData;
   onChange?: (data: ITaskData[]) => void;
+  onDiscussion?: () => void;
 }
-const Description = ({ task, onChange }: IWidget) => {
+const Description = ({ task, onChange, onDiscussion }: IWidget) => {
   const [mode, setMode] = useState<"read" | "edit">("read");
   const [content, setContent] = useState(task?.description);
   const [loading, setLoading] = useState(false);
+  const [open, setOpen] = useState(false);
 
   useEffect(() => setContent(task?.description), [task]);
   return (
     <div>
+      <DiscussionDrawer
+        open={open}
+        onClose={() => setOpen(false)}
+        resId={task?.id}
+        resType="task"
+      />
       <div
         style={{
           display: "flex",
@@ -35,7 +43,11 @@ const Description = ({ task, onChange }: IWidget) => {
               <Button
                 key={1}
                 onClick={() => {
-                  task && openDiscussion(task?.id, "task", false);
+                  if (typeof onDiscussion === "undefined") {
+                    setOpen(true);
+                  } else {
+                    onDiscussion();
+                  }
                 }}
               >
                 讨论

dashboard-v4/dashboard/src/components/task/Task.tsx

@@ -5,8 +5,9 @@ interface IWidget {
   taskId?: string;
   onLoad?: (task: ITaskData) => void;
   onChange?: (task: ITaskData[]) => void;
+  onDiscussion?: () => void;
 }
-const Task = ({ taskId, onLoad, onChange }: IWidget) => {
+const Task = ({ taskId, onLoad, onChange, onDiscussion }: IWidget) => {
   return (
     <div>
       <TaskReader
@@ -14,6 +15,7 @@ const Task = ({ taskId, onLoad, onChange }: IWidget) => {
         onChange={(data: ITaskData[]) => {
           onChange && onChange(data);
         }}
+        onDiscussion={onDiscussion}
       />
     </div>
   );

dashboard-v4/dashboard/src/components/task/TaskEditDrawer.tsx

@@ -30,6 +30,9 @@ const TaskEditDrawer = ({
 
   const onCloseDrawer = () => {
     setOpen(false);
+    if (document.getElementsByTagName("body")[0].hasAttribute("style")) {
+      document.getElementsByTagName("body")[0].removeAttribute("style");
+    }
     if (onClose) {
       onClose();
     }

dashboard-v4/dashboard/src/components/task/TaskReader.tsx

@@ -33,8 +33,9 @@ export const Milestone = ({ task }: { task?: ITaskData }) => {
 interface IWidget {
   taskId?: string;
   onChange?: (data: ITaskData[]) => void;
+  onDiscussion?: () => void;
 }
-const TaskReader = ({ taskId, onChange }: IWidget) => {
+const TaskReader = ({ taskId, onChange, onDiscussion }: IWidget) => {
   const [openPreTask, setOpenPreTask] = useState(false);
   const [openNextTask, setOpenNextTask] = useState(false);
   const [task, setTask] = useState<ITaskData>();
@@ -206,6 +207,7 @@ const TaskReader = ({ taskId, onChange }: IWidget) => {
           setTask(data[0]);
           onChange && onChange(data);
         }}
+        onDiscussion={onDiscussion}
       />
     </div>
   );