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

machine.js

const achievementsStates = {
  id: 'achievements-select',
  initial: 'ACHIEVEMENTS_IDLE',
  states: {
    ACHIEVEMENTS_IDLE: {},
    ACHIEVEMENTS_PENDING: {
      meta: {match: 'ACHIEVEMENTS_PENDING'},
      invoke: {
        src: 'fetchAchievements',
        onDone: 'ACHIEVEMENTS_SUCCESS',
        onError: 'ACHIEVEMENTS_ERROR'
      }
    },
    ACHIEVEMENTS_REFRESHING: {
      meta: {match: 'ACHIEVEMENTS_REFRESHING'},
      invoke: {
        src: 'forceRefetchAchievements',
        onDone: 'ACHIEVEMENTS_SUCCESS',
        onError: 'ACHIEVEMENTS_ERROR'
      }
    },
    ACHIEVEMENTS_SUCCESS: {
      initial: 'ACHIEVEMENTS_SELECTING',
      meta: {match: 'ACHIEVEMENTS_SUCCESS'},
      states: {
        ACHIEVEMENTS_SELECTING: {
          entry: 'saveAchievements',
          on: {
            '': [
              {target: 'ACHIEVEMENTS_VALID', cond: 'achievementsNotEmpty'},
              {target: 'ACHIEVEMENTS_EMPTY'}
            ]
          }
        },
        ACHIEVEMENTS_VALID: {
          meta: {match: 'ACHIEVEMENTS_VALID'},
          initial: 'NO_ACHIEVEMENT_SELECTED',
          on: {
            SELECT_ACHIEVEMENT: {
              target: '.ACHIEVEMENT_SELECTED',
              actions: ['selectAchievement']
            },
            CHANGE_DEPLOYMENT_ID: {
              target: '#achievements-select.ACHIEVEMENTS_PENDING',
              actions: ['updateDeploymentId']
            }
          },
          states: {
            ACHIEVEMENT_SELECTED: {
              meta: {match: 'ACHIEVEMENTS_SELECTING'},
              entry: 'updateAchievementInUrl',
              exit: 'clearAchievementInUrl'
            },
            NO_ACHIEVEMENT_SELECTED: {
              meta: {match: 'NO_ACHIEVEMENT_SELECTED'},
              on: {
                RELOAD_ACHIEVEMENTS: '#achievements-select.ACHIEVEMENTS_REFRESHING'
              }
            }
          }
        },
        ACHIEVEMENTS_EMPTY: {
          meta: {match: 'ACHIEVEMENTS_EMPTY'}
        }
      }
    },
    ACHIEVEMENTS_ERROR: {
      entry: ['saveError'],
      meta: {match: 'ACHIEVEMENTS_ERROR'},
      on: {
        RETRY: 'ACHIEVEMENTS_PENDING'
      }
    }
  }
};

const achievementsMachine = Machine(
  {
    id: 'achievements-page',
    initial: 'LOCALES_PENDING',
    states: {
      LOCALES_PENDING: {
        invoke: {
          src: 'fetchLocales',
          onDone: 'LOCALES_SUCCESS',
          onError: 'LOCALES_ERROR'
        }
      },
      LOCALES_ERROR: {
        entry: 'saveError',
        on: {
          RETRY: 'LOCALES_PENDING'
        }
      },
      LOCALES_SUCCESS: {
        initial: 'LOCALES_SELECTING',
        states: {
          LOCALES_SELECTING: {
            entry: 'saveLocales',
            on: {
              '': [
                {target: 'LOCALES_VALID', cond: 'localesNotEmpty'},
                {target: 'LOCALES_EMPTY'}
              ]
            }
          },
          LOCALES_VALID: {
            on: {
              SELECT_LOCALE: {
                target: '.LOCALE_SELECTED.ACHIEVEMENTS_PENDING',
                actions: 'selectLocale'
              }
            },
            states: {
              LOCALES_TEMP: {
                entry: 'putLocaleInUrl',
                on: {
                  '': 'LOCALE_SELECTED.ACHIEVEMENTS_PENDING'
                }
              },
              NO_LOCALE_SELECTED: {
                meta: {match: 'NO_LOCALE_SELECTED'},
                entry: 'setDefaultLocale'
              },
              LOCALE_SELECTED: {
                exit: 'clearLocaleInUrl',
                meta: {match: 'LOCALE_SELECTED'},
                ...achievementsStates
              }
            }
          },
          LOCALES_EMPTY: {
            entry: 'setDefaultLocale'
          }
        }
      }
    }
  }
);