editProductForm.js

import React from 'react';
import {Field, reduxForm} from 'redux-form';
import Multiselect from 'react-widgets/lib/Multiselect';
import 'react-widgets/dist/css/react-widgets.css';
import {connect} from 'react-redux';
import {NavLink} from 'react-router-dom';
import isUndefined from 'is-undefined';



const renderMultiselect = ({ input, data, valueField, textField }) =>
    <Multiselect {...input}
                 onBlur={() => input.onBlur()}
                 value={input.value || []} // requires value to be an array
                 data={data}
                 valueField={valueField}
                 textField={textField}
    />




let EditProductForm = props => {



        const {handleSubmit} = props;
        const {...product} = props.Product.singleProduct.product;
        // console.log(product.image_link, 'ldldldldl');
        // console.log(props.new_image, 'new image');
        // console.log('PRIRIJSJ: ', props.Product.singleProduct.product);

        return(

                <form onSubmit={handleSubmit}>
                    <div className="form-body">
                        <h3 className="box-title">About Product</h3>
                        <hr/>
                        <div className="row">
                            <div className="col-md-6">
                                <div className="form-group">
                                    <label className="control-label">Product Name</label>
                                    <Field
                                        name="name"
                                        type="text"
                                        component="input"
                                        className="form-control"
                                        placeholder="name"/>
                                </div>
                            </div>
                            <br/>

                            {/*price*/}
                            <div className="col-md-6">
                                <div className="form-group">
                                    <label className="control-label">Price</label>
                                    <div className="input-group">
                                        <div className="input-group-addon">{isUndefined(props.user.currency)? null : props.user.currency}</div>
                                        <Field
                                            name="price"
                                            type="number"
                                            component="input"
                                            className="form-control"
                                            placeholder="price"/>
                                    </div>
                                </div>
                            </div>
                        </div>

                        {/*quantity*/}
                        <div className="row">
                            <div className="col-md-6">
                                <div className="form-group">
                                    <label className="control-label">Quantity</label>
                                    <Field
                                        name="qty"
                                        type="number"
                                        component="input"
                                        className="form-control"
                                        placeholder="Quantity"/>
                                </div>
                            </div>

                            <div className="col-md-6">
                                <div className="form-group">
                                    {/*status*/}

                                    <label className="control-label">Status</label>

                                    <Field
                                        name="status"
                                        component="select"
                                        className="form-control"
                                    >
                                        <option>Select a status</option>
                                        <option>Available</option>
                                        <option>Out of Stock</option>
                                    </Field>
                                </div>
                            </div>
                        </div>


                        <div className="row">

                            <div className="col-md-6">
                                <div className="form-group">
                                    <label className="control-label">Select Size<label className="text-muted">(optional)</label></label>
                                    <Field
                                        name="size"
                                        component={renderMultiselect}
                                        data={['XXL', 'XL', 'L', 'M', 'S',
                                            'XS', '20', '21',
                                            '22', '23', '24', '25', '26',
                                            '27', '28', '29', '30',
                                            '31', '32', '33', '34', '35']}
                                        className="form-control"
                                        placeholder="separate option with a comma"
                                    />
                                </div>
                            </div>

                            <div className="col-md-6">
                                <div className="form-group">
                                    <label className="control-label">Select Tags<label className="text-muted">(required)</label></label>
                                    <span onClick={props.toggleAddTagModal}  className="pull-right control-label btn-link">
                                        Add New Tag
                                    </span>
                                    <Field
                                        name="tags"
                                        component={renderMultiselect}
                                        className="form-control"
                                        data={props.tag}
                                    />
                                </div>
                            </div>
                        </div>

                        <div className="row">
                            <div className="col-md-6">
                                <div className="form-group">
                                    <label className="control-label">Tax</label>


                                    <Field
                                        name="tax"
                                        type="number"
                                        component="input"
                                        className="form-control"
                                        placeholder="tax"/>
                                </div>
                            </div>
                        </div>

                        {/*description*/}
                        <h3 className="box-title m-t-40">Product Description</h3>
                        <div className="row">
                            <div className="col-md-12">
                                <div className="form-group">
                                    <Field
                                        name="description"
                                        component="textarea"
                                        rows="4"
                                        className="form-control"
                                        placeholder="decription"/>
                                </div>
                            </div>
                        </div>


                        <div className="row">
                            <div className="col-md-12">
                                {/*<div className="white-box">*/}
                                <div className="form-control">

                                    <label className="control-label">Product Image</label>
                                    <span onClick={props.showUploadWidget} className="pull-right btn-link">Upload Image</span>
                                </div>
                                <br/>
                                <div className="container-overview">
                                    {/*<label className="pull-right text-muted">required</label>*/}

                                    {isUndefined(product.image_link)? null : product.image_link.map((img, id) =>{
                                        return (
                                            <div className="col-md-4 col-centered img-wrap img-thumbnail" key={id}>
                                                <span className="close">&times;</span><img style={{height: '100px'}} alt="product_image" src={img} />
                                            </div>
                                        )
                                    }) }

                                </div>
                                <div className="container-overview">
                                    {/*<label className="pull-right text-muted">required</label>*/}

                                    {isUndefined(props.new_image)? null : props.new_image.map((img, id) =>{
                                        return (
                                            <div className="col-md-3" key={id}>
                                                <img style={{height: '100px'}} alt="product_image" src={img} className="img-thumbnail"/>
                                            </div>
                                        )
                                    }) }

                                </div>
                            </div>
                        </div>

                        {/*<div className="row">*/}
                            {/*<div className="col-md-3">*/}
                                {/*<h3 className="box-title m-t-20">Product Image</h3>*/}
                                {/*<div className="product-img">*/}
                                    {/*<Image*/}
                                    {/*cloudName="dxdkjddi2"*/}
                                    {/*className="cover-image-preview"*/}
                                    {/*publicId={*/}
                                        {/*product.length === 0*/}
                                            {/*? null*/}
                                            {/*: props.new_image === ''*/}
                                                {/*? product.image_link*/}
                                                {/*: props.new_image*/}
                                    {/*}*/}
                                    {/*height="200"*/}
                                    {/*width="250"*/}
                                    {/*/>*/}
                                    {/*<br/>*/}
                                    {/*<div className="pro-img-overlay"><a onClick={props.showUploadWidget} className="bg-info">*/}
                                        {/*<i className="ti-marker-alt"></i></a>*/}
                                        {/*<a  className="bg-danger">*/}
                                            {/*<i className="ti-trash"></i></a></div>*/}


                                    {/*<div className="fileupload btn btn-info waves-effect waves-light">*/}
                                                                                {/*<span><i className="ion-upload m-r-5">*/}

                                                                            {/*</i>Upload Image</span>*/}
                                        {/*<input onClick={props.showUploadWidget} className="upload"/>*/}
                                    {/*</div>*/}
                                {/*</div>*/}
                            {/*</div>*/}
                        {/*</div>*/}
                        <hr/>
                    </div>
                    <div className="row">
                        <div className="form-actions m-t-40">
                            <button type="submit"
                                    className="btn label-custom"
                                    style={{color: "white"}}
                                    > <i className="fa fa-check">

                            </i> Save </button>{' '}
                            <button type="button" className="btn btn-default">
                                <NavLink style={{color: 'black'}} to="/d/products"> Cancel</NavLink>
                            </button>
                        </div>
                    </div>
                </form>

        )
}


EditProductForm = reduxForm({
    form: 'editProduct',
    // initialValues: {  },
    // enableReinitialize: true
})(EditProductForm)

const mapStateToProps = (state) => {
    return {
        Product: state.Product
    }
};

export default connect(mapStateToProps, null)(EditProductForm)