Generated by XState Viz: https://xstate.js.org/viz

machine.js

/*
TODO:
- LIVE status
- Pre and Post statuses
x delay notice (in context)
x switch category, e.g. Pro-Am
x loading data
x update data
x change sort direction
x change sort column
x more menu
x debounce search typing
*/

const context_blank = {
  categories: [],
  selectedCategory: '',
  scoringDelayMins: 0,
  players: [],
  sortDirection: 'descending',
};

const context_pebble_beach = {
  categories: ['PROS', 'AMATEURS'],
  selectedCategory: 'PROS',
  scoringDelayMins: 0,  
  players: [
    {
      id: '1',
      position: 'T1',
      following: true,
      displayName: 'Rahm, J.',
      titleist: true,
      total: '-4',
      thru: 'F',
      r2: '-2',
    },
    {
      id: '2',
      position: 'T1',
      following: false,
      displayName: 'Palmer, R.',
      titleist: false,
      total: '-6',
      thru: '11',
      r2: '-4',
    },
    {
      id: '3',
      position: '3',
      following: false,
      displayName: 'Fitzpatrick, M.',
      titleist: true,
      total: 'E',
      thru: '13',
      r2: 'E',
    },
  ],
};

const machine = Machine({
  id: 'Leaderboard - with more menu',
  context: context_blank,
  type: 'parallel',
  states: {
    'more menu': {
      type: 'parallel',
      states: {
        visibility: {
          initial: 'hidden',
          states: {
            hidden: {
              on: {
                'SHOW MORE MENU': 'visible',
              },
            },
            visible: {
              on: {
                'HIDE MORE MENU': 'hidden',
              }
            }
          },          
        },
        
        'tee time zone': {
          initial: 'event',
          states: {
            event: {
              on: { 'TOGGLE TIME ZONE': 'local' },
            },
            local: {
              on: { 'TOGGLE TIME ZONE': 'event' },
            },
          }
        },

        'shot details': {
          initial: 'off',
          states: {
            off: {
              on: { 'TOGGLE SHOT DETAILS': 'on' },
            },
            on: {
              on: { 'TOGGLE SHOT DETAILS': 'off' },
            },
          }
        },          

        'motion': {
          initial: 'off',
          states: {
            off: {
              on: { 'TOGGLE MOTION': 'on' },
            },
            on: {
              on: { 'TOGGLE MOTION': 'off' },
            },
          },
        },          
      },
    }, 
    
    'tournament card': {
      on: {
        'TAP TOURNAMENT CARD': {
          actions: 'open tournament half-sheet',
        },
      },
    },
    
    'tournament half-sheet': {
      initial: 'hidden',
      states: {
        hidden: {
          on: { 'SHOW HALF-SHEET': 'visible' },
        },
        visible: {
          on: { 'HIDE HALF-SHEET': 'visible' },
        },
      },
    },
    
    'category selector': {
      initial: 'hidden',
      states: {
        hidden: {
          on: {
            'HAS MULTIPLE CATEGORIES': 'closed',
          }
        },
        closed: {
          on: {
            'OPEN CATEGORY SELECTOR': 'open',
          }
        },
        open: {
          on: {
            'CLOSE CATEGORY SELECTOR': 'closed',
            'SELECT CATEGORY': {
              target: 'closed',
              actions: 'assign category',
            },
          },
        },
      },
    },    
    
    'search field': {
      initial: 'hidden',
      states: {
        hidden: {
          on: {
            'TAP SEARCH ICON': 'visible',
          },
        },
        'visible': {
          exit: 'clear filter',
          initial: 'empty',
          states: {
            empty: {
              entry: 'clear filter',
            },
            typing: {
              entry: 'assign filter',
              on: {
                'EDIT FILTER': 'typing',
              },
              after: {
                'DEBOUNCE SEARCH': 'filtering',
              },
            },
            filtering: {
              entry: 'apply filter',
            },
          },
          on: {
            'LEAVE SEARCH': 'hidden',
            'CLEAR FILTER': '.empty',
            'EDIT FILTER': '.typing',
          }
        },
      },
    },
    
    'players': {
      type: 'parallel',
      states: {
        'data source': {
          initial: 'disconnected',
          states: {
            disconnected: {
              on: {
                'CONNECT': 'connected'
              }
            },
            connected: {
              initial: 'empty',
              states: {
                empty: {},
                populated: {},
              },
              on: {
                DISCONNECT: 'disconnected',
                'RECEIVE RANKINGS DATA': {
                  target: '.populated',
                  actions: 'assign rankings',
                }
              }
            }
          },
        },
        
        sorting: {
          initial: 'ascending',
          states: {
            ascending: {
              on: {
                'TAP THE SORT-BY COLUMN': 'descending',
              },
            },
            descending: {
              on: {
                'TAP THE SORT-BY COLUMN': 'ascending',
              },
            },            
          },
          on: {
            'TAP AN UNSORTED COLUMN': {
              target: '.ascending',
              actions: 'change sort-by column',
            },
          },
        },
        
        'player icons': {
          on: {
            'TAP A PLAYER FLAG': {
              actions: 'follow the player',
            },
            'TAP A PLAYER STAR': {
              actions: 'unfollow the player',
            },
          },          
        },
              
      },

    },
    
  },
},
{
  delays: {
    'DEBOUNCE SEARCH': 1000,
  } 
});