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

machine.js

  // Available variables:
  // - Machine
  // - interpret
  // - assign
  // - send
  // - sendParent
  // - spawn
  // - raise
  // - actions
  // - XState (all XState exports)
  
  const notificationsMachine = Machine({
  id: 'notifications',
  initial: 'hidden',
  context: {
    allNotifications: [],
    listedNotifications: [],
    filters: [],
    newNotification: null,
    searchString: '',
  },
  states: {
    hidden: {
      initial: 'idle',
      states: {
        idle: {
          entry: [],
          on: {
            SHOW_ALL: '#notifications.visible',
            INIT: {
              target: 'idle',
              actions: ['init'],
            },
            NEW: {
              target: 'idle',
              cond: 'isMostRecent',
              actions: ['setNewNotification'],
            },
            DISPLAY_SINGLE: {
              target: 'displaySingle',
              cond: 'hasNewNotification',
            }
          },
        },
        displaySingle: {
          exit: ['clearNewNotification'],
          after: {
            5000: '#notifications.hidden.idle',
          },
          on: {
            DISMISS: '#notifications.hidden.idle',
            SHOW_ALL: '#notifications.visible',
            NEW: {
              internal: true,
              target: '.',
              cond: 'isMostRecent',
              actions: ['setNewNotification'],
            },
            DISPLAY_SINGLE: {
              internal: true,
              target: '.',
              cond: 'hasNewNotification',
            },
            INIT: {
              internal: true,
              target: '.',
              actions: ['init'],
            },
          },
        },
      }
    },
    visible: {
      initial: 'idle',
      states: {
        idle: {
          on: {
            CLOSE: '#notifications.hidden',
            FILTER: {
              target: 'idle',
              actions: ['addFilter', 'applySearch'],
            },
            UNFILTER: {
              target: 'idle',
              actions: ['removeFilter', 'applySearch'],
            },
            CLEAR_FILTERS: {
              target: 'idle',
              actions: ['clearFilters', 'applySearch'],
            },
            SEARCH: [
              {
                target: 'idle',
                actions: ['applyFilters', 'applySearch'],
                cond: 'searchIsValid'
              },
              {
                target: 'idle',
                actions: ['clearSearch', 'applyFilters']
              }
            ],
            CLEAR_SEARCH: {
              target: 'idle',
              actions: ['clearSearch', 'applyFilters'],
            },
            INIT: {
              target: 'idle',
              actions: ['init', 'addFilter', 'applySearch'],
            },
          }
        },
      },
    },
  }
});