morty

1
import { useState, useEffect } from "react";
2
import Modal from "../modal/Modal";
3
import { fetchDataAll } from "../services/Services";
4

5
import "./characterPage.scss";
6

7
const CardList = ({ filters }) => {
8
  const [cards, setCards] = useState([]);
9
  const [selectedCard, setSelectedCard] = useState(null);
10
  const [modal, setModal] = useState(false);
11
  const [currentPage, setCurrentPage] = useState(0);
12

13
  const [loadedCards, setLoadedCards] = useState(10);
14

15
  useEffect(() => {
16
    const fetchFilteredData = async () => {
17
      const response = await fetchDataAll(filters);
18
      setCards(response.results);
19
    };
20

21
    fetchFilteredData();
22
  }, [filters]);
23

24
  const handleLoadMore = () => {
25
    setLoadedCards((prevCount) => prevCount + 5);
26
  };
27

28
  const openModal = (card) => {
29
    setSelectedCard(card);
30
    setModal(true);
31
  };
32

33
  const closeModal = () => {
34
    setSelectedCard(null);
35
    setModal(false);
36
  };
37

38
  const filteredCards = cards.filter((card) => {
39
    const { status, species, gender } = filters;
40
    return (
41
      (!status || card.status === status) &&
42
      (!species || card.species === species) &&
43
      (!gender || card.gender === gender)
44
    );
45
  });
46

47
  const currentCard = filteredCards.slice(0, loadedCards);
48

49
  return (
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

74
export default CardList;
75