muuki88/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 -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
</head>
<body>
<div id="app"></div>
</body>
</html>

## index.js
import React from 'react';
import ReactDOM from 'react-dom';
import { applyMiddleware, createStore, combineReducers } from 'redux';
import createLogger from 'redux-logger';
import { Provider, connect } from 'react-redux';
import { Form, Field, createModelReducer, createFormReducer, getField } from 'react-redux-form';
import validator from 'validator';

const initialState = {
  name: '',
  password: '',
  age: 20
}


const registrationReducer = combineReducers({
    user: createModelReducer('registration.user', initialState),
    userForm: createFormReducer('registration.user')
});

const store = createStore(combineReducers({
    registration: registrationReducer
  }),
  applyMiddleware(createLogger())
);

const userValidators = {
  name: {
    required: (name) => name && name.length,
    length: (name) => validator.isLength(name, {min: 1, max: 160})
  },
  password: {
    required: (pass) => pass && pass.length,
    strength: (pass) => pass.length > 5
  }
}


const mapStateToProps = (state) => ({
  user: state.registration.user,
  userForm: state.registration.userForm
})

const hasError = (userForm, step) => {
  return userForm.validity[step] !== undefined && !userForm.validity[step]
}

const errorFedback = (userForm, step) => {
  if(hasError(userForm, step)) {
    return 'has-error';
  } else {
    return ''
  }
}

const UserForm = connect(mapStateToProps)(class UserForm extends React.Component {
  render() {
    let { user, userForm } = this.props;

    return (
      <Form model="registration.user" validators={{
        // spread operator ... might help here
        '': {
          // could be implemented less redundant and verbose
          step1: (user) => userValidators.name.required(user.name) && userValidators.name.length(user.name),
          step2: (user) => userValidators.password.required(user.password) && userValidators.password.strength(user.password)
        },

        // TODO: spread operator ... might help here
        // we need to add all field validations here as well
        name: userValidators.name,
        password: userValidators.password
      }}>
        <div className={`form-group has-feedback ${errorFedback(userForm, 'step1')}`}>
          <Field model="registration.user.name" validators={userValidators.name}>
            <label>User </label>
            <input className="form-control" type="text" />
            <div>{ user.name }</div>
            {!getField(userForm, 'name').valid && <strong>Errors: {JSON.stringify(getField(userForm, 'name').errors)}</strong>}
          </Field>
        </div>
        <hr/>
        <div className={`form-group has-feedback ${errorFedback(userForm, 'step2')}`}>
          <Field model="registration.user.password" validators={userValidators.password}>
            <label>Password </label>
            <input className="form-control" type="password" />
            {!getField(userForm, 'password').valid && <strong>Errors: {JSON.stringify(getField(userForm, 'password').errors)}</strong>}
          </Field>
        </div>
        <hr/>
        <div className={`form-group has-feedback ${errorFedback(userForm, 'step3')}`}>
          <Field model="registration.user.age">
            <label>Age </label>
            <input className="form-control" type="range" min="10" max="110" />
            { user.age }
          </Field>
        </div>
        <hr/>
        <button type="submit">Submit</button>
      </Form>
    )
  }
})

class App extends React.Component {
  render() {
    return (
      <Provider store={ store }>
        <UserForm />
      </Provider>
    )
  }
}

ReactDOM.render(<App />, document.getElementById('app'));

## package.json
{
  "name": "esnextbin-sketch",
  "version": "0.0.1",
  "dependencies": {
    "react": "0.14.7",
    "react-dom": "0.14.7",
    "redux": "3.3.1",
    "redux-logger": "2.6.0",
    "react-redux": "4.4.0",
    "react-redux-form": "0.7.0",
    "validator": "5.1.0",
    "babel-runtime": "6.3.19"
  }
}

## transpiled.js
'use strict';

var _stringify = require('babel-runtime/core-js/json/stringify');

var _stringify2 = _interopRequireDefault(_stringify);

var _getPrototypeOf = require('babel-runtime/core-js/object/get-prototype-of');

var _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf);

var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck');

var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);

