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

machine.js

svccUiMachine1 = Machine({
  id: 'svccUiMachine1',
  context: {
    currentCodeCampYear: '2019',
    codeCampYears: [
      '2005',
      '2006',
      '2007',
      '2008',
      '2009',
      '2010',
      '2011',
      '2012',
      '2013',
      '2014',
      '2015',
      '2016',
      '2017',
      '2018',
      '2019',
    ],
  },
  type: 'parallel',
  states: {
    codeCampYear: {
      on: {
        previousYear: {
          actions: assign({
            count: (context, event) => {
              // NOTE: add guard stuff
              console.log('event', event);
              console.log('context', context);
              const currentIndex = codeCampYears.findIndex(
                (year) => year === event.currentCodeCampYear,
              );
              console.log(currentIndex);
              context.currentCodeCampYear =
                context.codeCampYears[currentIndex - 1];
            },
          }),
        },
      },
    },
    authenticationStatus: {
      initial: 'notAuthenticated',
      states: {
        notAuthenticated: {
          on: { loggedIn: 'authenticated' },
        },
        authenticated: {
          initial: 'hidingFavorites',
          on: { loggingOut: 'notAuthenticated' },
          states: {
            showingFavorites: {
              on: {
                hideFavorites: 'hidingFavorites',
              },
            },
            hidingFavorites: {
              on: {
                showFavorites: 'showingFavorites',
              },
            },
          },
        },
      },
    },
    sessionsDisplayStatus: {
      initial: 'hidingSessions',
      states: {
        showingSessions: {
          on: {
            hideSessions: 'hidingSessions',
          },
        },
        hidingSessions: {
          on: {
            showSessions: 'showingSessions',
          },
        },
      },
    },
    theme: {
      initial: 'light',
      states: {
        light: {
          on: {
            setDarkTheme: 'dark',
          },
        },
        dark: {
          on: {
            setLightTheme: 'light',
          },
        },
      },
    },
  },
});