teach_sys_Demo/src/pages/CompanyJobsListPage/index.jsx

import { useState, useEffect } from "react";
import { useNavigate } from "react-router-dom";
import { jobAPI } from "@/services/api";
import { mapJobList } from "@/utils/dataMapper";
import JobList from "@/pages/CompanyJobsPage/components/JobList";

import "./index.css";

const CompanyJobsListPage = () => {
  const [jobs, setJobs] = useState([]);
  const [loading, setLoading] = useState(true);
  const [page, setPage] = useState(1);
  const [total, setTotal] = useState(0);
  const navigate = useNavigate();

  useEffect(() => {
    fetchJobs();
  }, [page]);

  const fetchJobs = async () => {
    try {
      setLoading(true);
      const response = await jobAPI.getList({
        page,
        pageSize: 20,
        isActive: true
      });
      
      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>
    );
  }

  return (
    <ul className="company-jobs-list-page-wrapper">
      <JobList data={jobs} />
      {jobs.length === 0 && !loading && (
        <div style={{ 
          textAlign: 'center', 
          padding: '40px', 
          color: '#999' 
        }}>
          暂无岗位信息
        </div>
      )}
    </ul>
  );
};

export default CompanyJobsListPage;