var _createClass2 = require('babel-runtime/helpers/createClass');

var _createClass3 = _interopRequireDefault(_createClass2);

var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn');

var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);

var _inherits2 = require('babel-runtime/helpers/inherits');

var _inherits3 = _interopRequireDefault(_inherits2);

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _reactDom = require('react-dom');

var _reactDom2 = _interopRequireDefault(_reactDom);

var _redux = require('redux');

var _reduxLogger = require('redux-logger');

var _reduxLogger2 = _interopRequireDefault(_reduxLogger);

var _reactRedux = require('react-redux');

var _reactReduxForm = require('react-redux-form');

var _validator = require('validator');

var _validator2 = _interopRequireDefault(_validator);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

var initialState = {
  name: '',
  password: '',
  age: 20
};

var registrationReducer = (0, _redux.combineReducers)({
  user: (0, _reactReduxForm.createModelReducer)('registration.user', initialState),
  userForm: (0, _reactReduxForm.createFormReducer)('registration.user')
});

var store = (0, _redux.createStore)((0, _redux.combineReducers)({
  registration: registrationReducer
}), (0, _redux.applyMiddleware)((0, _reduxLogger2.default)()));

var userValidators = {
  name: {
    required: function required(name) {
      return name && name.length;
    },
    length: function length(name) {
      return _validator2.default.isLength(name, { min: 1, max: 160 });
    }
  },
  password: {
    required: function required(pass) {
      return pass && pass.length;
    },
    strength: function strength(pass) {
      return pass.length > 5;
    }
  }
};

var mapStateToProps = function mapStateToProps(state) {
  return {
    user: state.registration.user,
    userForm: state.registration.userForm
  };
};

var hasError = function hasError(userForm, step) {
  return userForm.validity[step] !== undefined && !userForm.validity[step];
};

var errorFedback = function errorFedback(userForm, step) {
  if (hasError(userForm, step)) {
    return 'has-error';
  } else {
    return '';
  }
};

var UserForm = (0, _reactRedux.connect)(mapStateToProps)((function (_React$Component) {
  (0, _inherits3.default)(UserForm, _React$Component);

  function UserForm() {
    (0, _classCallCheck3.default)(this, UserForm);
    return (0, _possibleConstructorReturn3.default)(this, (0, _getPrototypeOf2.default)(UserForm).apply(this, arguments));
  }

  (0, _createClass3.default)(UserForm, [{
    key: 'render',
    value: function render() {
      var _props = this.props;
      var user = _props.user;
      var userForm = _props.userForm;

      return _react2.default.createElement(
        _reactReduxForm.Form,
        { model: 'registration.user', validators: {
            // spread operator ... might help here
            '': {
              // could be implemented less redundant and verbose
              step1: function step1(user) {
                return userValidators.name.required(user.name) && userValidators.name.length(user.name);
              },
              step2: function step2(user) {
                return userValidators.password.required(user.password) && userValidators.password.strength(user.password);
              }
            },

            // TODO: spread operator ... might help here
            // we need to add all field validations here as well
            name: userValidators.name,
            password: userValidators.password
          } },
        _react2.default.createElement(
          'div',
          { className: 'form-group has-feedback ' + errorFedback(userForm, 'step1') },
          _react2.default.createElement(
            _reactReduxForm.Field,
            { model: 'registration.user.name', validators: userValidators.name },
            _react2.default.createElement(
              'label',
              null,
              'User '
            ),
            _react2.default.createElement('input', { className: 'form-control', type: 'text' }),
            _react2.default.createElement(
              'div',
              null,
              user.name
            ),
            !(0, _reactReduxForm.getField)(userForm, 'name').valid && _react2.default.createElement(
              'strong',
              null,
              'Errors: ',
              (0, _stringify2.default)((0, _reactReduxForm.getField)(userForm, 'name').errors)
            )
          )
        ),
        _react2.default.createElement('hr', null),
        _react2.default.createElement(
          'div',
          { className: 'form-group has-feedback ' + errorFedback(userForm, 'step2') },
          _react2.default.createElement(
            _reactReduxForm.Field,
            { model: 'registration.user.password', validators: userValidators.password },
            _react2.default.createElement(
              'label',
              null,
              'Password '
            ),
            _react2.default.createElement('input', { className: 'form-control', type: 'password' }),
            !(0, _reactReduxForm.getField)(userForm, 'password').valid && _react2.default.createElement(
              'strong',
              null,
              'Errors: ',
              (0, _stringify2.default)((0, _reactReduxForm.getField)(userForm, 'password').errors)
            )
          )
        ),
        _react2.default.createElement('hr', null),
        _react2.default.createElement(
          'div',
          { className: 'form-group has-feedback ' + errorFedback(userForm, 'step3') },
          _react2.default.createElement(
            _reactReduxForm.Field,
            { model: 'registration.user.age' },
            _react2.default.createElement(
              'label',
              null,
              'Age '
            ),
            _react2.default.createElement('input', { className: 'form-control', type: 'range', min: '10', max: '110' }),
            user.age
          )
        ),
        _react2.default.createElement('hr', null),
        _react2.default.createElement(
          'button',
          { type: 'submit' },
          'Submit'
        )
      );
    }
  }]);
  return UserForm;
})(_react2.default.Component));

