add count

dashboard/src/components/channel/ChannelList.tsx

@@ -1,16 +1,22 @@
 import { useState, useEffect } from "react";
-import { List } from "antd";
+import { List, message, Space, Tag } from "antd";
 
-import type { ChannelInfoProps } from "../api/Channel";
+import type { ChannelInfoProps, IChannelApiData } from "../api/Channel";
 import { IApiResponseChannelList } from "../api/Corpus";
 import { get } from "../../request";
 import ChannelListItem from "./ChannelListItem";
+import { IStudio } from "../auth/StudioName";
 
 export interface ChannelFilterProps {
   chapterProgress: number;
   lang: string;
   channelType: string;
 }
+interface IChannelList {
+  channel: IChannelApiData;
+  studio: IStudio;
+  count: number;
+}
 interface IWidgetChannelList {
   filter?: ChannelFilterProps;
 }
@@ -21,25 +27,29 @@ const defaultChannelFilterProps: ChannelFilterProps = {
 };
 
 const Widget = ({ filter = defaultChannelFilterProps }: IWidgetChannelList) => {
-  const [tableData, setTableData] = useState<ChannelInfoProps[]>([]);
+  const [tableData, setTableData] = useState<IChannelList[]>([]);
 
   useEffect(() => {
     console.log("palichapterlist useEffect");
     let url = `/v2/progress?view=channel&channel_type=${filter.channelType}&lang=${filter.lang}&progress=${filter.chapterProgress}`;
-    get(url).then(function (myJson) {
-      console.log("ajex", myJson);
-      const data = myJson as unknown as IApiResponseChannelList;
-      const newData: ChannelInfoProps[] = data.data.rows.map((item) => {
-        return {
-          channelName: item.channel.name,
-          channelId: item.channel.uid,
-          channelType: item.channel.type,
-          studioName: "V",
-          studioId: "123",
-          studioType: "p",
-        };
-      });
-      setTableData(newData);
+    get<IApiResponseChannelList>(url).then(function (json) {
+      if (json.ok) {
+        console.log("channel", json.data);
+        const newData: IChannelList[] = json.data.rows.map((item) => {
+          return {
+            channel: {
+              name: item.channel.name,
+              id: item.channel.uid,
+              type: item.channel.type,
+            },
+            studio: item.studio,
+            count: item.count,
+          };
+        });
+        setTableData(newData);
+      } else {
+        message.error(json.message);
+      }
     });
   }, [filter]);
   return (
@@ -47,11 +57,14 @@ const Widget = ({ filter = defaultChannelFilterProps }: IWidgetChannelList) => {
       <h3>Channel</h3>
       <List
         itemLayout="vertical"
-        size="large"
+        size="small"
         dataSource={tableData}
         renderItem={(item) => (
           <List.Item>
-            <ChannelListItem data={item} />
+            <Space>
+              <ChannelListItem channel={item.channel} studio={item.studio} />
+              <Tag>{item.count}</Tag>
+            </Space>
           </List.Item>
         )}
       />