Task states

SketchSystems.spec

Task states
  Not in my list
    addToList -> In my list
  In my list
    markDone -> Done
    removeFromList -> Not in my list
  Done
    markNotDone -> In my list

SketchSystems_prototype.js

function render(model){
  let current_state_name = model.active_states[0].name;
  let buttonText;
  switch(current_state_name) {
    case 'Not in my list':
      return <>
        <button onClick={() => model.emit('addToList')}>Add to list</button>
      </>;
    case 'In my list':
      return <>
          <button onClick={() => model.emit('markDone')}>Mark done</button>
          <button onClick={() => model.emit('removeFromList')}>Remove from my list</button>
        </>;
    case 'Done':
      return <>
        <button onClick={() => model.emit('markNotDone')}>Mark as not done</button>
      </>
  }
  return <button style={{color: "darkBlue"}}>{current_state_name}</button>
}