forgeplus-react/src/user_info/Memo/Sections.js

71 lines
1.9 KiB
JavaScript

import React, { useEffect, useState } from "react";
import axios from "axios";
import { Spin, Empty, Row, Pagination } from "antd";
import { PagenationDiv } from "../css/projects";
import SectionItem from "./SectionItem";
function sections(props) {
const user_login = props.match.params.login;
const [isSpin, setSpinType] = useState(false);
const [forum_sections, getSections] = useState([]);
const [page, setListPage] = useState(1);
const [limit, setLimitType] = useState(32);
const [sectionsSize, setSectinsSize] = useState(0);
useEffect(() => {
async function init() {
setSpinType(true);
let url = `/my_memos/${user_login}/my_interested.json`;
axios
.get(url, {
params: {
limit,
page,
},
})
.then((result) => {
if (result) {
getSections(result.data.forum_details);
setSectinsSize(result.data.count);
}
setSpinType(false);
})
.catch((e) => {
setSpinType(false);
console.log(e);
});
}
init();
}, [page]);
const handleChangePage = (page) => {
setListPage(page);
};
return (
<div className="mt15">
<Spin spinning={isSpin}>
{forum_sections && forum_sections.length > 0 ? (
<Row gutter={20}>
{forum_sections.map((item, key) => {
return <SectionItem forum_section={item} key={key}></SectionItem>;
})}
</Row>
) : (
<Empty image={Empty.PRESENTED_IMAGE_SIMPLE} className="pd100"></Empty>
)}
</Spin>
{sectionsSize > limit && (
<PagenationDiv>
<Pagination
showQuickJumper
current={page}
onChange={handleChangePage}
total={sectionsSize}
pageSize={limit}
/>
</PagenationDiv>
)}
</div>
);
}
export default sections;