Cacher is the code snippet organizer for pro developers

'use strict';

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 _extends2 = require('babel-runtime/helpers/extends');

var _extends3 = _interopRequireDefault(_extends2);

var _defineProperty2 = require('babel-runtime/helpers/defineProperty');

var _defineProperty3 = _interopRequireDefault(_defineProperty2);

var _toConsumableArray2 = require('babel-runtime/helpers/toConsumableArray');

var _toConsumableArray3 = _interopRequireDefault(_toConsumableArray2);

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

var _reactDom2 = _interopRequireDefault(_reactDom);

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _redux = require('redux');

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

var _reduxCandy = require('redux-candy');

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

var initialState = {
  todos: [],
  todoCompletes: {}
};

var reducer = (0, _reduxCandy.createReducer)(initialState);

var nextTodoId = 0;

var creteNewTodo = function creteNewTodo(text) {
  return {
    text: text,
    id: nextTodoId++,
    completeFlag: false
  };
};

var addTodo = (0, _reduxCandy.createAction)('ADD_TODO', 'todos', function (todos, text) {
  return [].concat((0, _toConsumableArray3.default)(todos), [creteNewTodo(text)]);
});

var toggleTodo = (0, _reduxCandy.createAction)('ADD_TODO', function (id) {
  return {
    todoCompletes: (0, _defineProperty3.default)({}, id, function (flag) {
      return !flag;
    })
  };
});

var Todo = function Todo(_ref) {
  var onClick = _ref.onClick;
  var completed = _ref.completed;
  var text = _ref.text;
  var id = _ref.id;
  return _react2.default.createElement(
    'li',
    {
      onClick: onClick,
      style: { textDecoration: completed ? 'line-through' : 'none' }
    },
    id,
    ': ',
    text
  );
};

var TodoList = function TodoList(_ref2) {
  var todos = _ref2.todos;
  var todoCompletes = _ref2.todoCompletes;
  var dispatch = _ref2.dispatch;

  return _react2.default.createElement(
    'ul',
    null,
    todos.map(function (todo) {
      return _react2.default.createElement(Todo, (0, _extends3.default)({
        key: todo.id,
        completed: todoCompletes[todo.id]
      }, todo, {
        onClick: function onClick() {
          return dispatch(toggleTodo(todo.id));
        }
      }));
    })
  );
};

var AddTodo = function AddTodo(_ref3) {
  var dispatch = _ref3.dispatch;

  var input = void 0;
  return _react2.default.createElement(
    'div',
    null,
    _react2.default.createElement(
      'form',
      { onSubmit: function onSubmit(e) {
          e.preventDefault();
          if (!input.value.trim()) {
            return;
          }
          dispatch(addTodo(input.value));
          input.value = '';
        } },
      _react2.default.createElement('input', { ref: function ref(node) {
          input = node;
        } }),
      _react2.default.createElement(
        'button',
        { type: 'submit' },
        'Add Todo'
      )
    )
  );
};

var todoMapStateToProps = function todoMapStateToProps(state) {
  return state;
};

var TodoListContainer = (0, _reactRedux.connect)(todoMapStateToProps)(TodoList);
var AddTodoContainer = (0, _reactRedux.connect)(function (state) {
  return state;
})(AddTodo);

var App = function (_Component) {
  (0, _inherits3.default)(App, _Component);

  function App() {
    (0, _classCallCheck3.default)(this, App);

    var _this = (0, _possibleConstructorReturn3.default)(this, (0, _getPrototypeOf2.default)(App).call(this));

    _this.store = (0, _redux.createStore)(reducer);
    return _this;
  }

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

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

{
  "name": "esnextbin-sketch",
  "version": "0.0.0",
  "dependencies": {
    "babel-runtime": "6.20.0",
    "react": "15.4.1",
    "redux": "3.6.0",
    "react-redux": "5.0.1",
    "redux-candy": "2.0.0",
    "react-dom": "15.4.1"
  }
}

import ReactDOM from 'react-dom';
import React, { Component } from 'react';
import { createStore } from 'redux'
import { Provider, connect } from 'react-redux'
import { createReducer, createAction } from 'redux-candy'

const initialState = {
  todos: [],
  todoCompletes: {},
}

const reducer = createReducer(initialState)

let nextTodoId = 0

const creteNewTodo = (text) => ({
  text,
  id: nextTodoId++,
  completeFlag: false
})

const addTodo = createAction('ADD_TODO', 'todos', (todos, text) => (
  [ ...todos, creteNewTodo(text) ]
) )

const toggleTodo = createAction('ADD_TODO', (id) => ({
  todoCompletes: {
    [id]: (flag) => {
      return !flag
    }
  }
}))

const Todo = ({ onClick, completed, text, id }) => (
  <li
    onClick={onClick}
    style={{ textDecoration: completed ? 'line-through' : 'none'}}
  >
    {id}: {text}
  </li>
)

const TodoList = ({ todos, todoCompletes, dispatch }) => {
  return (
    <ul>
      {todos.map(todo =>
        <Todo
          key={todo.id}
          completed={todoCompletes[todo.id]}
          {...todo}
          onClick={() => dispatch(toggleTodo(todo.id))}
        />
      )}
    </ul>
  )
}

const AddTodo = ({ dispatch }) => {
  let input
  return (
    <div>
      <form onSubmit={e => {
        e.preventDefault()
        if (!input.value.trim()) {
          return
        }
        dispatch(addTodo(input.value))
        input.value = ''
      }}>
        <input ref={node => {
          input = node
        }} />
        <button type="submit">
          Add Todo
        </button>
      </form>
    </div>
  )
}

const todoMapStateToProps = (state) => state

const TodoListContainer = connect(todoMapStateToProps)(TodoList)
const AddTodoContainer = connect(state => state)(AddTodo)

class App extends Component {
  constructor(){
    super()
    this.store = createStore(reducer)
  }
  render() {
    return (
      <Provider store={this.store}>
        <div>
          <AddTodoContainer />
          <TodoListContainer />
        </div>
      </Provider>
    );
  }
}

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

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