{ let wrapper = html`

` function updateData() { // update selection const item = d3.select('.todoList') .selectAll('.item') .data(store.getState().todos.present.filter(todo => { switch (store.getState().visibilityFilter) { case 'SHOW_ALL': return todo case 'SHOW_COMPLETED': return todo.completed === true case 'SHOW_ACIVE': return todo.completed === false default: console.warn('Unexpected visibilityFilter state') return todo } }), d => d.index) // update selection checkboxes const updateItemBox = item.select('.itemBox') // enter selection const itemEnter = item.enter() .append('div') .attr('class', d => `item ${d.text}`) .style('text-align', 'center') .style('font-family', 'monospace') // enter selection checkboxes + merge with update checkboxes const itemBox = itemEnter.append('input') .attr('class', 'itemBox') .attr('type', 'checkbox') .merge(updateItemBox) .each(function(d){ if (d.completed) { d3.select(this).attr('checked', true) } else { d3.select(this).attr('checked', null) } }) .on('click', d => { store.dispatch(toggleTodo(d.index)) updateData() }) // enter selection text const itemText = itemEnter.append('label') .attr('class', 'itemText') .attr('for', d => d.text) .text(d => d.text) // exit selection const itemExit = item.exit().remove() } const visibilityFilterBoxes = d3.select(wrapper) .select('.visibilityFilterBoxDiv') .selectAll('.visibilityFilters') .data(Object.values(VisibilityFilters)) .join('div') const visibilityCheckboxes = visibilityFilterBoxes.append('input') .attr('class', 'visibilityCheckboxes') .attr('type', 'radio') .attr('name', 'visibilityCheckboxes') .attr('id', d => d) .attr('value', d => d) .on('click', d => { store.dispatch(setVisibilityFilter(d)) updateData() }) .each(function(d) { if (store.getState().visibilityFilter === d) d3.select(this).attr('checked', true) }) const visibilityLabels = visibilityFilterBoxes.append('label') .attr('class', 'visibilityLabels') .attr('for', d => d) .text(d => d.charAt(0) + d.replace('_', ' ').toLowerCase().slice(1)) .style('font-family', 'Helvetica') d3.select(wrapper).select('.text') .on('change', function() { const index = store.getState().todos.present.length store.dispatch(addTodo(this.value, index)) updateData() this.value = '' }) const undoButton = d3.select(wrapper).select('.undo') .on('click', () => { store.dispatch(ActionCreators.undo()) updateData() }) const redoButton = d3.select(wrapper).select('.redo') .on('click', () => { store.dispatch(ActionCreators.redo()) updateData() }) return wrapper }