Merge pull request #1176 from visuddhinanda/agile

lazy load

dashboard/src/assets/icon/index.tsx

@@ -163,6 +163,22 @@ const ParagraphOutlined = () => (
     ></path>
   </svg>
 );
+
+const ProgressOutlined = () => (
+  <svg
+    viewBox="0 0 1024 1024"
+    version="1.1"
+    xmlns="http://www.w3.org/2000/svg"
+    p-id="2309"
+    width="1em"
+    height="1em"
+  >
+    <path
+      d="M537.6 469.7088V486.4h409.6v25.6A435.2 435.2 0 1 1 512 76.8h25.6v392.9088zM128 512a384 384 0 0 0 767.1808 25.6H486.4V512 128.8192A384 384 0 0 0 128 512z m794.6752-144.3328a25.6 25.6 0 0 1-48.2816 16.9984 385.1264 385.1264 0 0 0-235.3152-235.1616 25.6 25.6 0 0 1 16.9472-48.2816 436.3264 436.3264 0 0 1 266.6496 266.4448z"
+      p-id="2310"
+    ></path>
+  </svg>
+);
 export const DictIcon = (props: Partial<CustomIconComponentProps>) => (
   <Icon component={DictSvg} {...props} />
 );
@@ -201,3 +217,7 @@ export const ArticleOutlinedIcon = (
 export const ParagraphOutlinedIcon = (
   props: Partial<CustomIconComponentProps>
 ) => <Icon component={ParagraphOutlined} {...props} />;
+
+export const ProgressOutlinedIcon = (
+  props: Partial<CustomIconComponentProps>
+) => <Icon component={ProgressOutlined} {...props} />;

dashboard/src/components/article/Article.tsx

@@ -53,13 +53,12 @@ export type ArticleType =
  * exercise-list/articleId?course=id&exercise=id&mode=ArticleMode
  * sent-original/id
  */
-interface IWidgetArticle {
+interface IWidget {
   type?: ArticleType;
-  id?: string;
+  articleId?: string;
   book?: string | null;
   para?: string | null;
   channelId?: string | null;
-  articleId?: string;
   anthologyId?: string;
   courseId?: string;
   exerciseId?: string;
@@ -72,7 +71,6 @@ interface IWidgetArticle {
 }
 const ArticleWidget = ({
   type,
-  id,
   book,
   para,
   channelId,
@@ -86,7 +84,7 @@ const ArticleWidget = ({
   onArticleChange,
   onFinal,
   onLoad,
-}: IWidgetArticle) => {
+}: IWidget) => {
   const [articleData, setArticleData] = useState<IArticleDataResponse>();
   const [articleHtml, setArticleHtml] = useState<string[]>(["<span />"]);
   const [extra, setExtra] = useState(<></>);
@@ -348,6 +346,8 @@ const ArticleWidget = ({
     });
     return;
   };
+
+  //const comment = <CommentListCard resId={articleData?.uid} resType="article" />
   return (
     <div>
       {showSkeleton ? (
@@ -384,7 +384,6 @@ const ArticleWidget = ({
 
       {extra}
       <Divider />
-      <CommentListCard resId={articleData?.uid} resType="article" />
     </div>
   );
 };

dashboard/src/components/article/Navigate.tsx

@@ -0,0 +1,79 @@
+import { Button, Space, Typography } from "antd";
+import { useEffect, useState } from "react";
+import { DoubleRightOutlined, DoubleLeftOutlined } from "@ant-design/icons";
+
+import { get } from "../../request";
+import { ArticleType } from "./Article";
+
+const { Paragraph } = Typography;
+
+interface INavButton {
+  title: string;
+  subtitle: string;
+  id: string;
+}
+interface INavResponse {
+  ok: boolean;
+  message: string;
+  data: {
+    prev?: INavButton;
+    next?: INavButton;
+  };
+}
+
+interface IWidget {
+  type?: ArticleType;
+  articleId?: string;
+  onChange?: Function;
+}
+const NavigateWidget = ({ type, articleId, onChange }: IWidget) => {
+  const [prev, setPrev] = useState<INavButton>();
+  const [next, setNext] = useState<INavButton>();
+
+  useEffect(() => {
+    if (type && articleId) {
+      get<INavResponse>(`/v2/article-nav?type=${type}&id=${articleId}`).then(
+        (json) => {
+          if (json.ok) {
+            setPrev(json.data.prev);
+            setNext(json.data.next);
+          }
+        }
+      );
+    }
+  }, [articleId, type]);
+  return (
+    <Paragraph style={{ display: "flex", justifyContent: "space-between" }}>
+      <Button
+        disabled={typeof prev === "undefined"}
+        size="large"
+        onClick={(event: React.MouseEvent<HTMLElement, MouseEvent>) => {
+          if (typeof onChange !== "undefined" && prev) {
+            onChange(event, prev.id);
+          }
+        }}
+      >
+        <Space>
+          <DoubleLeftOutlined />
+          {prev?.title}
+        </Space>
+      </Button>
+      <Button
+        size="large"
+        disabled={typeof next === "undefined"}
+        onClick={(event: React.MouseEvent<HTMLElement, MouseEvent>) => {
+          if (typeof onChange !== "undefined" && next) {
+            onChange(event, next.id);
+          }
+        }}
+      >
+        <Space>
+          {next?.title}
+          <DoubleRightOutlined />
+        </Space>
+      </Button>
+    </Paragraph>
+  );
+};
+
+export default NavigateWidget;

dashboard/src/components/corpus/ChapterInChannel.tsx

@@ -10,6 +10,7 @@ import { useIntl } from "react-intl";
 import { Link } from "react-router-dom";
 import { IStudio } from "../auth/StudioName";
 import { useState } from "react";
+import { ProgressOutlinedIcon } from "../../assets/icon";
 
 const { Text } = Typography;
 
@@ -96,7 +97,7 @@ const ChapterInChannelWidget = ({
                     {item.hit} | <LikeOutlined />
                     {item.like} |
                     <TimeShow time={item.updatedAt} /> |
-                    <EyeOutlined />
+                    <ProgressOutlinedIcon />
                     {`${item.progress}%`}
                   </Space>
                 </Text>

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

@@ -15,6 +15,7 @@ import Article, {
 
 import MainMenu from "../../../components/article/MainMenu";
 import ModeSwitch from "../../../components/article/ModeSwitch";
+import Navigate from "../../../components/article/Navigate";
 import RightPanel, { TPanelName } from "../../../components/article/RightPanel";
 import ToolButtonDiscussion from "../../../components/article/ToolButtonDiscussion";
 import ToolButtonNav from "../../../components/article/ToolButtonNav";
@@ -231,6 +232,27 @@ const Widget = () => {
               }}
               onLoad={(article: IArticleDataResponse) => {}}
             />
+            <Navigate
+              type={type as ArticleType}
+              articleId={id}
+              onChange={(
+                event: React.MouseEvent<HTMLElement, MouseEvent>,
+                newId: string
+              ) => {
+                let url = `/article/${type}/${newId}?mode=${currMode}`;
+                searchParams.forEach((value, key) => {
+                  console.log(value, key);
+                  if (key !== "mode") {
+                    url += `&${key}=${value}`;
+                  }
+                });
+                if (event.ctrlKey || event.metaKey) {
+                  window.open(url, "_blank");
+                } else {
+                  navigate(url);
+                }
+              }}
+            />
           </div>
           <div key="RightPanel">
             <AnchorNav open={anchorNavOpen} />