12345678910111213141516171819202122232425262728293031323334353637383940 |
- import { Card, Image, Button, Space } from 'antd';
- import { useEffect, useState } from 'react';
- import { connect } from 'react-redux';
- import { actionCartAdd } from '../action';
- const backendURL = 'http://shop-roles.asmer.fs.a-level.com.ua';
- const Good = ({good: {name, images, description, price, _id}, onAdd}) => {
- const [dopImg, setDopImg] = useState([]);
-
- useEffect(() => {
- if (images && images.length > 1) {
- const newImages = [...images];
- newImages.shift();
- setDopImg(newImages);
- }
- }, [images])
-
- return (
- <Card title={name} style={{ width: 400}} hoverable>
- {images && images[0] && images[0].url && <Image width={350} src={backendURL + '/' + images[0].url} />}
- {(dopImg.length >= 1) && dopImg.map((item) =>
-
- <div key={item._id} className='additionalImg'>
- <Image width={110} height={110} src={backendURL + '/' + item.url} />
- </div>
-
- )}
- <p>{description}</p>
- <p>{price} грн</p>
- <Button onClick={() => onAdd({_id, name, price, images})}>Купить</Button>
- </Card>
- )
- }
- const mapStateToProps = state => ({good: state.promise.goodById?.payload || {}})
- const GoodCardCharacteristic = connect(mapStateToProps, {onAdd: actionCartAdd})(Good);
- export default GoodCardCharacteristic;
|