Merge pull request #1658 from visuddhinanda/agile

Agile #1650

dashboard/src/components/article/PaliTextToc.tsx

@@ -46,7 +46,6 @@ const PaliTextTocWidget = ({ book, para, channel, onSelect }: IWidget) => {
 
   return (
     <TocTree
-      randomKey={false}
       treeData={tocList}
       selectedKeys={selectedKeys}
       expandedKeys={expandedKeys}

dashboard/src/components/article/TocTree.tsx

@@ -23,14 +23,13 @@ export interface TreeNodeData {
 
 function tocGetTreeData(
   listData: ListNodeData[],
-  active = "",
-  randomKey = true
+  active = ""
 ): [TreeNodeData[] | undefined, IIdMap[]] {
   let treeData: TreeNodeData[] = [];
   let tocActivePath: TreeNodeData[] = [];
   let treeParents = [];
   let rootNode: TreeNodeData = {
-    key: randomKey ? randomString() : "0",
+    key: randomString(),
     id: "0",
     title: "root",
     level: 0,
@@ -44,7 +43,7 @@ function tocGetTreeData(
   for (let index = 0; index < listData.length; index++) {
     const element = listData[index];
     let newNode: TreeNodeData = {
-      key: randomKey ? randomString() : element.key,
+      key: randomString(),
       id: element.key,
       title: element.title,
       level: element.level,
@@ -105,13 +104,11 @@ interface IWidgetTocTree {
   treeData?: ListNodeData[];
   expandedKeys?: Key[];
   selectedKeys?: Key[];
-  randomKey?: boolean;
   onSelect?: Function;
 }
 
 const TocTreeWidget = ({
   treeData,
-  randomKey = true,
   expandedKeys,
   selectedKeys,
   onSelect,
@@ -123,7 +120,7 @@ const TocTreeWidget = ({
 
   useEffect(() => {
     if (treeData && treeData.length > 0) {
-      const [data, idMap] = tocGetTreeData(treeData, "", randomKey);
+      const [data, idMap] = tocGetTreeData(treeData, "");
       setTree(data);
       setKeyIdMap(idMap);
       console.log(" tree data", data);
@@ -133,12 +130,36 @@ const TocTreeWidget = ({
   }, [treeData]);
 
   useEffect(() => {
-    setSelected(selectedKeys);
-  }, [selectedKeys]);
+    if (!keyIdMap) {
+      return;
+    }
+    const realKey = selectedKeys?.map((item) => {
+      const mapIndex = keyIdMap?.findIndex((value) => value.id === item);
+      if (mapIndex !== -1) {
+        return keyIdMap[mapIndex].key;
+      } else {
+        return "";
+      }
+    });
+    console.log("realKey", realKey);
+    setSelected(realKey);
+  }, [keyIdMap, selectedKeys]);
 
   useEffect(() => {
-    setExpanded(expandedKeys);
-  }, [expandedKeys]);
+    if (!keyIdMap) {
+      return;
+    }
+    const realKey = expandedKeys?.map((item) => {
+      const mapIndex = keyIdMap?.findIndex((value) => value.id === item);
+      if (mapIndex !== -1) {
+        return keyIdMap[mapIndex].key;
+      } else {
+        return "";
+      }
+    });
+    console.log("realKey", realKey);
+    setExpanded(realKey);
+  }, [expandedKeys, keyIdMap]);
 
   console.log("selected", selected);
   return (

dashboard/src/components/template/ParaHandle.tsx

@@ -1,20 +1,24 @@
 import { Button, Divider, Dropdown, MenuProps, message } from "antd";
-import { useNavigate } from "react-router-dom";
+import { useNavigate, useSearchParams } from "react-router-dom";
 import { fullUrl } from "../../utils";
 
 interface IWidgetParaHandleCtl {
   book: number;
   para: number;
+  mode?: string;
   channels?: string[];
   sentences: string[];
 }
 const ParaHandleCtl = ({
   book,
   para,
+  mode = "read",
   channels,
   sentences,
 }: IWidgetParaHandleCtl) => {
   const navigate = useNavigate();
+  const [searchParams] = useSearchParams();
+
   const items: MenuProps["items"] = [
     {
       key: "solo",
@@ -30,8 +34,20 @@ const ParaHandleCtl = ({
     },
   ];
   const onClick: MenuProps["onClick"] = (e) => {
-    const channelQuery = channels?.join("_");
-    const url = `/article/para/${book}-${para}?mode=read&book=${book}&par=${para}&channel=${channelQuery}`;
+    /**
+     * TODO 临时的解决方案。以后应该从传参获取其他参数，然后reducer 通知更新。
+     * 因为如果是Article组件被嵌入其他页面。不能直接更新浏览器，而是应该更新Article组件内部
+     */
+    let url = `/article/para/${book}-${para}?book=${book}&par=${para}`;
+    let param: string[] = [];
+    searchParams.forEach((value, key) => {
+      if (key !== "book" && key !== "par") {
+        param.push(`${key}=${value}`);
+      }
+    });
+    if (param.length > 0) {
+      url += "&" + param.join("&");
+    }
     switch (e.key) {
       case "solo":
         navigate(url);