addProductPage.js

import React, { Component } from 'react';

import {reduxForm} from 'redux-form';
import { connect } from 'react-redux';
import {NavLink, Redirect} from 'react-router-dom'

import localforage from 'localforage';
import _ from 'lodash';
import AddProductForm from '././forms/addProduct';

import {fetchMerchantProduct, addNewProduct, editProduct,
     deleteProduct, productSaved } from
    '../Actions/ProductAction';
import cloudinaryConfig from './../Utils/cloudinaryConfig';

import { fetchMerchantTag, addNewTag,toggleTagModal } from '../Actions/TagAction';
import './.././../App.css';
import {PropTypes} from 'prop-types';


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



let clConfig = cloudinaryConfig;



class AddProductPage extends Component {
    constructor(props) {
        super(props);
        this.state = {
            image_url: null,
            image_link: '',
            redirectToNewPage: false
        };

        // this.showUploadWidget       = this.showUploadWidget.bind(this);
        this.toggleAddTagModal  = this.toggleAddTagModal.bind(this);
        this.handleAddTag       = this.handleAddTag.bind(this);
        this.handleInputChange = this.handleInputChange.bind(this);
        this.handleAddProduct       = this.handleAddProduct.bind(this);
        this.handleInputChange      = this.handleInputChange.bind(this);
        // this.handleEditProduct      = this.handleEditProduct.bind(this);
        this.handleDelete           = this.handleDelete.bind(this);
    }



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

        }.bind(this))
    }



    componentDidMount() {
        this.props.fetchMerchantProduct();
        this.props.fetchMerchantTag();
    }


    handleAddProduct(values){
        let data = {
            ...values,
            image_link: this.state.image_url
        };


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

            this.props.addNewProduct(store_name, data);


        }.bind(this))


    }


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


        })
    };


    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].secure_url,
                        image_link: result[0].secure_url
                    });
                }
            }.bind(this)

        );
    };


    render() {
        // let { price, description, image_url, image_link, status, name, tax, qty, tag} = this.state;
        // let  {productSaved}  = this.props.Product;
        // if (productSaved){
        //     window.location.href = "/d/products"
        // }
        // let parent = [];

        let { title} = this.state;
        let {tags, toggleTagModal} = this.props.Tag,
            tag =  _.valuesIn(tags).map(t => t.title);
        // console.log(tags, 'this is parent');

        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 hidden-sm hidden-xs">Add 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"}}> Add Product</div>
                                <div className="panel-wrapper collapse in" aria-expanded="true">
                                    {/*<button onClick={this.toggleAddTagModal} style={{color: 'white'}} className="btn label-custom pull-right m-l-20*/}
                                             {/*waves-effect waves-light">*/}
                                        {/*Add Tag*/}
                                    {/*</button>*/}
                                    <div className="panel-body">
                                        <AddProductForm
                                        showUploadWidget = {this.showUploadWidget}
                                        image_url = {this.state.image_url}
                                        tag = {tag}
                                        onSubmit={this.handleAddProduct}
                                        toggleTagModal={toggleTagModal}
                                        />
                                    </div>
                                </div>
                            </div>
                            <div>
                                <Modal isOpen={toggleTagModal} toggle={() => {this.props.toggleAddTagModal(false)}} className={this.props.className}>
                                    <ModalHeader toggle={this.props.toggleAddTagModal}>Add Tag</ModalHeader>
                                    <ModalBody>


                                        {/*<AddTagForm*/}
                                        {/*onSubmit={this.handleAddTag}*/}
                                        {/*/>*/}

                                        <Form>

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

                                            {/*<FormGroup>*/}
                                            {/*<Label for="exampleSelect">Status</Label>*/}
                                            {/*<Input type="select" name="status" value={status} onChange={this.handleInputChange} id="exampleSelect">*/}
                                            {/*<option>Select status</option>*/}
                                            {/*<option>Active</option>*/}
                                            {/*<option>Inactive</option>*/}

                                            {/*</Input>*/}
                                            {/*</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 {
        addNewProduct: (store_name,product) => {
            dispatch(
                addNewProduct(store_name, product)
            )
        },
        editProduct: (product, show) => {
            dispatch(
                editProduct(product, show)
            )
        },
        fetchMerchantProduct: () => {
            dispatch(
                fetchMerchantProduct()
            )
        },
        deleteProduct:(store_name, id) => {
            dispatch(
                deleteProduct(store_name, id)
            )
        },
        productSaved:(bool) => {
            dispatch(
                productSaved(bool)
            )
        },
        addNewTag: (store_name,tag) => {
            dispatch(
                addNewTag(store_name, tag)
            )
        },
        fetchMerchantTag: (store_name) => {
            dispatch(
                fetchMerchantTag(store_name)
            )
        },
        toggleTagModal:(bool) =>{
            dispatch(
                toggleTagModal(bool)
            )
        },

    }
};

AddProductPage.propTypes = {
    Account: PropTypes.object.isRequired,
    Product: PropTypes.object.isRequired,
    addNewProduct: PropTypes.func.isRequired
}

export default connect(mapStateToProps, mapDispatchToProps)(AddProductPage);

I added props: toggleAddTagModal to AddProductForm

instead of:

/// This is a sample one that I created
const renderMaterialInputField = ({input, meta: { touched }, autoComplete, type, pClass, label}) => {
let inputStyle = {
'form-control--active': touched && !isNil(input.value) && input.value.length >= 1
};

return(

<input {...input} type={type} autoComplete={autoComplete} className={form-control ${classNames(inputStyle)}} />
{label}

)
};