EditProductPage.js

import React, {Component} from 'react';

import {updateProduct, deleteProduct, fetchMerchantProduct,
    fetchSingleProduct, productSaved } from './../Actions/ProductAction'
import {fetchMerchantTag, toggleTagModal,addNewTag } from '../Actions/TagAction';
import { Image } from 'cloudinary-react';

import cloudinaryConfig from './../Utils/cloudinaryConfig';
import localforage from 'localforage';

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

import { connect } from 'react-redux';

import { Table, Button, Modal, ModalHeader,
    ModalBody, ModalFooter,  Form,
    FormGroup, Label, Input, Col } from 'reactstrap';

import _ from 'lodash';
import EditProductForm from './forms/editProductForm';

let clConfig = cloudinaryConfig;


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

        this.handleAddTag       = this.handleAddTag.bind(this);
        this.toggleAddTagModal  = this.toggleAddTagModal.bind(this);
        this.handleUpdateProduct = this.handleUpdateProduct.bind(this);
        this.handleDelete = this.handleDelete.bind(this);
        this.handleInputChange = this.handleInputChange.bind(this);
        this.handleInputChange = this.handleInputChange.bind(this);

    }

    componentDidMount() {
        this.props.fetchSingleProduct(this.props.match.params.id);
        this.props.fetchMerchantProduct();
        this.props.fetchMerchantTag();
        let p =   this.props.Product.singleProduct.product;


    }

    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);
            }

        })
    }

    handleRemoveImage = (id) => {
        alert('hey');
        this.state.new_image.splice(id, 1);
    }
    // deleteImage = (value, id) =>{
    //     ...value.image_link
    // }

    handleUpdateProduct(values) {

        let product = {};

        if(this.state.new_image.length === 0) {
            product = {
                ...values
            }
        } else {
            product = {
                ...values,
                image_link: values.image_link.concat(this.state.new_image)
            }
        }
            // console.log(product, 'this is products');
            // console.log(values, 'thiss is values')
        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(product, 'this is ditttttt')
            let id = this.props.match.params.id
            if (window.confirm('Are you sure you want to update this product ')) {

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


    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
            },
            (error, result) => {
                // console.log('cloudinary result: ', result);
                if (error == null) {
                    const image_array = [];

                    for (var i = 0; i < result.length; i++){
                        image_array.push(result[i].secure_url);
                        // console.log(image_array, 'cloudinary this');
                    }
                    this.setState({
                        new_image: image_array,
                        image_link: image_array,

                    });
                }
            }

        );
    }



    // tags
    toggleAddTagModal(bool) {
        this.props.toggleTagModal(bool)
    }




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


    handleAddTag(){
        // let {...tag} = {
        //     ...values
        // }
        // console.log({...tag}, 'yyyeeeeeeeeeeeeeee');
        let { title} = this.state;

        let tag = {
            title
        }

        localforage.getItem('reduxPersist:Account').then( (value) => {
            let user = JSON.parse(value);
            let store_name = user.user.store_name;

            this.props.addNewTag(store_name, tag);


        })
    };

    render(){
            let {user} = this.props.Account;
           let { title} = this.state;

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

        let {tags, toggleTagModal} = this.props.Tag,
            tag = _.valuesIn(tags).map(t => t.title);
        return(
            <div id="page-wrapper">
                <div className="container-fluid">
                    <div className="row bg-title">
                        <div className="col-lg-3 col-md-4 col-sm-4 col-xs-12">
                        </div>
                        <div className="col-lg-9 col-sm-8 col-md-8 col-xs-12">

                            <ol className="breadcrumb">
                                <li><a href="#">Products</a></li>
                                <li className="active">Edit Product</li>
                            </ol>
                        </div>
                        {/*<!-- /.col-lg-12 -->*/}
                    </div>
                    <div className="row">
                        <div className="col-md-12">
                            <div className="panel panel-info">
                                <div className="panel-heading" style={{background: "#01c0c8"}}> Edit Product</div>
                                <div className="panel-wrapper collapse in" aria-expanded="true">
                                    <div className="panel-body">

                               <EditProductForm
                                   showUploadWidget = {this.showUploadWidget}
                                   new_image = {this.state.new_image}
                                   user = {user}
                                   handleRemoveImage={this.handleRemoveImage}
                                   // newImage = {this.state.new_image? this.state.new_image : this.state.image_url}
                                   tag = {tag}
                                   toggleAddTagModal={this.toggleAddTagModal}
                                   onSubmit={this.handleUpdateProduct}
                               />
                                    </div>
                                </div>
                            </div>
                            <div>
                                <Modal isOpen={toggleTagModal} toggle={() => {this.toggleAddTagModal(false)}} className={this.props.className}>
                                    <ModalHeader toggle={this.toggleAddTagModal}>Add Tag</ModalHeader>
                                    <ModalBody>

                                        <Form>

                                            <FormGroup>
                                                <Label for="exampleText">Title</Label>
                                                <Input type="text" value={title} name="title" onChange={this.handleInputChange} id="exampleText" placeholder="Name" />
                                            </FormGroup>

                                        </Form>

                                    </ModalBody>
                                    <ModalFooter>
                                        <button className="btn btn-color" onClick={this.handleAddTag}>Save</button>{' '}
                                        <Button color="secondary" onClick={() => this.toggleAddTagModal(false)}>Cancel</Button>
                                    </ModalFooter>
                                </Modal>
                            </div>
                        </div>
                    </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)
            )
        },
        productSaved:(bool) => {
            dispatch(
                productSaved(bool)
            )
        },
        toggleTagModal:(bool) =>{
            dispatch(
                toggleTagModal(bool)
            )
        },
        addNewTag: (store_name,tag) => {
            dispatch(
                addNewTag(store_name, tag)
            )
        },
    }
};

export default connect (mapStateToProps, mapDispatchToProps)(EditProductPage)