587 lines
14 KiB
TypeScript
587 lines
14 KiB
TypeScript
'use client'
|
|
|
|
import React, { useEffect, useRef, useState } from 'react';
|
|
|
|
|
|
|
|
import service from '@/lib/http/service';
|
|
import toast from 'react-hot-toast';
|
|
import { Button } from '../ui/button';
|
|
import { useRouter } from 'next/navigation';
|
|
import { Loading, LoadingView } from '../ui/loading';
|
|
import { Pagination } from 'antd';
|
|
// import Pagination from './ui/pagination';
|
|
|
|
|
|
|
|
import { Card, QACard, TagsViews } from './card';
|
|
import { FadeIn } from '../landing/fade-in';
|
|
import { AnimatedList, ArticleList } from '../landing/animated-list';
|
|
import { useTranslation } from 'react-i18next';
|
|
|
|
const PageSize = 12
|
|
|
|
interface DataItem {
|
|
image: string;
|
|
title: string;
|
|
time: string;
|
|
summary: string;
|
|
category: string;
|
|
}
|
|
|
|
|
|
export interface TagItem {
|
|
name: string;
|
|
value: string;
|
|
}
|
|
|
|
|
|
export interface ArticleData {
|
|
id: number;
|
|
org_id: number;
|
|
spider_id: number;
|
|
tag: string;
|
|
category: string;
|
|
main_title: string;
|
|
sub_title: string;
|
|
summary: string;
|
|
keywords: string[] | string;
|
|
seo_keywords: string[] | string;
|
|
tags: string[];
|
|
url: string;
|
|
image_url: string;
|
|
content: string;
|
|
is_hotspot: boolean;
|
|
is_overwritten: boolean;
|
|
is_deleted: boolean;
|
|
is_replicate: boolean;
|
|
is_pushed: boolean;
|
|
created_time: string;
|
|
updated_time: string;
|
|
extra_data: {
|
|
logs: any | null;
|
|
};
|
|
}
|
|
|
|
export interface LodingInfo {
|
|
total?: number;
|
|
loding: boolean;
|
|
current: number;
|
|
pageSize: number;
|
|
}
|
|
|
|
|
|
|
|
export interface QAData {
|
|
id: number;
|
|
org_id: number;
|
|
question: string;
|
|
answer: string;
|
|
state: number;
|
|
is_overwritten: boolean;
|
|
is_replicate: boolean;
|
|
is_deleted: boolean;
|
|
created_time: string;
|
|
updated_time: string;
|
|
extra_data: {
|
|
logs: any | null;
|
|
};
|
|
}
|
|
|
|
interface NineGridProps {
|
|
// data: DataItem[];
|
|
categoriesRef: React.MutableRefObject<TagItem[]>
|
|
}
|
|
|
|
const NineGrid: React.FC<NineGridProps> = ({
|
|
categoriesRef
|
|
}) => {
|
|
|
|
const { t, i18n } = useTranslation()
|
|
|
|
const language = i18n.language
|
|
|
|
const [selectedCategory, setSelectedCategory] = useState(categoriesRef.current[0].value);
|
|
|
|
const [articleDataList, setArticleDataList] = useState([]);
|
|
const [currentPage, setCurrentPage] = React.useState(0);
|
|
|
|
const [isQA, setIsQA] = useState(false);
|
|
const [qaData, setQaData] = useState([]);
|
|
// const [totalPages, setTotalPages] = useState(0);
|
|
// const [totalPagesQA, setTotalPagesQA] = useState(0);
|
|
const [currentPageQA, setCurrentPageQA] = React.useState(0);
|
|
|
|
const [initLoading, setInitLoading] = useState<boolean>(false);
|
|
|
|
const [paginationConfig, setPaginationConfig] = useState({
|
|
pageSize: PageSize, // Number of items per page
|
|
current: 1, // Current page number
|
|
total: 0, // Total number of items
|
|
|
|
// Optional: You can customize other pagination options as needed
|
|
showSizeChanger: true,
|
|
showQuickJumper: true,
|
|
pageSizeOptions: ['10', '20', '30', '40'],
|
|
})
|
|
|
|
const [paginationConfigQA, setPaginationConfigQA] = useState({
|
|
pageSize: PageSize, // Number of items per page
|
|
current: 1, // Current page number
|
|
total: 0, // Total number of items
|
|
|
|
// Optional: You can customize other pagination options as needed
|
|
showSizeChanger: true,
|
|
showQuickJumper: true,
|
|
pageSizeOptions: ['10', '20', '30', '40'],
|
|
})
|
|
|
|
// const [lodingInfos, setLodingInfos] = useState<LodingInfo[]>([
|
|
// { total: 0, loding: true, current: 1, pageSize: 10 },
|
|
// { total: 0, loding: true, current: 1, pageSize: 10 },
|
|
// { total: 0, loding: true, current: 1, pageSize: 10 },
|
|
// ]);
|
|
|
|
|
|
|
|
|
|
const getQAList = async (current: number) => {
|
|
|
|
if (initLoading) return
|
|
|
|
|
|
setInitLoading(true);
|
|
await service.post('/api/v1/qa/list', {
|
|
language,
|
|
"page_no": current - 1,
|
|
"page_size": PageSize
|
|
}, {
|
|
headers: {
|
|
// 'Authorization': token
|
|
}
|
|
}).then(function (result: any) {
|
|
setInitLoading(false);
|
|
console.log("result:", result)
|
|
|
|
if (result && result.header.code != 0) {
|
|
|
|
toast.error(result.header.message)
|
|
return
|
|
}
|
|
|
|
setQaData(result.data.list);
|
|
// setTotalPagesQA(result.header.total)
|
|
|
|
setPaginationConfigQA((prevConfig) => ({
|
|
...prevConfig,
|
|
|
|
// pageSize: 10,
|
|
current: current,
|
|
total: result.header.total,
|
|
}));
|
|
|
|
}).catch((err) => {
|
|
setInitLoading(false);
|
|
console.log(err);
|
|
// if (err.errors[0].code === "form_identifier_not_found") {
|
|
// props.setAccountNotFound(true);
|
|
// props.email(email);
|
|
// } else {
|
|
// props.setError("Sorry, We couldn't sign you in. Please try again later");
|
|
// }
|
|
});
|
|
};
|
|
|
|
async function getNewListFunc(tag: string, current: number) {
|
|
|
|
|
|
if (initLoading) return
|
|
|
|
setInitLoading(true);
|
|
|
|
tag = tag == categoriesRef.current[0].value ? "" : tag
|
|
|
|
|
|
await service.post('/api/v1/news/list', {
|
|
"id": 0,
|
|
language,
|
|
// "tag": selectedCategory == categories[0] ? "" : selectedCategory, // #Blockchain
|
|
"tag": tag,
|
|
"page_no": current - 1,
|
|
"page_size": PageSize
|
|
}, {
|
|
headers: {
|
|
// 'Authorization': token
|
|
}
|
|
}).then(function (result: any) {
|
|
|
|
|
|
// if (isMounted) {
|
|
console.log("result:", result)
|
|
|
|
if (result && result.header.code != 0) {
|
|
|
|
toast.error(result.header.message)
|
|
return
|
|
}
|
|
|
|
setArticleDataList(result.data.list);
|
|
// setTotalPages(result.header.total)
|
|
|
|
setPaginationConfig((prevConfig) => ({
|
|
...prevConfig,
|
|
|
|
// pageSize: 10,
|
|
current: current,
|
|
total: result.header.total,
|
|
}));
|
|
|
|
setInitLoading(false);
|
|
// }
|
|
|
|
|
|
}).catch((err) => {
|
|
setInitLoading(false);
|
|
console.log(err);
|
|
// if (err.errors[0].code === "form_identifier_not_found") {
|
|
// props.setAccountNotFound(true);
|
|
// props.email(email);
|
|
// } else {
|
|
// props.setError("Sorry, We couldn't sign you in. Please try again later");
|
|
// }
|
|
});
|
|
}
|
|
|
|
useEffect(() => {
|
|
let isMounted = true
|
|
|
|
getNewListFunc("", 1)
|
|
|
|
|
|
return () => {
|
|
isMounted = false
|
|
}
|
|
}, [currentPage, selectedCategory])
|
|
|
|
|
|
useEffect(() => {
|
|
let isMounted = true
|
|
|
|
getQAList(1)
|
|
|
|
|
|
return () => {
|
|
isMounted = false
|
|
}
|
|
}, [currentPageQA])
|
|
|
|
const handlePageChange = (pageNumber: number) => {
|
|
console.log("handlePageChange", pageNumber)
|
|
setCurrentPage(pageNumber);
|
|
};
|
|
|
|
const handlePageChangeQA = (pageNumber: number) => {
|
|
console.log("handlePageChangeQA", pageNumber)
|
|
setCurrentPageQA(pageNumber);
|
|
};
|
|
|
|
|
|
|
|
return (
|
|
<div style={{
|
|
// width: '70%',
|
|
// margin: '0 auto'
|
|
}}
|
|
className='w-full lg:w-[70%] m-auto'
|
|
>
|
|
<TagsViews
|
|
categoriesRef={categoriesRef}
|
|
isQA={isQA}
|
|
selectedCategory={selectedCategory}
|
|
onChange={(category) => {
|
|
setIsQA(false)
|
|
setCurrentPage(0);
|
|
setSelectedCategory(category)
|
|
|
|
console.log("===onChange===", category)
|
|
|
|
getNewListFunc(category, 1)
|
|
}}
|
|
|
|
onClickQA={() => {
|
|
setIsQA(true)
|
|
getQAList(1)
|
|
|
|
}}
|
|
|
|
/>
|
|
|
|
{
|
|
!initLoading ? (!isQA ?
|
|
<div className=' lg:p-[0rem]'>
|
|
<div
|
|
// style={{
|
|
// display: 'grid',
|
|
// gridTemplateColumns: 'repeat(auto-fill, minmax(300px, 1fr))',
|
|
// gap: '16px',
|
|
// }}
|
|
className='p-[1rem] mb-[6rem] grid grid-cols-1 gap-8 lg:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-3'
|
|
>
|
|
{articleDataList.map((item: ArticleData, index) => {
|
|
return <ArticleList key={index} className="">
|
|
<Card {...item} />
|
|
</ArticleList>
|
|
})}
|
|
|
|
</div>
|
|
|
|
|
|
<div
|
|
className=' flex items-center justify-center lg:justify-center'
|
|
style={{
|
|
// display: "flex",
|
|
// alignItems: "center",
|
|
// justifyContent: "right",
|
|
// padding: "40px 0"
|
|
}}
|
|
>
|
|
<Pagination
|
|
current={paginationConfig.current}
|
|
pageSize={paginationConfig.pageSize}
|
|
showSizeChanger={false}
|
|
showTotal={(total, range) => t("show_total", { total })}
|
|
// pageSizeOptions={[10, 20, 50, 100]}
|
|
// onShowSizeChange={(current, size) => {
|
|
// console.log("onShowSizeChange: ", current, size)
|
|
|
|
// setTimeout(() => {
|
|
// setLodingInfos(prevState => {
|
|
// const newState = [...prevState];
|
|
// // newState[index].loding = true;
|
|
// paginationConfig.current = 1;
|
|
// paginationConfig.pageSize = size;
|
|
// return newState;
|
|
// });
|
|
// }, 0)
|
|
|
|
|
|
|
|
// }}
|
|
total={paginationConfig.total}
|
|
|
|
// showTotal={(total, range) => `${range[0]}-${range[1]} of ${total} items`}
|
|
|
|
onChange={(page) => {
|
|
console.log("onChange page:", page);
|
|
|
|
|
|
setPaginationConfig(prevConfig => ({
|
|
...prevConfig,
|
|
current: page,
|
|
// pageSize: pageSize
|
|
}));
|
|
|
|
getNewListFunc(selectedCategory, page)
|
|
|
|
|
|
}}
|
|
defaultPageSize={10}
|
|
defaultCurrent={1}
|
|
/>
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
: <div className=' lg:p-[0rem] '>
|
|
<div
|
|
style={{
|
|
|
|
// display: 'grid',
|
|
// gridTemplateColumns: 'repeat(auto-fill, minmax(450px, 1fr))',
|
|
// gap: '16px',
|
|
}}
|
|
|
|
className='p-[1rem] lg:p-[1.5rem] lg:mb-[10rem] grid grid-cols-1 gap-8 lg:grid-cols-2 xl:grid-cols-2 2xl:grid-cols-3 '
|
|
>
|
|
{qaData.map((qa: QAData, index) => {
|
|
return <AnimatedList key={index}>
|
|
<QACard {...qa} />
|
|
</AnimatedList>
|
|
})}
|
|
|
|
</div>
|
|
<div
|
|
className=' flex items-center justify-center lg:justify-center'
|
|
style={{
|
|
// display: "flex",
|
|
// alignItems: "center",
|
|
// justifyContent: "right",
|
|
// padding: "40px 0"
|
|
}}
|
|
>
|
|
<Pagination
|
|
current={paginationConfigQA.current}
|
|
pageSize={paginationConfigQA.pageSize}
|
|
showSizeChanger={false}
|
|
showTotal={(total, range) => t("show_total", { total })}
|
|
// pageSizeOptions={[10, 20, 50, 100]}
|
|
// onShowSizeChange={(current, size) => {
|
|
// console.log("onShowSizeChange: ", current, size)
|
|
|
|
// setTimeout(() => {
|
|
// setLodingInfos(prevState => {
|
|
// const newState = [...prevState];
|
|
// // newState[index].loding = true;
|
|
// paginationConfig.current = 1;
|
|
// paginationConfig.pageSize = size;
|
|
// return newState;
|
|
// });
|
|
// }, 0)
|
|
|
|
|
|
|
|
// }}
|
|
total={paginationConfigQA.total}
|
|
|
|
// showTotal={(total, range) => `${range[0]}-${range[1]} of ${total} items`}
|
|
|
|
onChange={(page) => {
|
|
console.log("onChange page:", page);
|
|
|
|
setPaginationConfigQA(prevConfig => ({
|
|
...prevConfig,
|
|
current: page,
|
|
// pageSize: pageSize
|
|
}));
|
|
|
|
getQAList(page)
|
|
|
|
|
|
}}
|
|
defaultPageSize={10}
|
|
defaultCurrent={1}
|
|
/>
|
|
</div>
|
|
</div>) : <LoadingView />
|
|
}
|
|
|
|
</div>
|
|
);
|
|
};
|
|
|
|
const Article = () => {
|
|
// const { t } = useTranslation();
|
|
const { t, i18n } = useTranslation()
|
|
|
|
console.log("-----i18n-----", i18n.language)
|
|
|
|
const language = i18n.language
|
|
|
|
const defCategories: TagItem[] = [
|
|
|
|
{ name: t("article.all"), value: "" }
|
|
// '#ALL',
|
|
// '#AI',
|
|
// '#Blockchain',
|
|
]
|
|
|
|
const categoriesRef = useRef(defCategories);
|
|
|
|
const [initLoading, setInitLoading] = useState<boolean>(false);
|
|
const [initTags, setInitTags] = useState<boolean>(false);
|
|
|
|
useEffect(() => {
|
|
let isMounted = true
|
|
|
|
|
|
async function initFunc() {
|
|
await service.post('/api/v1/tag/list', {
|
|
}, {
|
|
headers: {
|
|
// 'Authorization': token
|
|
}
|
|
}).then(function (result: any) {
|
|
|
|
|
|
console.log("result:", result)
|
|
|
|
if (result && result.header.code != 0) {
|
|
|
|
toast.error(result.header.message)
|
|
return
|
|
}
|
|
|
|
// categoriesRef.current.values
|
|
|
|
|
|
const tags = result.data.list
|
|
|
|
// getNewListFunc(1)
|
|
|
|
let listTmp = defCategories
|
|
|
|
for (let index = 0; index < tags.length; index++) {
|
|
const element = tags[index];
|
|
|
|
console.log(element)
|
|
|
|
// categoriesRef.current = [...categoriesRef.current, element.name];
|
|
if (language == 'en') {
|
|
listTmp = [...listTmp, {
|
|
name: element.name,
|
|
value: element.name,
|
|
}];
|
|
} else if (language == 'zh-CN') {
|
|
listTmp = [...listTmp, {
|
|
name: element.name_cn,
|
|
value: element.name,
|
|
}];
|
|
} else {
|
|
listTmp = [...listTmp, {
|
|
name: element.name,
|
|
value: element.name,
|
|
}];
|
|
}
|
|
|
|
|
|
}
|
|
|
|
categoriesRef.current = listTmp
|
|
|
|
|
|
setInitTags(true)
|
|
|
|
|
|
|
|
}).catch((err) => {
|
|
setInitLoading(false);
|
|
console.log(err);
|
|
|
|
});
|
|
}
|
|
|
|
initFunc()
|
|
|
|
return () => {
|
|
isMounted = false
|
|
}
|
|
}, [])
|
|
|
|
return (
|
|
<div className='min-h-[25rem]'>
|
|
<FadeIn >
|
|
<h3 className='text-center text-[1.25rem] lg:text-[2.25rem] font-bold py-8'>{t("article.hot_hrends")}</h3>
|
|
</FadeIn>
|
|
|
|
{
|
|
initTags && <NineGrid
|
|
categoriesRef={categoriesRef}
|
|
/>
|
|
}
|
|
</div>
|
|
)
|
|
|
|
};
|
|
|
|
export default Article; |