变量名用小驼峰

dashboard/src/components/channel/ChannelList.tsx

@@ -1,61 +1,61 @@
-import { useState } from "react";
+import { useState, useEffect } from "react";
 import { List } from "antd";
 import ChannelListItem from "./ChannelListItem";
 import type { ChannelInfoProps } from "../api/Channel";
-import { Collapse } from "antd";
+import { ApiFetch } from "../../utils";
+import { IApiResponseChannelList } from "../api/Corpus";
 
-const { Panel } = Collapse;
-
-export type ChannelFilterProps = {
-	ChapterProgress: number;
+export interface ChannelFilterProps {
+	chapterProgress: number;
 	lang: string;
-	ChannelType: string;
-};
-type IWidgetChannelList = {
-	props?: ChannelFilterProps;
-};
+	channelType: string;
+}
+interface IWidgetChannelList {
+	filter?: ChannelFilterProps;
+}
 const defaultChannelFilterProps: ChannelFilterProps = {
-	ChapterProgress: 0.9,
-	lang: "en",
-	ChannelType: "translation",
+	chapterProgress: 0.9,
+	lang: "zh",
+	channelType: "translation",
 };
 
-const Widget = ({ props = defaultChannelFilterProps }: IWidgetChannelList) => {
-	//const [tableData, setTableData] = useState();
-	//: ChannelInfoProps[]
-	const tableData: ChannelInfoProps[] = [
-		{
-			ChannelName: "正式版",
-			ChannelId: "344",
-			ChannelType: "translation",
-			StudioName: "visuddhinadna",
-			StudioId: "2333",
-			StudioType: "org",
-		},
-		{
-			ChannelName: "中文译文",
-			ChannelId: "2345",
-			ChannelType: "translation",
-			StudioName: "Kosalla",
-			StudioId: "1234",
-			StudioType: "people",
-		},
-	];
+const Widget = ({ filter = defaultChannelFilterProps }: IWidgetChannelList) => {
+	const defualt: ChannelInfoProps[] = [];
+	const [tableData, setTableData] = useState(defualt);
+
+	useEffect(() => {
+		console.log("palichapterlist useEffect");
+		let url = `/progress?view=channel&channel_type=${filter.channelType}&lang=${filter.lang}&progress=${filter.chapterProgress}`;
+		ApiFetch(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);
+		});
+	}, [filter]);
 	return (
-		<Collapse defaultActiveKey={["1"]} expandIconPosition="start">
-			<Panel header="版本" key="1">
-				<List
-					itemLayout="vertical"
-					size="large"
-					dataSource={tableData}
-					renderItem={(item) => (
-						<List.Item>
-							<ChannelListItem data={item} />
-						</List.Item>
-					)}
-				/>
-			</Panel>
-		</Collapse>
+		<>
+			<h3>Channel</h3>
+			<List
+				itemLayout="vertical"
+				size="large"
+				dataSource={tableData}
+				renderItem={(item) => (
+					<List.Item>
+						<ChannelListItem data={item} />
+					</List.Item>
+				)}
+			/>
+		</>
 	);
 };