Merge pull request #1471 from visuddhinanda/agile

topic在翻译界面中打开

dashboard/src/components/discussion/DiscussionAnchor.tsx

@@ -3,17 +3,28 @@ import { useEffect, useState } from "react";
 import { get } from "../../request";
 import { IArticleResponse } from "../api/Article";
 import { ICommentAnchorResponse } from "../api/Comment";
-import { ISentenceResponse } from "../api/Corpus";
+import { ISentenceData, ISentenceResponse } from "../api/Corpus";
 import MdView from "../template/MdView";
 import AnchorCard from "./AnchorCard";
 import { TResType } from "./DiscussionListCard";
 
+export interface IAnchor {
+  type: TResType;
+  sentence?: ISentenceData;
+}
+
 interface IWidget {
   resId?: string;
   resType?: TResType;
   topicId?: string;
+  onLoad?: Function;
 }
-const DiscussionAnchorWidget = ({ resId, resType, topicId }: IWidget) => {
+const DiscussionAnchorWidget = ({
+  resId,
+  resType,
+  topicId,
+  onLoad,
+}: IWidget) => {
   const [content, setContent] = useState<string>();
   const [loading, setLoading] = useState(true);
   useEffect(() => {
@@ -46,6 +57,9 @@ const DiscussionAnchorWidget = ({ resId, resType, topicId }: IWidget) => {
                   setContent(json.data.content);
                 }
               });
+              if (typeof onLoad !== "undefined") {
+                onLoad({ type: resType, sentence: json.data });
+              }
             }
           })
           .finally(() => setLoading(false));

dashboard/src/components/discussion/DiscussionBox.tsx

@@ -1,4 +1,4 @@
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import { ArrowLeftOutlined } from "@ant-design/icons";
 
 import DiscussionTopic from "./DiscussionTopic";
