morty

1
import { useState, useEffect } from "react";
2
import { useParams, Link } from "react-router-dom";
3
import { fetchDataCards } from "../services/Services";
4
import "./cardDetalis.scss";
5

6
const CardDetalis = ({ setShowFilter }) => {
7
  const { id } = useParams();
8
  const [card, setCards] = useState(null);
9

10
  useEffect(() => {
11
    setShowFilter(false);
12
    return () => {
13
      setShowFilter(true);
14
    };
15
  }, [setShowFilter]);
16

17
  useEffect(() => {
18
    const fetchCardDetails = async () => {
19
      const response = await fetchDataCards(id);
20
      setCards(response);
21
    };
22

23
    fetchCardDetails();
24
  }, [id]);
25

26
  if (!card) {
27
    return <div className="spinner">Loading...</div>;
28
  }
29

30
  return (
31
    <div className="container">
32
      <div className="header">
33
        <Link to="/" className="back-link">
34
          Назад
35
        </Link>
36
      </div>
37
      <div className="content">
38
        <div className="card-details">
39
          <div className="card-details__image">
40
            <img src={card.image} alt="" />
41
          </div>
42
          <div className="card-details__info">
43
            <div className="card-details__name">
44
              ИМЯ: <br />
45
              {card.name}
46
            </div>
47
            <div className="card-details__gender">
48
              ПОЛ: <br />
49
              {card.gender}
50
            </div>
51
            <div className="card-details__origin">
52
              Место рождения: <br />
53
              {card.origin.name}
54
            </div>
55
            <div className="card-details__location">
56
              Место нахождения: <br />
57
              {card.location.name}
58
            </div>
59
            <div className="card-details__status">
60
              Статус: <br />
61
              {card.status}
62
            </div>
63
          </div>
64
        </div>
65
      </div>
66
    </div>
67
  );
68
};
69

70
export default CardDetalis;
71