144 lines
3.8 KiB
JavaScript
144 lines
3.8 KiB
JavaScript
// 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; |