temp-react

import React, {Component} from 'react';
import {reduxForm} from 'redux-form';
import {connect} from 'react-redux';
import _ from 'lodash';
import { selectAllDimension } from './../../actions/studio-setting-actions';

var FIELDS = {};

class SetingPriceList extends Component{
    constructor(props){
        super(props);

        this.state = {
            fieldFinish: false,
            priceList:{},
            list: {},
        };

        this.onSubmit = this.onSubmit.bind(this);
    
    }

    onSubmit(props){
        console.log('sub: ', props);
    }

    componentWillMount(){
        
        this.props.selectAllDimension()
            .then(() => {
                
                setTimeout(function () {
                    this.setState({fieldFinish: true});
                }.bind(this), 500);

                this.props.list.data.map((d) => {
                    FIELDS[d.id] = d;
                });
                
            });
    }


    renderField(fieldConfig, field){
    
        const fieldHelper = this.props.fields[field];
        return(
            <tr className="fiyatlar" key={fieldConfig.id}>
                <td>Canvas</td>
                <td>200 x 100</td>
                <td>
                    <NumberFormat type="text" className="control" placeholder="Genislik" {...fieldHelper}/>
                    <div className="text-help">
                        {fieldHelper.touched ? fieldHelper.error : ''}
                    </div>
                </td>
            </tr>
        );
    }


    render(){
        const {handleSubmit} = this.props;
        return (
            <div>
                <div className="row">
                    <form onSubmit={handleSubmit(this.onSubmit)}>
                        <div className="panel panel-default">
                            <div className="panel-heading">
                                <h3 className="panel-title">Fiyat Listesi</h3>
                            </div>
                            <div className="panel-body">
                                <table className="table table-bordered table-striped">
                                    <thead>
                                    <tr>
                                        <th>İsim</th>
                                        <th>Boyut</th>
                                        <th>Fiyat</th>
                                    </tr>
                                    </thead>
                                    <tbody className="middle-align">
                                    {this.state.fieldFinish ? _.map(FIELDS, this.renderField.bind(this)):this.state.fieldFinish}
                                    </tbody>
                                </table>
                            </div>
                        </div>
                        <div className="form-group pull-right">
                            <button type="submit" className="btn btn-primary">Onayla</button>
                        </div>
                    </form>
                </div>
            </div>
        );
    }
}


function validate(values) {
    const errors = {};

    _.each(FIELDS, (id, field) => {
        if(!values[field]){
            errors[field] = 'Gerekli';
        }else if(values[field].length > 5){
            errors[field] = 'Daha kucuk olmali';
        }
    });

    return errors;
}

SetingPriceList = reduxForm({
    form: 'PriceListForm',
    fields: _.keys(FIELDS),
    validate
},null,{selectAllDimension})(SetingPriceList);

function mapStateToProps(state) {
    return{
        list: state.studioSetting.list
    }
}

export default connect(mapStateToProps)(SetingPriceList);