ShMcK

DrawerOpen*
  loadTape -> HasTape
  closeDrawer -> NoTape

DrawerClosed
  eject -> DrawerOpen

  NoTape

  HasTape*

ShMcK

Ejected
  STOP -> Stopped
Stopped*
  STOP -> Ejected
  PLAY -> Playing
  REWIND -> Rewinding
  FAST_FORWARD -> FastForwarding
Active
  STOP -> Stopped
  PLAY -> Stopped

ShMcK

None*
  BLOCK_SELECT -> BlockEditing
  TOOL_DRAW_BLOCK -> BlockDrawing
  TOOL_UPLOAD_SHAPES -> UploadingShapes
  TOOL_RESOURCE_VIEW -> ResourceView
  
BlockDrawing
  BLOCK_SHAPE_COMPLETE -> BlockEditing
  CANCEL_DRAWING -> None
BlockEditing

ShMcK

type States = {
 mode: 'loading' | 'loaded' | 'error',
 data: any,
}

class DataLoader extends React.Component<{}, States> {
 state = {
   mode: 'loading', // state
   data: {}, // data
 }

ShMcK

type States = 'loading' | 'loaded' | 'error'
type Data = any

class SomeComponent extends StateComponent<{}, States, Data> {
 state = 'loading'
 data = {}
}

ShMcK

const events = {
   STOP: 'Stopped',
   PLAY: 'Playing',
 }

class Walkman extends React.Component {
 state = {
   current: events.STOP,
 }
 transition = (event) => {

ShMcK

const events = {
   STOP: 'Stopped',
   PLAY: 'Playing',
   REWIND: 'Rewinding',
   FASTFORWARD: 'FastForwarding',
 }

class Walkman extends React.Component {
 state = {
   current: events.STOP,

ShMcK

 const events = {
   STOP: 'Stopped',
   PLAY: 'Playing',
   REWIND: 'Rewinding',
   FASTFORWARD: 'FastForwarding',
 }

class Walkman extends React.Component {
 transition = (target) => {
   const preventTapeJam = 

ShMcK

class Walkman extends React.Component {
 transition = (event) => {
   const preventTapeJam = /* ... */
   const shouldEject = event === 'STOP' && this.state.current === 'Stopped'
 
   if (!preventTapeJam) {
     /* … */
   } else if (shouldEject) {
     this.setState({ current: events.EJECT })
   }

ShMcK

const events = {
  STOP: 'Stopped',
  PLAY: 'Playing'
}