var App = (function (_React$Component2) {
  (0, _inherits3.default)(App, _React$Component2);

  function App() {
    (0, _classCallCheck3.default)(this, App);
    return (0, _possibleConstructorReturn3.default)(this, (0, _getPrototypeOf2.default)(App).apply(this, arguments));
  }

  (0, _createClass3.default)(App, [{
    key: 'render',
    value: function render() {
      return _react2.default.createElement(
        _reactRedux.Provider,
        { store: store },
        _react2.default.createElement(UserForm, null)
      );
    }
  }]);
  return App;
})(_react2.default.Component);

_reactDom2.default.render(_react2.default.createElement(App, null), document.getElementById('app'));
	<!doctype html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>ESNextbin Sketch</title>
	<!-- put additional styles and scripts here -->
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
	</head>
	<body>
	<div id="app"></div>
	</body>
	</html>
	import React from 'react';
	import ReactDOM from 'react-dom';
	import { applyMiddleware, createStore, combineReducers } from 'redux';
	import createLogger from 'redux-logger';
	import { Provider, connect } from 'react-redux';
	import { Form, Field, createModelReducer, createFormReducer, getField } from 'react-redux-form';
	import validator from 'validator';

	const initialState = {
	name: '',
	password: '',
	age: 20
	}


	const registrationReducer = combineReducers({
	user: createModelReducer('registration.user', initialState),
	userForm: createFormReducer('registration.user')
	});

	const store = createStore(combineReducers({
	registration: registrationReducer
	}),
	applyMiddleware(createLogger())
	);

	const userValidators = {
	name: {
	required: (name) => name && name.length,
	length: (name) => validator.isLength(name, {min: 1, max: 160})
	},
	password: {
	required: (pass) => pass && pass.length,
	strength: (pass) => pass.length > 5
	}
	}


	const mapStateToProps = (state) => ({
	user: state.registration.user,
	userForm: state.registration.userForm
	})

	const hasError = (userForm, step) => {
	return userForm.validity[step] !== undefined && !userForm.validity[step]
	}

	const errorFedback = (userForm, step) => {
	if(hasError(userForm, step)) {
	return 'has-error';
	} else {
	return ''
	}
	}

	const UserForm = connect(mapStateToProps)(class UserForm extends React.Component {
	render() {
	let { user, userForm } = this.props;

	return (
	<Form model="registration.user" validators={{
	// spread operator ... might help here
	'': {
	// could be implemented less redundant and verbose
	step1: (user) => userValidators.name.required(user.name) && userValidators.name.length(user.name),
	step2: (user) => userValidators.password.required(user.password) && userValidators.password.strength(user.password)
	},

	// TODO: spread operator ... might help here
	// we need to add all field validations here as well
	name: userValidators.name,
	password: userValidators.password
	}}>
	<div className={`form-group has-feedback ${errorFedback(userForm, 'step1')}`}>
	<Field model="registration.user.name" validators={userValidators.name}>
	<label>User </label>
	<input className="form-control" type="text" />
	<div>{ user.name }</div>
	{!getField(userForm, 'name').valid && <strong>Errors: {JSON.stringify(getField(userForm, 'name').errors)}</strong>}
	</Field>
	</div>
	<hr/>
	<div className={`form-group has-feedback ${errorFedback(userForm, 'step2')}`}>
	<Field model="registration.user.password" validators={userValidators.password}>
	<label>Password </label>
	<input className="form-control" type="password" />
	{!getField(userForm, 'password').valid && <strong>Errors: {JSON.stringify(getField(userForm, 'password').errors)}</strong>}
	</Field>
	</div>
	<hr/>
	<div className={`form-group has-feedback ${errorFedback(userForm, 'step3')}`}>
	<Field model="registration.user.age">
	<label>Age </label>
	<input className="form-control" type="range" min="10" max="110" />
	{ user.age }
	</Field>
	</div>
	<hr/>
	<button type="submit">Submit</button>
	</Form>
	)
	}
	})

	class App extends React.Component {
	render() {
	return (
	<Provider store={ store }>
	<UserForm />
	</Provider>
	)
	}
	}

	ReactDOM.render(<App />, document.getElementById('app'));
	{
	"name": "esnextbin-sketch",
	"version": "0.0.1",
	"dependencies": {
	"react": "0.14.7",
	"react-dom": "0.14.7",
	"redux": "3.3.1",
	"redux-logger": "2.6.0",
	"react-redux": "4.4.0",
	"react-redux-form": "0.7.0",
	"validator": "5.1.0",
	"babel-runtime": "6.3.19"
	}
	}
	'use strict';

	var _stringify = require('babel-runtime/core-js/json/stringify');

	var _stringify2 = _interopRequireDefault(_stringify);

	var _getPrototypeOf = require('babel-runtime/core-js/object/get-prototype-of');

	var _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf);

	var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck');

	var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);

	var _createClass2 = require('babel-runtime/helpers/createClass');

	var _createClass3 = _interopRequireDefault(_createClass2);

	var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn');

	var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);

	var _inherits2 = require('babel-runtime/helpers/inherits');

	var _inherits3 = _interopRequireDefault(_inherits2);

	var _react = require('react');

	var _react2 = _interopRequireDefault(_react);

	var _reactDom = require('react-dom');

	var _reactDom2 = _interopRequireDefault(_reactDom);

	var _redux = require('redux');

	var _reduxLogger = require('redux-logger');

	var _reduxLogger2 = _interopRequireDefault(_reduxLogger);

	var _reactRedux = require('react-redux');

	var _reactReduxForm = require('react-redux-form');

	var _validator = require('validator');

	var _validator2 = _interopRequireDefault(_validator);

	function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

	var initialState = {
	name: '',
	password: '',
	age: 20
	};

	var registrationReducer = (0, _redux.combineReducers)({
	user: (0, _reactReduxForm.createModelReducer)('registration.user', initialState),
	userForm: (0, _reactReduxForm.createFormReducer)('registration.user')
	});

	var store = (0, _redux.createStore)((0, _redux.combineReducers)({
	registration: registrationReducer
	}), (0, _redux.applyMiddleware)((0, _reduxLogger2.default)()));

	var userValidators = {
	name: {
	required: function required(name) {
	return name && name.length;
	},
	length: function length(name) {
	return _validator2.default.isLength(name, { min: 1, max: 160 });
	}
	},
	password: {
	required: function required(pass) {
	return pass && pass.length;
	},
	strength: function strength(pass) {
	return pass.length > 5;
	}
	}
	};

	var mapStateToProps = function mapStateToProps(state) {
	return {
	user: state.registration.user,
	userForm: state.registration.userForm
	};
	};

	var hasError = function hasError(userForm, step) {
	return userForm.validity[step] !== undefined && !userForm.validity[step];
	};

	var errorFedback = function errorFedback(userForm, step) {
	if (hasError(userForm, step)) {
	return 'has-error';
	} else {
	return '';
	}
	};

	var UserForm = (0, _reactRedux.connect)(mapStateToProps)((function (_React$Component) {
	(0, _inherits3.default)(UserForm, _React$Component);

	function UserForm() {
	(0, _classCallCheck3.default)(this, UserForm);
	return (0, _possibleConstructorReturn3.default)(this, (0, _getPrototypeOf2.default)(UserForm).apply(this, arguments));
	}

	(0, _createClass3.default)(UserForm, [{
	key: 'render',
	value: function render() {
	var _props = this.props;
	var user = _props.user;
	var userForm = _props.userForm;

	return _react2.default.createElement(
	_reactReduxForm.Form,
	{ model: 'registration.user', validators: {
	// spread operator ... might help here
	'': {
	// could be implemented less redundant and verbose
	step1: function step1(user) {
	return userValidators.name.required(user.name) && userValidators.name.length(user.name);
	},
	step2: function step2(user) {
	return userValidators.password.required(user.password) && userValidators.password.strength(user.password);
	}
	},

	// TODO: spread operator ... might help here
	// we need to add all field validations here as well
	name: userValidators.name,
	password: userValidators.password
	} },
	_react2.default.createElement(
	'div',
	{ className: 'form-group has-feedback ' + errorFedback(userForm, 'step1') },
	_react2.default.createElement(
	_reactReduxForm.Field,
	{ model: 'registration.user.name', validators: userValidators.name },
	_react2.default.createElement(
	'label',
	null,
	'User '
	),
	_react2.default.createElement('input', { className: 'form-control', type: 'text' }),
	_react2.default.createElement(
	'div',
	null,
	user.name
	),
	!(0, _reactReduxForm.getField)(userForm, 'name').valid && _react2.default.createElement(
	'strong',
	null,
	'Errors: ',
	(0, _stringify2.default)((0, _reactReduxForm.getField)(userForm, 'name').errors)
	)
	)
	),
	_react2.default.createElement('hr', null),
	_react2.default.createElement(
	'div',
	{ className: 'form-group has-feedback ' + errorFedback(userForm, 'step2') },
	_react2.default.createElement(
	_reactReduxForm.Field,
	{ model: 'registration.user.password', validators: userValidators.password },
	_react2.default.createElement(
	'label',
	null,
	'Password '
	),
	_react2.default.createElement('input', { className: 'form-control', type: 'password' }),
	!(0, _reactReduxForm.getField)(userForm, 'password').valid && _react2.default.createElement(
	'strong',
	null,
	'Errors: ',
	(0, _stringify2.default)((0, _reactReduxForm.getField)(userForm, 'password').errors)
	)
	)
	),
	_react2.default.createElement('hr', null),
	_react2.default.createElement(
	'div',
	{ className: 'form-group has-feedback ' + errorFedback(userForm, 'step3') },
	_react2.default.createElement(
	_reactReduxForm.Field,
	{ model: 'registration.user.age' },
	_react2.default.createElement(
	'label',
	null,
	'Age '
	),
	_react2.default.createElement('input', { className: 'form-control', type: 'range', min: '10', max: '110' }),
	user.age
	)
	),
	_react2.default.createElement('hr', null),
	_react2.default.createElement(
	'button',
	{ type: 'submit' },
	'Submit'
	)
	);
	}
	}]);
	return UserForm;
	})(_react2.default.Component));

	var App = (function (_React$Component2) {
	(0, _inherits3.default)(App, _React$Component2);

	function App() {
	(0, _classCallCheck3.default)(this, App);
	return (0, _possibleConstructorReturn3.default)(this, (0, _getPrototypeOf2.default)(App).apply(this, arguments));
	}

	(0, _createClass3.default)(App, [{
	key: 'render',
	value: function render() {
	return _react2.default.createElement(
	_reactRedux.Provider,
	{ store: store },
	_react2.default.createElement(UserForm, null)
	);
	}
	}]);
	return App;
	})(_react2.default.Component);

	_reactDom2.default.render(_react2.default.createElement(App, null), document.getElementById('app'));