editProductPage.js

/**
 * Created by kweku on 7/30/17.
 */
import React, {Component} from 'react';
import { Form, Input, Button,
     FormGroup, Label, Col} from 'reactstrap';

import {updateProduct, deleteProduct, fetchMerchantProduct,
    fetchSingleProduct } from './../Actions/ProductAction'
import {fetchMerchantTag, } from '../Actions/TagAction';
import { Image } from 'cloudinary-react';
import cloudinaryConfig from './../Utils/cloudinaryConfig';
import localforage from 'localforage';

import {Link} from 'react-router-dom';

import { connect } from 'react-redux';
import isUndefined from 'is-undefined';
import _ from 'lodash';
import EditProductForm from './forms/editProductForm';

let clConfig = cloudinaryConfig;


class EditProductPage extends Component {
    constructor(props) {
        super(props);
        this.state = {
            image_link: '',
            image_url: null,
            name: '',
            description: '',
            price: '',
            qty: '',
            status: '',
            tax: '',
            tags: ''
        };

        this.handleSubmit = this.handleSubmit.bind(this);
        this.handleDelete = this.handleDelete.bind(this);
        this.handleInputChange = this.handleInputChange.bind(this);
    }

    componentDidMount() {
        this.props.fetchSingleProduct(this.props.match.params.id);
        this.props.fetchMerchantProduct();
        this.props.fetchMerchantTag();
        console.log(this.props.match.params.id, 'this is params');
    }

    handleDelete(id){
        localforage.getItem('reduxPersist:Account').then((value) => {
            let user = JSON.parse(value);
            let store_name = user.user.store_name;
            if (window.confirm('Are you sure you want to update product info: ')) {
                this.props.deleteProduct(store_name, id);
            }

        })
    }


    handleSubmit(id, values) {
        alert('here');
        let data = {
            ...values,
            image_link: this.state.image_url
        };

        localforage.getItem('reduxPersist:Account').then((value) => {
            let user = JSON.parse(value);
            let store_name = user.user.store_name;
            // let products = {name, description, price, qty, status, tax, image}
            // console.log(products, 'this is products')
            if (window.confirm('Are you sure you want to update this product ')) {

                this.props.updateProduct(store_name, id)
            }
        })
    }


    handleInputChange(event) {
        const target = event.target;
        const name = target.name;
        this.setState(function () {
            return {
                [name]: target.value
            }
        });
    }

    showUploadWidget() {
        window.cloudinary.openUploadWidget(
            {
                cloud_name:               clConfig.cloud_name,
                upload_preset:            clConfig.presets.aidahbot,
                sources:                  clConfig.sources,
                theme:                    clConfig.themes.white,
                multiple:                 clConfig.multiple.no,
                folder:                   clConfig.folders.product,
                tags:                     [clConfig.tags.product_image],
                resource_type:            clConfig.resource_types.image,
                client_allowed_formats:   clConfig.image_extensions,
                max_file_size:            clConfig.max_image_byte_size,
                show_powered_by:          clConfig.show_powered_by
            },
            function (error, result) {
                console.log('cloudinary result: ', result);
                if (error == null) {
                    this.setState({
                        image_url: result[0].public_id,
                        image_link: result[0].secure_url
                    });
                }
            }.bind(this)

        );
    }

    render(){
           let products = this.props.Product,
               product = products[this.props.match.params.id],
               singleProd = this.props.Product.singleProduct.product;
                console.log(singleProd, 'this is singleProd');

            let Tags = this.props.Tag.tags;
        return(
            <div className="page-content">
                <div className="container-fluid">


                    <div className="col-md-8">
                        <div className="card alert">
                               <EditProductForm

                                    onSubmit={this.handleSubmit}/>
                        </div>

                            {/*<div className="col-10">*/}
                                {/*<button className="btn-color"*/}
                                        {/*onClick={() => this.handleSubmit(singleProd._id)}>Update</button>{' '}*/}
                                {/*<button className="Nav-link">*/}
                                    {/*<Link to="/d/products" style={{color: 'white'}}>Cancel*/}
                                    {/*</Link>*/}
                                {/*</button>*/}
                            {/*</div>*/}
                    </div>
                                {/*<div className="col-md-4">*/}
                                {/*<div className="card" style={{width:"20rem;"}}>*/}

                                           {/*<Image*/}
                                                {/*cloudName="dxdkjddi2"*/}
                                                {/*className="card-img-top col-centered cover-image-preview"*/}
                                                {/*ref="image"*/}
                                                {/*publicId={isUndefined(singleProd)? null : singleProd.image_link}*/}
                                                {/*height="200"*/}
                                                {/*width="160"/>*/}

                                {/*</div><br/>*/}
                                    {/*<button className="btn-color "*/}
                                            {/*onClick={this.showUploadWidget}>Browse image</button>*/}
                                {/*</div>*/}

                </div>
            </div>

        )
    }
}




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

const mapDispatchToProps = (dispatch) => {
    return {
        updateProduct: (store_name, id, product) => {
            dispatch(updateProduct(store_name, id, product))
        },
        deleteProduct: (id, title) => {
            dispatch(deleteProduct(id, title))
        },
        fetchMerchantTag: (store_name) => {
            dispatch(
                fetchMerchantTag(store_name)
            )
        },
        fetchMerchantProduct: () => {
            dispatch(
                fetchMerchantProduct()
            )
        },
        fetchSingleProduct: (id) => {
            dispatch(
                fetchSingleProduct(id)
            )
        }
    }
};

export default connect (mapStateToProps, mapDispatchToProps)(EditProductPage)