untitled.js

var addScript = url => {
	document.open ()
	document.write (`<script src="${url}"></script>`)
	document.close ()
}

skewer.log ("to skewer")

// addScript (`https://cdnjs.cloudflare.com/ajax/libs/dio/2.1.1/dio.min.js`)
// addScript (`https://cdnjs.cloudflare.com/ajax/libs/dio/2.1.1/dio.js`)

			function TodoItem (props) {
				return h('li', {
					onClick: props.handleDelete, 
					id: props.item.id, 
					style: {cursor: 'pointer'},
					key: props.item.id
				}, props.item.value)
			}

			function TodoList (props) {
		    	return h('ul', props.items.map(function (value) {
		    					return TodoItem({item: value, handleDelete: props.handleDelete})
		    				})
    					)
			}

			function TodoApp (props) {
				// will always contain the value of input.value oninput
				var text = dio.stream(''),
					// reference to the input dom element
					input = dio.stream('')

		  		function handleSubmit (e) {
		    		e.preventDefault();

		    		var value = text();

		    		el = input();

		    		if (value != '') {
		    			TodoStore.dispatch({type:'ADD', id: Date.now(), value: value})
		    			el.value = text('')();
		    		}
		  		}
		  		function handleDelete () {
		  			dio.animateWith.transitions('slideUp')(this, function(node){
		  				TodoStore.dispatch({type: 'REMOVE', id: node.id});
		  			})
		  		}

		  		function render (props) {
		  			return h('div.TodoApp',
		  						h('h3', 'TODO'),
		  						h('form', {onsubmit: this.handleSubmit},
		  							h('input', {ref: input, oninput: this.withAttr('value', text)}),
		  							h('button', 'Add #' + (props.items.length+1))
  								),
  								TodoList({items: props.items, handleDelete: handleDelete})
		  					)
		  		}

		  		return {
	  				render: render,
	  				handleSubmit: handleSubmit
		  		}
			}


			// ------------------------- store ------------------------- //

			
			function TodoStoreReducer (state, action) {
				state = state || {
					items: [
						{id: '1234', value: 'one', completed: false},
						{id: '0000', value: 'two', completed: false},
						{id: '1254', value: 'three', completed: false},
						{id: '0090', value: 'four', completed: false},
						{id: '12A4', value: 'five', completed: false},
						{id: '00C0', value: 'six', completed: false}
					]
				}

				switch (action.type) {
					case 'ADD':
						var item = {id: action.id, value: action.value, completed: false};

						var items;
						
						// if (state.items.length > 2) {
						// 	var middle = state.items.slice(0);
						// 		middle.pop();
						// 		middle.shift();
						// 		middle = middle.concat(item);

						// 	items = [state.items[0]].concat(middle).concat(state.items[state.items.length-1]);
						// }

						return Object.assign({}, state, {
							// add to start
							items: [{id: action.id, value: action.value, completed: false}].concat(state.items)

							// add to end
							// items: state.items.concat({id: action.id, value: action.value, completed: false})

							// add to middle
							// items: items ? items : state.items.concat({id: action.id, value: action.value, completed: false})
						})
					case 'REMOVE':
						var items = state.items.filter(function (item) {
							if (item.id != action.id) {
								return item
							}
						})

						return Object.assign({}, state, {
							items: items
						})
					case 'TOGGLE':
						return state.map(function (item) {
							if (item.id !== action.id) {
								return todo
							}

							return Object.assign({}, item, {completed: !item.completed})
						})
					case 'FILTER':
						return Object.assign({}, state, {
							items: state.items.filter(function (item) {
								var 
								keys   = Object.keys(action).slice(1)
								length = keys.length

								for (var i = 0, value = keys[i]; i < length; i++) {
									return action[value] == item[value]
								}
							})
						})
					default:
						return state
				}
			}


			// ------------------------- initializers ------------------------- //


			var TodoStore = dio.createStore(TodoStoreReducer);
			TodoStore.connect(TodoApp, '.app');