Untitled

<!DOCTYPE html>
<html>

<head>
  <link href="style.css" rel="stylesheet">
  <link href="//cdn.jsdelivr.net/picnicss/4.1.1/picnic.min.css" rel="stylesheet">
</head>

<body>

  <h1>Hello Mag.JS - Redux simple Todo!</h1>
  <a target="_tab" href="https://github.com/magnumjs/mag.js">GitHub</a>
  <hr/>

  <div id="todo">
    <h3>TODO</h3>

    <ul>
      <li class="items"></li>
    </ul>

    <form>
      <input name="text">
      <button>Add #<span class="total"></span>
      </button>
    </form>

  </div>

  <script src="//rawgit.com/magnumjs/mag.js/master/dist/mag.0.21.3.min.js"></script>
  <script src="//rawgit.com/magnumjs/mag.js/master/dist/mag.addons.0.21.min.js"></script>
  <script src="//rawgit.com/magnumjs/mag.js/master/dist/mag-redux.0.22.min.js"></script>
  <script src="//rawgit.com/magnumjs/mag.js/master/src/addons/redux-middleware.js"></script>

  <script src="redux.js"></script>
  <script src="module.js"></script>
  <script src="init.js"></script>
</body>

</html>

//Component definition and instance creation - not executed
var mod = mag.create('todo', {

  controller: function(props) {

    this.input = '';
    this.items = props.todos.items;

    this.total = function() {
      return props.todos.items.length + 1;
    }

    this.text = {
      _config: function(node, isNew) {
        if (isNew) node.focus()
      }
    }
  },
  view: function(state, props) {

    state.form = {
      _onSubmit: function(e) {
        props.addTodo(state.input);
        state.input = '';
        return false;
      }
    };

  }
});

//Redux constants:
var constants = {
  'ADD_TODO': 'ADD_TODO'
};


//Redux Actions mappers:
var actions = {
  addTodo: function(text) {
    return {
      type: constants.ADD_TODO,
      text: text
    }
  }
};

//Redux State reducer: 
var reducer = function(state, action) {
  if (!state) {
    return {
      items: [],
      text: ""
    };
  }

  switch (action.type) {
    case constants.ADD_TODO:
      state.items.push(action.text);

      return Object.assign, ({}, state, {
        items: state.items,
        text: action.text
      });

    default:
      return state;
  }
};

//Combine Reducers:
var reducers = {
  "todos": reducer
};

//Connect & run Component:
mag.reduxConnect({}, actions, reducers, [Redux.middle.logger])(mod);

li:empty {
  display:none;
}