feat: 🎸 接口对接调整

src/pages/CompanyJobsListPage/index.jsx

@@ -1,73 +1,46 @@
-import { useState, useEffect } from "react";
-import { useNavigate } from "react-router-dom";
+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 JobList from "@/pages/CompanyJobsPage/components/JobList";
-
 import "./index.css";
 
+const PAGE_SIZE = 20;
+
 const CompanyJobsListPage = () => {
   const [jobs, setJobs] = useState([]);
-  const [loading, setLoading] = useState(true);
-  const [page, setPage] = useState(1);
-  const [total, setTotal] = useState(0);
-  const navigate = useNavigate();
+  const [listPage, setListPage] = useState(1);
+  const [listHasMore, setListHasMore] = useState(true);
 
-  useEffect(() => {
-    fetchJobs();
-  }, [page]);
-
-  const fetchJobs = async () => {
-    try {
-      setLoading(true);
-      const response = await getJobsList({
-        page,
-        pageSize: 20,
-        isActive: 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;
       });
-
-      const mappedJobs = mapJobList(response.data || response);
-      setJobs(mappedJobs);
-      setTotal(response.total || mappedJobs.length);
-    } catch (error) {
-      console.error("Failed to fetch jobs:", error);
-      setJobs([]);
-    } finally {
-      setLoading(false);
     }
-  };
-
-  if (loading && jobs.length === 0) {
-    return (
-      <div
-        className="company-jobs-list-page-wrapper"
-        style={{
-          display: "flex",
-          justifyContent: "center",
-          alignItems: "center",
-          minHeight: "400px",
-        }}
-      >
-        <p>加载中...</p>
-      </div>
-    );
-  }
+  }, [listPage]);
 
   return (
-    <ul className="company-jobs-list-page-wrapper">
+    <InfiniteScroll
+      loadMore={fetchJobs}
+      hasMore={listHasMore}
+      empty={jobs.length === 0}
+      className="company-jobs-list-page-wrapper"
+    >
       <JobList data={jobs} />
-      {jobs.length === 0 && !loading && (
-        <div
-          style={{
-            textAlign: "center",
-            padding: "40px",
-            color: "#999",
-          }}
-        >
-          暂无岗位信息
-        </div>
-      )}
-    </ul>
+    </InfiniteScroll>
   );
 };