src/App.css - master - volkovalesa/practica_2

src/App.css
184 строки4 KB
volkovalesa
Update: App.css
10 июн 2026, 14:04
10 июн 2026, 14:0406937fc
import React, { useState, useEffect } from 'react';
import { fetchPopularMovies } from './services/moviesService';
import MovieCard from './components/MovieCard';
import Loader from './components/Loader';
import ErrorAlert from './components/ErrorAlert';
import './App.css';

function App() {
  const [movies, setMovies] = useState([]);
  const [isLoading, setIsLoading] = useState(true);
  const [error, setError] = useState(null);
  const [page, setPage] = useState(1);
  const [hasMore, setHasMore] = useState(true);
  const [isLoadingMore, setIsLoadingMore] = useState(false);

  const loadMovies = async (pageNum, isLoadMore = false) => {
    if (isLoadMore) {
      setIsLoadingMore(true);
    } else {
      setIsLoading(true);
    }
    setError(null);
    
    try {
      const data = await fetchPopularMovies(pageNum);
      
      if (isLoadMore) {
        setMovies(prev => [...prev, ...(data.results || [])]);
      } else {
        setMovies(data.results || []);
      }
      
      setHasMore(pageNum < data.total_pages);
    } catch (err) {
      console.error('Ошибка загрузки:', err);
      setError(err.message || 'Не удалось загрузить список фильмов');
    } finally {
      if (isLoadMore) {
        setIsLoadingMore(false);
      } else {
        setIsLoading(false);
      }
    }
  };

  const loadMoreMovies = () => {
    if (!isLoadingMore && hasMore) {
      const nextPage = page + 1;
      setPage(nextPage);
      loadMovies(nextPage, true);
    }
  };

  useEffect(() => {
    loadMovies(1, false);
  }, []);

  if (isLoading) {
    return <Loader />;
  }

  if (error) {
    return <ErrorAlert message={error} onRetry={() => {
      setPage(1);
      loadMovies(1, false);
    }} />;
  }

  return (
    <div className="app-container">
      <header className="app-header">
        <h1>🎬 Популярные фильмы</h1>
        <p className="subtitle">По версии TMDb</p>
      </header>
      
      <div className="movies-grid">
        {movies.map((movie) => (
          <MovieCard key={movie.id} movie={movie} />
        ))}
      </div>
      
      {hasMore && (
        <div className="load-more-container">
          <button 
            className="load-more-btn"
            onClick={loadMoreMovies}
            disabled={isLoadingMore}
          >
            {isLoadingMore ? 'Загрузка...' : 'Загрузить ещё фильмы ↓'}
          </button>
        </div>
      )}
    </div>
  );
}

export default App;
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
  background-color: #f5f5f5;
}

.app-container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 20px;
}

.app-header {
  text-align: center;
  margin-bottom: 40px;
}

.app-header h1 {
  font-size: 36px;
  color: #333;
  margin-bottom: 8px;
}

.subtitle {
  color: #666;
  font-size: 14px;
}

.movies-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 24px;
}

/* Мобильные устройства */
@media (max-width: 768px) {
  .app-container {
    padding: 12px;
  }
  
  .app-header h1 {
    font-size: 24px;
  }
  
  .movies-grid {
    gap: 16px;
  }
}

/* Убираем подчёркивание у ссылок внутри карточек */
a {
  text-decoration: none;
}
.load-more-container {
  display: flex;
  justify-content: center;
  margin-top: 40px;
  margin-bottom: 40px;
}

.load-more-btn {
  background-color: #e50914;
  color: white;
  border: none;
  border-radius: 8px;
  padding: 12px 32px;
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.2s;
}

.load-more-btn:hover {
  background-color: #b8070f;
  transform: scale(1.02);
}

.load-more-btn:disabled {
  background-color: #999;
  cursor: not-allowed;
  transform: none;
}