x-movie/src/Main.jsx

// Main.js
import React, { useState, useEffect, useContext, useCallback } from 'react';
import axios from 'axios';
import Container from '@mui/material/Container';
import Grid from '@mui/material/Grid';
import Pagination from '@mui/material/Pagination';
import { Link } from 'react-router-dom';
import CircularProgress from '@mui/material/CircularProgress';

import ConfigContext from './Config';
import MovieCard from './components/MovieCard';
import CategoryNav from './components/CategoryNav';
 

const Main = () => {
  const config = useContext(ConfigContext);

  const [currentCategory, setCurrentCategory] = useState(0);

  const categories = [
    { label: '15min', idx: 0 },
    { label: '30min', idx: 1 },
    { label: '60min', idx: 2 },
    { label: '大于60min', idx: 3 },
  ];

  const [pagination, setPagination] = useState({
    movies: [],
    page: 1,
    total: 1,
    length: 1,
  });

  const [loading, setLoading] = useState(false);

  const limit = 20;

  const handleCategoryChange = (category) => {
    setCurrentCategory(category);
    fetchMovies(category, 1);
  };

 
  const fetchMovies = useCallback(async (category, page) => {
    setLoading(true);
    try {
      const response = await axios.get(
        `${config.Host}/movie/?page=${page}&limit=${limit}&category=${category}`
      );
  
      if (response.status === 200) {
        const data = response.data.data;
  
        if (data.items.length === 0 && page > 1) {
          // 如果返回的数据为空且请求的页码大于1，则尝试获取上一页的数据
          fetchMovies(category, page - 1);
        } else {
          setPagination({
            movies: data.items,
            page: page,
            total: data.total,
            length: Math.ceil(data.total / limit),
          });
          localStorage.setItem('lastPage', page);
        }
      }
    } catch (error) {
      console.error('Error fetching movies:', error);
    } finally {
      setLoading(false);
    }
  }, [config.Host, limit]);

  useEffect(() => {
    const lastPage = localStorage.getItem('lastPage') || 1;
    fetchMovies(currentCategory, lastPage);
  }, [ currentCategory, fetchMovies]);

  const handlePageChange = (event, value) => {
    fetchMovies(currentCategory, value);
  };
 
 
  return (
    <Container style={{ marginTop: 20 }}>
        <CategoryNav
          categories={categories}
          currentCategory={currentCategory}
          onCategoryChange={handleCategoryChange}
        />

      <div style={{ textAlign: 'center', marginBottom: 20 }}>
        <Pagination
          count={pagination.length}
          page={pagination.page}
          onChange={handlePageChange}
          shape="rounded"
          color="primary"
          size="large"
        />
      </div>
 
      <div>
        {loading ? (
          <div
            style={{display: 'flex',justifyContent: 'center',alignItems: 'center',height: '50vh'}}
          >
            <CircularProgress />
          </div>
        ) : (
 
          <Grid container spacing={2} style={{ marginTop: 3 }}>
          {pagination.movies.map((item) => (
            <Grid item xs={6} sm={4} md={3} lg={2}
              style={{ display: 'flex', justifyContent: 'space-between' }}
              key={item.filename}
            >
              <Link
                to={`/res/${item.filename}`}
                style={{ textDecoration: 'none', paddingBottom: 10 }}
              >
                <MovieCard movie={item} config={config} />
              </Link>
            </Grid>
          ))}
        </Grid>
        )}
      </div>
 
      <div style={{ textAlign: 'center', marginTop: 20 }}>
        <Pagination
          count={pagination.length}
          page={pagination.page}
          onChange={handlePageChange}
          shape="rounded"
          color="primary"
          size="large"
        />
      </div>
    </Container>
  );
};

export default Main;