@@ -16,14 +16,22 @@ export interface IAnswerCount {
 
 const DiscussionBoxWidget = () => {
   const [childrenDrawer, setChildrenDrawer] = useState(false);
-  const [topicComment, setTopicComment] = useState<IComment>();
+  const [topicId, setTopicId] = useState<string>();
   const [answerCount, setAnswerCount] = useState<IAnswerCount>();
+  const [currTopic, setCurrTopic] = useState<IComment>();
 
   const discussionMessage = useAppSelector(message);
 
+  useEffect(() => {
+    if (discussionMessage?.topic) {
+      setChildrenDrawer(true);
+      setTopicId(discussionMessage?.topic);
+    }
+  }, [discussionMessage]);
+
   const showChildrenDrawer = (comment: IComment) => {
     setChildrenDrawer(true);
-    setTopicComment(comment);
+    setTopicId(comment.id);
   };
 
   return (
@@ -34,7 +42,9 @@ const DiscussionBoxWidget = () => {
           store.dispatch(
             showAnchor({
               type: "discussion",
-              resId: discussionMessage?.resId,
+              resId: discussionMessage?.resId
+                ? discussionMessage?.resId
+                : currTopic?.resId,
               resType: discussionMessage?.resType,
             })
           );
@@ -50,12 +60,15 @@ const DiscussionBoxWidget = () => {
             onClick={() => setChildrenDrawer(false)}
           />
           <DiscussionTopic
-            resId={discussionMessage?.resId}
             resType={discussionMessage?.resType}
-            topicId={topicComment?.id}
+            topicId={topicId}
+            focus={discussionMessage?.comment}
             onItemCountChange={(count: number, parent: string) => {
               setAnswerCount({ id: parent, count: count });
             }}
+            onTopicReady={(value: IComment) => {
+              setCurrTopic(value);
+            }}
           />
         </div>
       ) : (

dashboard/src/components/discussion/DiscussionTopic.tsx

@@ -6,7 +6,6 @@ import { IComment } from "./DiscussionItem";
 import { TResType } from "./DiscussionListCard";
 
 interface IWidget {
-  resId?: string;
   resType?: TResType;
   topicId?: string;
   focus?: string;
@@ -14,7 +13,6 @@ interface IWidget {
   onTopicReady?: Function;
 }
 const DiscussionTopicWidget = ({
-  resId,
   resType,
   topicId,
   focus,
@@ -22,19 +20,22 @@ const DiscussionTopicWidget = ({
   onItemCountChange,
 }: IWidget) => {
   const [count, setCount] = useState<number>();
+  const [currResId, setCurrResId] = useState<string>();
   return (
     <>
       <DiscussionTopicInfo
         topicId={topicId}
         childrenCount={count}
         onReady={(value: IComment) => {
+          setCurrResId(value.resId);
+          console.log("onReady", value);
           if (typeof onTopicReady !== "undefined") {
             onTopicReady(value);
           }
         }}
       />
       <DiscussionTopicChildren
-        resId={resId}
+        resId={currResId}
         resType={resType}
         focus={focus}
         topicId={topicId}

dashboard/src/pages/library/article/show.tsx

@@ -38,6 +38,9 @@ import store from "../../../store";
 import { IRecent } from "../../../components/recent/RecentList";
 import { convertToPlain, fullUrl } from "../../../utils";
 import ThemeSelect from "../../../components/general/ThemeSelect";
+import { show } from "../../../reducers/discussion";
+import { openPanel } from "../../../reducers/right-panel";
+import { TResType } from "../../../components/discussion/DiscussionListCard";
 
 /**
  * type:
@@ -306,8 +309,21 @@ const Widget = () => {
               }}
               onLoad={(article: IArticleDataResponse) => {
                 setLoadedArticleData(article);
-
                 document.title = convertToPlain(article.title).slice(0, 128);
+                const paramTopic = searchParams.get("topic");
+                const paramComment = searchParams.get("comment");
+                const paramType = searchParams.get("dis_type");
+                if (paramTopic !== null && paramType !== null) {
+                  store.dispatch(
+                    show({
+                      type: "discussion",
+                      topic: paramTopic,
+                      resType: paramType as TResType,
+                      comment: paramComment ? paramComment : undefined,
+                    })
+                  );
+                  store.dispatch(openPanel("discussion"));
+                }
               }}
               onAnthologySelect={(id: string) => {
                 let output: any = { anthology: id };

dashboard/src/pages/library/discussion/topic.tsx

@@ -1,23 +1,48 @@
-import { useNavigate } from "react-router-dom";
+import { useState } from "react";
+import { Link, useNavigate } from "react-router-dom";
 import { Button, Card, Divider } from "antd";
 import { useParams } from "react-router-dom";
 import { ArrowLeftOutlined } from "@ant-design/icons";
 
-import CommentAnchor from "../../../components/discussion/DiscussionAnchor";
+import CommentAnchor, {
+  IAnchor,
+} from "../../../components/discussion/DiscussionAnchor";
 import { IComment } from "../../../components/discussion/DiscussionItem";
 import DiscussionTopic from "../../../components/discussion/DiscussionTopic";
-import { useEffect, useLayoutEffect, useState } from "react";
 
 const Widget = () => {
   const { id } = useParams(); //url 参数
   const navigate = useNavigate();
   const [discussion, setDiscussion] = useState<IComment>();
+  const [anchorInfo, setAnchorInfo] = useState<IAnchor>();
   const href = window.location.href.split("#");
   const anchor = href.length > 1 ? href[1] : undefined;
 
+  const book = anchorInfo?.sentence?.book;
+  const para = anchorInfo?.sentence?.paragraph;
+  let openPara: number[] = [];
+  if (para) {
+    openPara = [para - 1, para, para + 1];
+  }
+  const linkId = `${book}-${para}`;
+  const linkChannel = anchorInfo?.sentence?.channel.id;
+  let linkOpen = `/article/para/${linkId}?mode=edit&book=${book}&par=${openPara.join(
+    ","
+  )}&channel=${linkChannel}&topic=${id}&dis_type=sentence`;
+  if (anchor) {
+    linkOpen += `&comment=${anchor}`;
+  }
   return (
     <>
-      <CommentAnchor resId={discussion?.resId} resType={discussion?.resType} />
+      {anchorInfo ? <Link to={linkOpen}>在翻译界面中打开</Link> : undefined}
+
+      <CommentAnchor
+        resId={discussion?.resId}
+        resType={discussion?.resType}
+        onLoad={(value: IAnchor) => {
+          setAnchorInfo(value);
+        }}
+      />
       <Divider></Divider>
       <Card
         title={

dashboard/src/reducers/discussion.ts

@@ -13,6 +13,8 @@ export interface IShowDiscussion {
   type: "discussion" | "pr";
   resType?: TResType;
   resId?: string;
+  topic?: string;
+  comment?: string;
 }
 export interface ICount {
   count: number;