Files
teach_sys_Demo/src/pages/CompanyJobsListPage/index.jsx

48 lines
1.3 KiB
JavaScript

import { useState, useCallback } from "react";
import JobList from "@/pages/CompanyJobsPage/components/JobList";
import InfiniteScroll from "@/components/InfiniteScroll";
import { getJobsList } from "@/services";
import { mapJobList } from "@/utils/dataMapper";
import "./index.css";
const PAGE_SIZE = 20;
const CompanyJobsListPage = () => {
const [jobs, setJobs] = useState([]);
const [listPage, setListPage] = useState(1);
const [listHasMore, setListHasMore] = useState(true);
const fetchJobs = useCallback(async () => {
const res = await getJobsList({
page: listPage,
pageSize: PAGE_SIZE,
isActive: true,
});
if (res.success) {
const mappedJobs = mapJobList(res.data);
setJobs((prevList) => {
const newList = [...prevList, ...mappedJobs];
if (res.total === newList?.length) {
setListHasMore(false);
} else {
setListPage((prevPage) => prevPage + 1);
}
return newList;
});
}
}, [listPage]);
return (
<InfiniteScroll
loadMore={fetchJobs}
hasMore={listHasMore}
empty={jobs.length === 0}
className="company-jobs-list-page-wrapper"
>
<JobList data={jobs} className="jobs-list-margin" />
</InfiniteScroll>
);
};
export default CompanyJobsListPage;