tiagoefmoraes/esnextbin.md

## esnextbin.md

      
    Raw
  

              esnextbin.md
            
          
    made with esnextbin

  
## index.html
<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>ESNextbin Sketch</title>
  <!-- put additional styles and scripts here -->
</head>
<body>
  <!-- put markup and other contents here -->
  <div id="app"></div>
</body>
</html>

## index.js
import React, { Component, PropTypes } from 'react';
import ReactDOM from 'react-dom';
import {
  createStore,
  combineReducers,
  applyMiddleware
} from 'redux';
import { connect, Provider } from 'react-redux';
import {
  Form,
  Control,
  Errors,
  actions,
  combineForms,
} from 'react-redux-form';
import thunk from 'redux-thunk';
import createLogger from 'redux-logger';
import isEmpty_ from 'validator/lib/isEmpty';

const store = createStore(combineForms({
  user: {
    username: 'teste',
    items: [{name: 'Item 1', subitems: []},
            {name: '', subitems: []}]
  },
}), applyMiddleware(thunk, createLogger()));


const INITIAL_ITEM = {name: '', subitems: []};
const INITIAL_SUBITEM = {name: ''};
const isRequired = value => !isEmpty_(value);


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

    this.onItemAdd = this.onItemAdd.bind(this);
    this.onSubItemAdd = this.onSubItemAdd.bind(this);
    this.onItemDelete = this.onItemDelete.bind(this);
    this.onSubmit = this.onSubmit.bind(this);
  }

  onItemDelete(name) {
    const { dispatch } = this.props;
    if (confirm("Delete?")) {
      //dispatch(actions.filter('user.items', (item) => item.name !== name));
      dispatch(actions.remove('user.items', 1);
    }
  }

  onItemAdd() {
    const { dispatch } = this.props;
    dispatch(actions.push('user.items', INITIAL_ITEM));
  }

  onSubmit(data) {
    console.error("################ handleSubmit(): %O ################", data);
  }

  onSubItemAdd(itemIndex) {
    const { dispatch } = this.props;
    dispatch(actions.push(`user.items[${itemIndex}].subitems`, INITIAL_SUBITEM));
  }

  render() {
    const { user } = this.props;
    const itemsValidators = user.items.reduce((validators: any, _: any, index: any) => {
      validators[`items.${index}.name`] = { isRequired: (val: any) => !!val }
      return validators;
    }, {})

    return (
      <Form
        model="user"
        onSubmit={this.onSubmit}
        validators={itemsValidators}
      >
        <h2>User</h2>
        <label>Username:</label>

        <Control.text
          model=".username"
          validators={{isRequired}} />

        <Errors
          show={true}
          model=".username"
          messages={{isRequired: "Please enter a name!"}}/>
        <br />

        <h3>Items</h3>
        {user.items.map((item, itemIndex) =>
          <div key={itemIndex} style={{backgroundColor: "#dddddd", margin: "10px"}}>
            <label>Name:</label>
            <Control.text
              model={`user.items[${itemIndex}].name`}
              />

            <button
              type="button"
              onClick={() => this.onItemDelete(item.name)}>Remove item</button>

            <Errors
              show={true}
              model={`user.items[${itemIndex}].name`}
              messages={{isRequired: "Please enter a name!"}} />

            <div style={{backgroundColor: '#eee'}}>
              <h4>SubItems</h4>
              {item.subitems.map((subitem, subItemIndex) =>
                <div key={subItemIndex}>
                  <label>Name:</label>

                  <Control.text
                    model={`user.items[${itemIndex}].subitems[${subItemIndex}].name`}
                    validators={{isRequired}} />

                  <Errors
                    show={true}
                    model={`user.items[${itemIndex}].subitems[${subItemIndex}].name`}
                    messages={{isRequired: "Please enter a name!"}} />
                </div>
              )}
              <br />

              <button
                type="button"
                onClick={() => this.onSubItemAdd(itemIndex)}>Add subitem</button>
            </div>
          </div>
        )}

        <br />
        <button type="button" onClick={this.onItemAdd}>Add item</button>
        <br /><br /><br />
        <button type="submit">Submit!</button>
      </Form>
    );
  }
}

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

const BoundApp = connect(mapStateToProps)(App);

ReactDOM.render(
  <Provider store={store}>
    <BoundApp />
  </Provider>
, document.querySelector('#app'));

## package.json
{
  "name": "esnextbin-sketch",
  "version": "0.0.0",
  "dependencies": {
    "react": "15.3.2",
    "react-dom": "15.3.2",
    "redux": "3.6.0",
    "react-redux": "4.4.5",
    "react-redux-form": "1.2.2",
    "redux-thunk": "2.1.0",
    "redux-logger": "2.7.4",
    "babel-runtime": "6.18.0",
    "validator": "6.1.0"
  }
}

