Merge pull request #1533 from visuddhinanda/agile

Agile #1527

dashboard/src/components/discussion/DiscussionShow.tsx

@@ -109,11 +109,16 @@ const DiscussionShowWidget = ({
     switch (e.key) {
       case "copy-link":
         let url = `/discussion/topic/`;
-        if (data.parent) {
-          url += `${data.parent}#${data.id}`;
+        if (data.id) {
+          if (data.parent) {
+            url += `${data.parent}#${data.id}`;
+          } else {
+            url += data.id;
+          }
         } else {
-          url += data.id;
+          url += `${data.tplId}?tpl=true&resId=${data.resId}&resType=${data.resType}`;
         }
+
         navigator.clipboard.writeText(fullUrl(url)).then(() => {
           message.success("链接地址已经拷贝到剪贴板");
         });

dashboard/src/components/discussion/DiscussionTopic.tsx

@@ -1,4 +1,4 @@
-import { useState } from "react";
+import { useEffect, useState } from "react";
 
 import DiscussionTopicInfo from "./DiscussionTopicInfo";
 import DiscussionTopicChildren from "./DiscussionTopicChildren";
@@ -26,11 +26,14 @@ const DiscussionTopicWidget = ({
   const [count, setCount] = useState<number>();
   const [currResId, setCurrResId] = useState<string>();
   const [currTopic, setCurrTopic] = useState<IComment | undefined>(topic);
+  useEffect(() => {
+    setCurrTopic(topic);
+  }, [topic]);
   return (
     <>
       <DiscussionTopicInfo
         topicId={topicId}
-        topic={topic}
+        topic={currTopic}
         childrenCount={count}
         onReady={(value: IComment) => {
           setCurrResId(value.resId);

dashboard/src/components/discussion/DiscussionTopicInfo.tsx

@@ -24,7 +24,9 @@ const DiscussionTopicInfoWidget = ({
   onClose,
 }: IWidget) => {
   const [data, setData] = useState<IComment | undefined>(topic);
-
+  useEffect(() => {
+    setData(topic);
+  }, [topic]);
   useEffect(() => {
     setData((origin) => {
       if (typeof origin !== "undefined") {

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

@@ -16,11 +16,20 @@ const Widget = () => {
       <Divider></Divider>
       <DiscussionListCard
         resId={id}
+        resType={type as TResType}
         onSelect={(
           e: React.MouseEvent<HTMLSpanElement, MouseEvent>,
           comment: IComment
         ) => {
-          navigate(`/discussion/topic/${comment.id}`);
+          if (comment.id) {
+            navigate(`/discussion/topic/${comment.id}`);
+          } else {
+            navigate(
+              `/discussion/topic/${
+                comment.tplId
+              }?tpl=true&resId=${id}&resType=${type as TResType}`
+            );
+          }
         }}
         onReply={(comment: IComment) =>
           navigate(`/discussion/topic/${comment.id}`)

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

@@ -1,6 +1,6 @@
-import { useState } from "react";
-import { Link, useNavigate } from "react-router-dom";
-import { Button, Card, Divider } from "antd";
+import { useEffect, useState } from "react";
+import { Link, useNavigate, useSearchParams } from "react-router-dom";
+import { Button, Card, Divider, message } from "antd";
 import { useParams } from "react-router-dom";
 import { ArrowLeftOutlined } from "@ant-design/icons";
 
@@ -9,12 +9,52 @@ import CommentAnchor, {
 } from "../../../components/discussion/DiscussionAnchor";
 import { IComment } from "../../../components/discussion/DiscussionItem";
 import DiscussionTopic from "../../../components/discussion/DiscussionTopic";
+import { TResType } from "../../../components/discussion/DiscussionListCard";
+import { get } from "../../../request";
+import { IArticleResponse } from "../../../components/api/Article";
 
 const Widget = () => {
   const { id } = useParams(); //url 参数
   const navigate = useNavigate();
+  const [searchParams, setSearchParams] = useSearchParams();
   const [discussion, setDiscussion] = useState<IComment>();
+  const [topic, setTopic] = useState<IComment>();
   const [anchorInfo, setAnchorInfo] = useState<IAnchor>();
+  const isTpl = searchParams.get("tpl");
+  const resId = searchParams.get("resId");
+  const resType = searchParams.get("resType");
+
+  useEffect(() => {
+    if (isTpl) {
+      const url = `/v2/article/${id}`;
+      console.log("url", url);
+      get<IArticleResponse>(url).then((json) => {
+        console.log("json", json);
+        if (!json.ok) {
+          message.error(json.message);
+          return;
+        }
+        const value = json.data;
+        if (typeof value.editor === "undefined" || resId === null) {
+          console.error("no editor or resId");
+          return;
+        }
+        const topicInfo: IComment = {
+          resId: resId,
+          resType: resType as TResType,
+          user: value.editor,
+          title: value.title,
+          tplId: id,
+          content: value.content,
+          createdAt: value.created_at,
+          updatedAt: value.updated_at,
+        };
+        console.log("topicInfo", topicInfo);
+        setTopic(topicInfo);
+      });
+    }
+  }, [id, isTpl, resId, resType]);
+
   const href = window.location.href.split("#");
   const anchor = href.length > 1 ? href[1] : undefined;
 
@@ -37,8 +77,8 @@ const Widget = () => {
       {anchorInfo ? <Link to={linkOpen}>在翻译界面中打开</Link> : undefined}
 
       <CommentAnchor
-        resId={discussion?.resId}
-        resType={discussion?.resType}
+        resId={resId ? resId : discussion?.resId}
+        resType={resType ? (resType as TResType) : discussion?.resType}
         onLoad={(value: IAnchor) => {
           setAnchorInfo(value);
         }}
@@ -48,11 +88,13 @@ const Widget = () => {
         title={
           <Button
             type="link"
-            disabled={discussion ? false : true}
+            disabled={resId ? false : discussion ? false : true}
             icon={<ArrowLeftOutlined />}
             onClick={() =>
               navigate(
-                `/discussion/show/${discussion?.resType}/${discussion?.resId}`
+                `/discussion/show/${resType ? resType : discussion?.resType}/${
+                  resId ? resId : discussion?.resId
+                }`
               )
             }
           >
@@ -61,7 +103,9 @@ const Widget = () => {
         }
       >
         <DiscussionTopic
-          topicId={id}
+          resType={resType ? (resType as TResType) : undefined}
+          topicId={isTpl ? undefined : id}
+          topic={topic}
           focus={anchor}
           onTopicReady={(value: IComment) => {
             console.log("onTopicReady");