2b:null 2c:["$","title",null,{"children":"D3, Redux, and Redux-Undo: Todo List | alejandrokennedy | Observable"}] 31:Td47,{ 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 }32:[] 2f:{"id":"23e7f572dfca9197","slug":"d3-redux-and-redux-undo-todo-list","title":"D3, Redux, and Redux-Undo: Todo List","thumbnail":"5d64538d6804bdc0ac730d6d3bdc5527fc8bd8ff89f85404aabc6b99131253d6","access_level":"public","create_time":"$D2019-09-23T21:53:54.011Z","update_time":"$D2019-09-24T17:59:44.809Z","view_time":null,"first_public_time":"$D2019-09-24T18:02:37.399Z","fork":{"id":"5b083b29723e1e1d","slug":"todo-list-with-d3-and-redux","title":"D3 and Redux: Todo List","owner":{"id":"dbf49c5f90750ea9","login":"alejandrokennedy","name":""}},"stars":1,"starred":false,"owner":{"type":"team","id":"dbf49c5f90750ea9","login":"alejandrokennedy","name":"","avatar_url":"https://avatars-next.observableusercontent.com/946eb0d5878183e679109d4d4e5f179f3c2354c64f69fe6e726ca95190221141","tier":"starter_2024"},"version":530,"publish_version":530,"role":null,"authored":false,"authors":[{"type":"individual","id":"1316b731f05ae61c","login":"alejandrokennedy","name":"","avatar_url":"https://avatars-next.observableusercontent.com/946eb0d5878183e679109d4d4e5f179f3c2354c64f69fe6e726ca95190221141","tier":null}],"members":[{"type":"individual","id":"1316b731f05ae61c","login":"alejandrokennedy","name":"","avatar_url":"https://avatars-next.observableusercontent.com/946eb0d5878183e679109d4d4e5f179f3c2354c64f69fe6e726ca95190221141","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":28,"collection":null,"type":"notebook","body":{"title":"D3, Redux, and Redux-Undo: Todo List","cells":[{"id":0,"value":"md`# D3, Redux, and Redux-Undo: Todo List`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":67,"value":"md`Here I follow [Redux's basic tutorial](https://redux.js.org/basics/basic-tutorial) and use [Redux-Undo](https://github.com/omnidan/redux-undo) for undo/redo functionality. I use D3 to draw and update the UI.\n\nEssentially, after any user input I first update the store—\\`\\`store.dispatch(...)\\`\\`—to reflect the change in our state, then I call \\`\\`updateData()\\`\\` to update the UI.\n\nComments, critiques, and ideas for alternate methods are welcome (especially if they help me figure out the following bug).\n

Add a todo
Mark it as completed
Press 'undo' (and notice the box is still checked!?)
Press 'undo' a second time (removes the item) or change the filter view
Press 'redo' twice, noticing that undoing and redoing box checks now works

\n\nAlso, thanks to [bgchen](https://observablehq.com/@bryangingechen) for helping me require Redux-Undo.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"$31","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":85,"value":"md`## Variable declarations`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":95,"value":"ADD_TODO = 'ADD_TODO'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":97,"value":"TOGGLE_TODO = 'TOGGLE_TODO'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":101,"value":"SET_VISIBILITY_FILTER = 'SET_VISIBILITY_FILTER'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":118,"value":"VisibilityFilters = {\n return {\n SHOW_ALL: 'SHOW_ALL',\n SHOW_COMPLETED: 'SHOW_COMPLETED',\n SHOW_ACIVE: 'SHOW_ACIVE',\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":132,"value":"md`## Action Creators`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":135,"value":"function addTodo(text, index) {\n return { type: ADD_TODO, text, index }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":137,"value":"function toggleTodo(index) {\n return { type: TOGGLE_TODO, index }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":139,"value":"function setVisibilityFilter(filter) {\n return { type: SET_VISIBILITY_FILTER, filter }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":152,"value":"md`## Reducers and Store Creation`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":156,"value":"initialState = {\n return {\n visibilityFilter: VisibilityFilters.SHOW_ALL,\n todos: []\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":159,"value":"function todos(state = [], action) {\n switch (action.type) {\n case ADD_TODO:\n return [\n ...state,\n {\n text: action.text,\n completed: false,\n index: action.index\n }\n ]\n case TOGGLE_TODO:\n return state.map((todo, index) => {\n if (index === action.index) {\n return {\n ...todo,\n completed: !todo.completed\n }\n }\n return todo\n })\n default:\n return state\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":440,"value":"undoableTodos = undoable(todos)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":162,"value":"function visibilityFilter(state = VisibilityFilters.SHOW_ALL, action) {\n switch (action.type) {\n case SET_VISIBILITY_FILTER:\n return action.filter\n default:\n return state\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":198,"value":"function todoApp(state = initialState, action) {\n return {\n visibilityFilter: visibilityFilter(state.visibilityFilter, action),\n todos: undoableTodos(state.todos, action),\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":221,"value":"store = redux.createStore(todoApp)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"md`## Libraries`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"d3 = require('d3@5')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":35,"value":"redux = require('redux@4')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":434,"value":"reduxUndo = (await require('https://cdn.jsdelivr.net/npm/redux-undo@1.0.0-beta9-9-7/dist/redux-undo.js'))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":525,"value":"md`### Assigning Redux-Undo functions to variables`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":442,"value":"undoable = reduxUndo.default","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":463,"value":"ActionCreators = reduxUndo.ActionCreators","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W32","stdlib":"1","titling":"auto"}} 30:"$2f:body"