AleksandrovHomeWork/nix-project/src/components/AdminGoodCard/AdminGoodCard.js

import React from "react";
import { Link } from "react-router-dom";
import { connect } from 'react-redux';
import { actionCartAdd } from "../../actions/actionsCartReducer";
import { backURL } from "../../services/getGQL";
import { actionGoodChange } from "../../actions/GQLActions";
import { useState } from "react";
import { CSetImageDropzone } from "../Dropzone/Dropzone";

import './../../App.scss';

const AdminGoodCard = ({ good: {_id, name, price, description, images} = {}, onCartAdd, onGoodChange }) => {

const [nameField, setNameField] = useState(name);
const [priceField, setPriceField] = useState(price);
const [descriptionField, setDescriptionField] = useState(description);

  return (
    <div className='goodCard'>
    <h2 className="goodCard_title">{nameField}</h2>
        <div className="goodCard_img">
            {images && images[0] && images[0].url && <img src={backURL + '/' + images[0].url} />}
        </div>
        <CSetImageDropzone id={_id} />
            <div className="goodCard_cart">
                <h2 className="goodCard_cart-price">{priceField} ₴</h2>
            <div className="goodCard_cart-btns">
                <button 
                className="goodCard_cart-btns--btn"
                onClick={() => onCartAdd({_id, name, price, images})}
                >
                <div>
                    <i class="fas fa-cart-arrow-down"></i>
                </div>
                </button>
                <Link className="goodCard_cart-btns--link" to={`/good/${_id}`}>
                    <p>DETAIL</p>
                </Link>
            </div>
        </div>
        <div className="goodCard_change">
            <textarea type="text" value={nameField} onChange={e => setNameField(e.target.value)} />
            <textarea type="number" value={priceField} onChange={e => setPriceField(+e.target.value)} />
            <textarea type="text" value={descriptionField} onChange={e => setDescriptionField(e.target.value)} />
            <button className="goodCard_change-btn" onClick={() => onGoodChange({ name: nameField, price: priceField, description: descriptionField, _id: _id })}>Change</button>
        </div>
    </div>
  )
}

export const CAdminGoodCard = connect(state => ({admin: state.auth.payload?.sub?.acl[2]}), {onCartAdd: actionCartAdd, onGoodChange: actionGoodChange})(AdminGoodCard);