morty
74 строки · 2.0 Кб
1import { useState, useEffect } from "react";2import Modal from "../modal/Modal";3import { fetchDataAll } from "../services/Services";4
5import "./characterPage.scss";6
7const CardList = ({ filters }) => {8const [cards, setCards] = useState([]);9const [selectedCard, setSelectedCard] = useState(null);10const [modal, setModal] = useState(false);11const [currentPage, setCurrentPage] = useState(0);12
13const [loadedCards, setLoadedCards] = useState(10);14
15useEffect(() => {16const fetchFilteredData = async () => {17const response = await fetchDataAll(filters);18setCards(response.results);19};20
21fetchFilteredData();22}, [filters]);23
24const handleLoadMore = () => {25setLoadedCards((prevCount) => prevCount + 5);26};27
28const openModal = (card) => {29setSelectedCard(card);30setModal(true);31};32
33const closeModal = () => {34setSelectedCard(null);35setModal(false);36};37
38const filteredCards = cards.filter((card) => {39const { status, species, gender } = filters;40return (41(!status || card.status === status) &&42(!species || card.species === species) &&43(!gender || card.gender === gender)44);45});46
47const currentCard = filteredCards.slice(0, loadedCards);48
49return (50<div className="container">51<div className="card--inner">52{currentCard.map((card) => (53<div className="card" key={card.id} onClick={() => openModal(card)}>54<div className="card-images">55<img src={card.image} alt="" />56</div>57<div className="card-info">58<h2 className="card-name">{card.name}</h2>59<h3 className="card-status">{card.status}</h3>60</div>61</div>62))}63</div>64{filteredCards.length > loadedCards && (65<button className="load-more" onClick={handleLoadMore}>66Загрузить еще
67</button>68)}69{modal && <Modal card={selectedCard} onClose={closeModal} />}70</div>71);72};73
74export default CardList;75