## transpiled.js
/*
unknown: Unexpected token (48:46)
  46 |     if (confirm("Delete?")) {
  47 |       //dispatch(actions.filter('user.items', (item) => item.name !== name));
> 48 |       dispatch(actions.remove('user.items', 1);
     |                                               ^
  49 |     }
  50 |   }
  51 |
*/
	<!doctype html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>ESNextbin Sketch</title>
	<!-- put additional styles and scripts here -->
	</head>
	<body>
	<!-- put markup and other contents here -->
	<div id="app"></div>
	</body>
	</html>
	import React, { Component, PropTypes } from 'react';
	import ReactDOM from 'react-dom';
	import {
	createStore,
	combineReducers,
	applyMiddleware
	} from 'redux';
	import { connect, Provider } from 'react-redux';
	import {
	Form,
	Control,
	Errors,
	actions,
	combineForms,
	} from 'react-redux-form';
	import thunk from 'redux-thunk';
	import createLogger from 'redux-logger';
	import isEmpty_ from 'validator/lib/isEmpty';

	const store = createStore(combineForms({
	user: {
	username: 'teste',
	items: [{name: 'Item 1', subitems: []},
	{name: '', subitems: []}]
	},
	}), applyMiddleware(thunk, createLogger()));


	const INITIAL_ITEM = {name: '', subitems: []};
	const INITIAL_SUBITEM = {name: ''};
	const isRequired = value => !isEmpty_(value);


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

	this.onItemAdd = this.onItemAdd.bind(this);
	this.onSubItemAdd = this.onSubItemAdd.bind(this);
	this.onItemDelete = this.onItemDelete.bind(this);
	this.onSubmit = this.onSubmit.bind(this);
	}

	onItemDelete(name) {
	const { dispatch } = this.props;
	if (confirm("Delete?")) {
	//dispatch(actions.filter('user.items', (item) => item.name !== name));
	dispatch(actions.remove('user.items', 1);
	}
	}

	onItemAdd() {
	const { dispatch } = this.props;
	dispatch(actions.push('user.items', INITIAL_ITEM));
	}

	onSubmit(data) {
	console.error("################ handleSubmit(): %O ################", data);
	}

	onSubItemAdd(itemIndex) {
	const { dispatch } = this.props;
	dispatch(actions.push(`user.items[${itemIndex}].subitems`, INITIAL_SUBITEM));
	}

	render() {
	const { user } = this.props;
	const itemsValidators = user.items.reduce((validators: any, _: any, index: any) => {
	validators[`items.${index}.name`] = { isRequired: (val: any) => !!val }
	return validators;
	}, {})

	return (
	<Form
	model="user"
	onSubmit={this.onSubmit}
	validators={itemsValidators}
	>
	<h2>User</h2>
	<label>Username:</label>

	<Control.text
	model=".username"
	validators={{isRequired}} />

	<Errors
	show={true}
	model=".username"
	messages={{isRequired: "Please enter a name!"}}/>
	<br />

	<h3>Items</h3>
	{user.items.map((item, itemIndex) =>
	<div key={itemIndex} style={{backgroundColor: "#dddddd", margin: "10px"}}>
	<label>Name:</label>
	<Control.text
	model={`user.items[${itemIndex}].name`}
	/>

	<button
	type="button"
	onClick={() => this.onItemDelete(item.name)}>Remove item</button>

	<Errors
	show={true}
	model={`user.items[${itemIndex}].name`}
	messages={{isRequired: "Please enter a name!"}} />

	<div style={{backgroundColor: '#eee'}}>
	<h4>SubItems</h4>
	{item.subitems.map((subitem, subItemIndex) =>
	<div key={subItemIndex}>
	<label>Name:</label>

	<Control.text
	model={`user.items[${itemIndex}].subitems[${subItemIndex}].name`}
	validators={{isRequired}} />

	<Errors
	show={true}
	model={`user.items[${itemIndex}].subitems[${subItemIndex}].name`}
	messages={{isRequired: "Please enter a name!"}} />
	</div>
	)}
	<br />

	<button
	type="button"
	onClick={() => this.onSubItemAdd(itemIndex)}>Add subitem</button>
	</div>
	</div>
	)}

	<br />
	<button type="button" onClick={this.onItemAdd}>Add item</button>
	<br /><br /><br />
	<button type="submit">Submit!</button>
	</Form>
	);
	}
	}

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

	const BoundApp = connect(mapStateToProps)(App);

	ReactDOM.render(
	<Provider store={store}>
	<BoundApp />
	</Provider>
	, document.querySelector('#app'));
	{
	"name": "esnextbin-sketch",
	"version": "0.0.0",
	"dependencies": {
	"react": "15.3.2",
	"react-dom": "15.3.2",
	"redux": "3.6.0",
	"react-redux": "4.4.5",
	"react-redux-form": "1.2.2",
	"redux-thunk": "2.1.0",
	"redux-logger": "2.7.4",
	"babel-runtime": "6.18.0",
	"validator": "6.1.0"
	}
	}
	/*
	unknown: Unexpected token (48:46)
	46 \| if (confirm("Delete?")) {
	47 \| //dispatch(actions.filter('user.items', (item) => item.name !== name));
	> 48 \| dispatch(actions.remove('user.items', 1);
	\| ^
	49 \| }
	50 \| }
	51 \|
	*/