:fire: fetchData 移动到 useEffect

dashboard/src/components/corpus/ChapterTagList.tsx

@@ -1,61 +1,87 @@
-import { message } from "antd";
 import { useState, useEffect } from "react";
 
 import { get } from "../../request";
-import { IApiChapterTag, IApiResponseChapterTagList } from "../api/Corpus";
+import type { ChannelFilterProps } from "../channel/ChannelList";
+import { ITagData } from "./ChapterTag";
+import TagArea from "../tag/TagArea";
 
-import ChapterTag, { ITagData } from "./ChapterTag";
+interface IAppendTagData {
+  id: string;
+  name: string;
+  count: number;
+}
+interface IChapterTagResponse {
+  ok: boolean;
+  message: string;
+  data: {
+    rows: IAppendTagData[];
+    count: number;
+  };
+}
 
 interface IWidget {
+  filter?: ChannelFilterProps;
+  progress?: number;
+  lang?: string;
+  type?: string;
+  tags?: string[];
   max?: number;
   onTagClick?: Function;
 }
-const Widget = ({ max, onTagClick }: IWidget) => {
-  const [tableData, setTableData] = useState<ITagData[]>([]);
+
+const Widget = ({
+  progress = 0.9,
+  lang = "zh",
+  type = "translation",
+  tags = [],
+  max,
+  onTagClick,
+}: IWidget) => {
+  const [tag, setTag] = useState<ITagData[]>([]);
 
   useEffect(() => {
-    console.log("useEffect");
-    fetchData();
-  }, []);
+    const strTags = tags.length > 0 ? "&tags=" + tags.join() : "";
+    const url = `/v2/tag?view=chapter${strTags}&progress=${progress}&lang=${lang}&channel_type=${type}`;
+    console.log("tag list ajax", url);
+    get<IChapterTagResponse>(url).then((json) => {
+      if (json.ok) {
+        if (json.data.count === 0) {
+          setTag([]);
+        } else {
+          const max = json.data.rows.sort((a, b) => b.count - a.count)[0].count;
+          const data: ITagData[] = json.data.rows
+            .filter((value) => value.count < max)
+            .map((item) => {
+              return {
+                key: item.name,
+                title: item.name,
+                count: item.count,
+              };
+            });
+          setTag(data);
+        }
+      } else {
+        setTag([]);
+      }
+    });
+  }, [progress, lang, type, tags]);
 
-  function fetchData() {
-    get(`/v2/progress?view=chapter-tag`)
-      .then((response) => {
-        const json = response as unknown as IApiResponseChapterTagList;
-        const tags: IApiChapterTag[] = json.data.rows;
-        let newTags: ITagData[] = tags.map((item) => {
-          return {
-            key: item.name,
-            title: item.name,
-            count: item.count,
-          };
-        });
-        setTableData(newTags);
-      })
-      .catch((error) => {
-        message.error(error);
-      });
-  }
-  let iTag = max ? max : tableData.length;
-  if (iTag > tableData.length) {
-    iTag = tableData.length;
-  }
   return (
-    <>
-      {tableData.map((item, id) => {
-        return (
-          <ChapterTag
-            data={item}
-            key={id}
-            onTagClick={(key: string) => {
-              if (typeof onTagClick !== "undefined") {
-                onTagClick(key);
-              }
-            }}
-          />
-        );
-      })}
-    </>
+    <div>
+      {tag.length === 0 ? (
+        "无"
+      ) : (
+        <TagArea
+          max={max}
+          data={tag}
+          onTagClick={(tag: string) => {
+            if (typeof onTagClick !== "undefined") {
+              onTagClick(tag);
+            }
+          }}
+        />
+      )}
+    </div>
   );
 };