x-movie/src/Components.js

import React, { useState, useEffect, useContext } 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';
import CircularProgress from '@mui/material/CircularProgress';
import ConfigContext from './Config';

 

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

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

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

  const limit = 12;

  const fetchMovies = async (page) => {
    setLoading(true);
    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);
    } finally {
      setLoading(false);
    }
  };

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

  const handlePageChange = (event, value) => {
    fetchMovies(value);
  };

  const truncateFilename = (filename, maxLength) => {
    return filename.length > maxLength
      ? filename.substring(0, maxLength - 3) + '...'
      : filename;
  };

  return (
    <Container style={{ marginTop: 20 }}>
      <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 }}
                >
                  <Card
                    style={{
                      width: '100%',
                      height: 200,
                      boxShadow: '0 4px 6px rgba(0, 0, 0, 0.1)',
                      transition: 'box-shadow 0.3s ease-in-out',
                      '&:hover': {
                        boxShadow: '0 8px 12px rgba(0, 0, 0, 0.2)',
                      },
                    }}
                  >
                    <CardMedia
                      component="img"
                      height="120"
                      image={`${config.Host}/res/${item.image}`}
                    />
                    <CardContent>
                      <Typography>
                        {truncateFilename(item.filename, 15)}
                      </Typography>
                    </CardContent>
                  </Card>
                </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;