ARsa1s02

1import React from 'react';
2import api from '../utils/Api';
3import pencilBig from '../images/Pencil-big.svg';
4import Card from './Card';
5
6
7//ToDo: Сделать первичный запрос через Promise.all
8//ToDo: Добавить key для каждой итерации с массивом
9
10
11
12function Main(props) {
13  console.log('in Main')
14
15  const [ {userName, userDescription, userAvatar}, setUserData] = React.useState({});
16  const [cards, setCards] = React.useState([]);
17
18  React.useEffect(() => {
19    console.log('in React.useEffect');
20
21    //Тут выполняется код при рендере любого компонета Main или самого Main (если не указан конкретный компонент в конце)
22    Promise.all( [api.getProfile(), api.getAllCards()] )
23      .then( resArray => {
24        console.log('in Promise.all');
25        setUserData({userName: resArray[0].name, userDescription: resArray[0].about, userAvatar: resArray[0].avatar});
26        setCards(resArray[1]);
27        console.log(resArray[1]);
28      });
29
30//   return () => {
31  //Этот код выполнится при удалении любого или указанного компонета Main
32//   }
33  
34  }, []) //После запятой указывается конкретный компонет или компоненты в массиве,
35//   если массив пустой то этот код исполнится один раз
36
37  return (
38    <main className="content">
39      
40    <section className="profile profile_align_top-center">
41      <div className="profile__info-area">
42        <div className="profile__avatar" onClick={props.onEditAvatar} style={{ backgroundImage: `url(${userAvatar})` }}>
43          <div className="profile__overlay">
44            <img className="profile__edit-avatar" src={pencilBig} alt="иконка с изображением карандаша" />
45          </div>
46        </div>
47        <div className="profile__info">
48          <div className="profile__info-container">
49            <h1 className="profile__full-name">{userName}</h1>
50            <button className="profile__edit-button" type="button" onClick={props.onEditProfile}></button>
51          </div>
52          <p className="profile__profession">{userDescription}</p>
53        </div>
54      </div>
55      <button className="profile__add-button" type="button" onClick={props.onAddPlace}></button>
56    </section>
57
58    <section className="elements elements_align_top-bottom">
59      <ul className="elements__list">
60        {cards.map(cardItem =>
61          {
62            return (
63              <Card key={cardItem._id} cardIt={cardItem} onCardClick={props.forwardMainOnCardClick}/>    
64
65            )
66          })
67        }
68      </ul>
69    </section>
70
71  </main>  
72  )
73}
74
75
76export default Main;