Undo/Redo Practice

by stevenkaspar

HTML

<div>
  <button id='addButton'>
    add row
  </button>
  <button id='undoButton' style='display: none'>
    undo
  </button>
  <button id='redoButton' style='display: none'>
    redo
  </button>
</div>
<div id='rows-container'>

</div>

JavaScript

(() => {

const undoStack = []
const redoStack = []
let id = 0

function doAction ( action ) {
  let doResult = null
	switch ( action.name ) {
  	case 'add-row':
   	  doResult = addRow( action )
      break
    case 'remove-row':
    	doResult = removeRow( action )
      break
    default: 
    	console.warn(`Unknown Action: ${action.name}`)
      return
  }
  undoStack.push({
    action,
    result: doResult,
  })
  
  document.querySelector('#undoButton').style.display = ( undoStack.length > 0 ) ? '' : 'none'
}

function undoAction () {
	if ( undoStack.length === 0 ) {
  	console.warn( 'Nothing to undo' )
    return
  }
  let undoResult = null
  const undoStackItem = undoStack.pop()
  switch ( undoStackItem.action.name ) {
  	case 'add-row':
    	undoResult = undoAddRow( undoStackItem )
      break
    case 'remove-row':
    	undoResult = undoRemoveRow( undoStackItem )
      break
    default: 
    	console.warn(`Unknown Action: ${undoStackItem.action.name}`)
      return
  }
  redoStack.push({
  	action: undoStackItem.action,
    result: undoResult,
  })
  
  document.querySelector('#undoButton').style.display = ( undoStack.length > 0 ) ? '' : 'none'
  document.querySelector('#redoButton').style.display = ''
}

function redoAction () {
	if ( redoStack.length === 0 ) {
  	console.warn( 'Nothing to redo' )
    return
  }
  let redoResult = null
  const redoStackItem = redoStack.pop()
  switch ( redoStackItem.action.name ) {
  	case 'add-row':
    	redoResult = redoAddRow( redoStackItem )
      break
    case 'remove-row':
    	redoResult = redoRemoveRow( redoStackItem )
      break
    default: 
    	console.warn(`Unknown Action: ${redoStackItem.action.name}`)
      return
  }
  undoStack.push({
  	action: redoStackItem.action,
    result: redoResult,
  })
  
  document.querySelector('#redoButton').style.display = ( redoStack.length > 0 ) ? '' : 'none'
}

function addRow ( { params } ) {
	const el = document.createElement('div')
  el.style.backgroundColor =...