text: import React, { useEffect } from 'react';
  import { useSelector, useDispatch } from 'react-redux';
  
  import { getPizza, actionTypes } from '../../../actions/';
  import { Modal } from '../../../components';
  
  import './style.css';
  
  const PizzaCard = () => {
  
      const dispatch = useDispatch();
      
      const pizzas = useSelector(state => state.pizzas);
      const modal = useSelector(state => state.modal);
  
      useEffect(() => { 
          dispatch(getPizza());
      }, [dispatch]);
  
      const getItemCart = (id) => {
          const selectedItem = pizzas.filter(item => item.id === id);
  
          if(selectedItem !== []) {
              dispatch({
                  type: actionTypes.SHOW_MODAL,
                  payload: true,
              });
          }
  
          dispatch({
              type: actionTypes.SELECTED_ITEM,
              payload: [...selectedItem],
          });
      }
  
      return (
          <div className="container">
              {modal && <Modal/>}
              <div className="card__content">
                  {pizzas.map((item) => {
                      return (
                          <div key={item.id} className="card">
                              {item.hit &&
                                  <div className="card__hit">
                                      <p className="cart__hit-text">{item.hit}</p>
                                  </div>
                              }     
                              <div>
                                  <img className="card__image" src={item.picture} alt="pizza"></img>
                                  <h1 className="card__title">{item.name}</h1>
                                  <p className="card__description">{item.description}</p>
                              </div>                         
                              <div className="card__choose">
                                  <p className="card__price">{item.price.toFixed(2)} руб</p>
                                  <button className="card__btn" onClick={() => {getItemCart(item.id)}}>Выбрать</button>
                              </div>
                          </div>
                      )
                  })}
              </div>
          </div>
      )
  }
  
  export { PizzaCard };