davidbonnet/cell_redux.html

## cell_redux.html
<html>
<script src="https://www.celljs.org/cell.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/redux/3.7.0/redux.min.js"></script>
<script>

function items(state = [], action) {
  switch (action.type) {
    case 'ADD':
      return state.concat(action.value)
    case 'CLEAR':
      return []
    default:
      return state
  }
}

var store = Redux.createStore(items)

function body(store) {
  return {
    $cell: true,
    type: 'body',
    style: "font-family: Helvetica; font-size: 14px;",
    $components: [
      {
        $type: "input",
        type: "text",
        placeholder: "Type something and press enter",
        style: "width: 100%; outline:none; padding: 5px;",
        $init: function () { this.focus() },
        onkeyup: function (event) {
          if (event.keyCode === 13) {
            store.dispatch({
              type: 'ADD',
              value: this.value,
            })
            this.value = ''
          }
        }
      },
      {
        $type: "button",
        type: "text",
        $text: 'Clear',
        onclick: function (event) {
          store.dispatch({
            type: 'CLEAR',
          })
        }
      },
      {
        $type: "ol",
        id: "list",
        _items: [],
        $components: [],
        $init: function () {
          var that = this
          store.subscribe(function () {
            var items = store.getState()
            if (items !== this._items) {
              that._items = items
            }
          })
        },
        $update: function () {
          this.$components = this._items.map(function (item) {
            return { $type: "li", $text: item }
          })
        }
      }
    ]
  }
}

var element = body(store)

</script>
</html>
	<html>
	<script src="https://www.celljs.org/cell.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/redux/3.7.0/redux.min.js"></script>
	<script>

	function items(state = [], action) {
	switch (action.type) {
	case 'ADD':
	return state.concat(action.value)
	case 'CLEAR':
	return []
	default:
	return state
	}
	}

	var store = Redux.createStore(items)

	function body(store) {
	return {
	$cell: true,
	type: 'body',
	style: "font-family: Helvetica; font-size: 14px;",
	$components: [
	{
	$type: "input",
	type: "text",
	placeholder: "Type something and press enter",
	style: "width: 100%; outline:none; padding: 5px;",
	$init: function () { this.focus() },
	onkeyup: function (event) {
	if (event.keyCode === 13) {
	store.dispatch({
	type: 'ADD',
	value: this.value,
	})
	this.value = ''
	}
	}
	},
	{
	$type: "button",
	type: "text",
	$text: 'Clear',
	onclick: function (event) {
	store.dispatch({
	type: 'CLEAR',
	})
	}
	},
	{
	$type: "ol",
	id: "list",
	_items: [],
	$components: [],
	$init: function () {
	var that = this
	store.subscribe(function () {
	var items = store.getState()
	if (items !== this._items) {
	that._items = items
	}
	})
	},
	$update: function () {
	this.$components = this._items.map(function (item) {
	return { $type: "li", $text: item }
	})
	}
	}
	]
	}
	}

	var element = body(store)

	</script>
	</html>