100 lines
2.5 KiB
JavaScript
100 lines
2.5 KiB
JavaScript
|
// Main.js
|
||
|
|
import React, { useState, useEffect } from 'react';
|
||
|
|
import axios from 'axios';
|
||
|
|
import Container from '@mui/material/Container';
|
||
|
|
import Grid from '@mui/material/Grid';
|
||
|
|
import Card from '@mui/material/Card';
|
||
|
|
import CardMedia from '@mui/material/CardMedia';
|
||
|
|
import CardContent from '@mui/material/CardContent';
|
||
|
|
import Typography from '@mui/material/Typography';
|
||
|
|
import Pagination from '@mui/material/Pagination';
|
||
|
|
import { Link } from 'react-router-dom';
|
||
|
|
|
||
|
|
const config = {
|
||
|
|
Host: 'http://192.168.31.121:4444',
|
||
|
|
};
|
||
|
|
|
||
|
|
const Main = () => {
|
||
|
|
const [pagination, setPagination] = useState({
|
||
|
|
movies: [],
|
||
|
|
page: 1,
|
||
|
|
total: 1,
|
||
|
|
length: 1,
|
||
|
|
});
|
||
|
|
|
||
|
|
const limit = 8;
|
||
|
|
|
||
|
|
const fetchMovies = async (page) => {
|
||
|
|
try {
|
||
|
|
const response = await axios.get(
|
||
|
|
`${config.Host}/movie/?page=${page}&limit=${limit}`
|
||
|
|
);
|
||
|
|
|
||
|
|
if (response.status === 200) {
|
||
|
|
const data = response.data.data;
|
||
|
|
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);
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
useEffect(() => {
|
||
|
|
const lastPage = localStorage.getItem('lastPage') || 1;
|
||
|
|
fetchMovies(lastPage);
|
||
|
|
}, []);
|
||
|
|
|
||
|
|
const handlePageChange = (event, value) => {
|
||
|
|
fetchMovies(value);
|
||
|
|
};
|
||
|
|
|
||
|
|
return (
|
||
|
|
<Container>
|
||
|
|
<div>
|
||
|
|
<Grid container spacing={2}>
|
||
|
|
{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}`}>
|
||
|
|
<Card style={{ width: '100%', height: 200 }}>
|
||
|
|
<CardMedia
|
||
|
|
component="img"
|
||
|
|
height="120"
|
||
|
|
image={`${config.Host}/res/${item.image}`}
|
||
|
|
/>
|
||
|
|
<CardContent>
|
||
|
|
<Typography>{item.filename}</Typography>
|
||
|
|
</CardContent>
|
||
|
|
</Card>
|
||
|
|
</Link>
|
||
|
|
</Grid>
|
||
|
|
))}
|
||
|
|
</Grid>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div style={{ textAlign: 'center', marginTop: 2 }}>
|
||
|
|
<Pagination
|
||
|
|
count={pagination.length}
|
||
|
|
page={pagination.page}
|
||
|
|
onChange={handlePageChange}
|
||
|
|
shape="rounded"
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
</Container>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
|
||
|
|
export default Main;
|