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

machine.js

const usersMachine = Machine({
  id: 'usersMachine',
  type: 'parallel',
  context: {
    users: [],
    selectedUser: null,
    permissionTypes: null
  },
  initial: 'viewing_users',
  states: {
    ui: {
      initial: 'users',
      states: {
        users: {
          on: {
            VIEW_DETAILS: {
              target: 'user_details',
              actions: ['setSelectedUser']
            }
          }
        },
        user_details: {
          entry: 'fetch_permissions',
          on: {
            GO_BACK: 'users'
          }
        }
      }
    },
    fetch_users: {
      initial: 'idle',
      states: {
        idle: {
          on: {
            '': {
              target: 'fetching',
              actions: 'fetchUsers'
            },
          }
        },
        fetching: {
          on: {
            RESOLVE_USERS: {
              target: 'success',
              actions: ['setUsers']
            },
            REJECT_USERS: 'error'
          }
        },
        success: { type: 'final' },
        error: { type: 'final' }
      }
    },
    fetch_schema: {
      initial: 'idle',
      states: {
        idle: {
          on: {
            '': {
              target: 'fetching',
              actions: ['fetchSchema']
            },
          }
        },
        fetching: {
          on: {
            RESOLVE_SCH: {
              target: 'success',
              actions: ['setPermissionTypes']
            },
            REJECT_SCH: 'error'
          }
        },
        success: { type: 'final' },
        error: { type: 'final' }
      }
    },
    fetch_permissions: {
      initial: 'idle',
      states: {
        idle: {
          on: {
            FETCH_PERMS: 'fetching'
          }
        },
        fetching: {
          on: {
            RESOLVE_PERMS: 'success',
            REJECT_PERMS: 'error'
          }
        },
        success: {
          on: {
            FETCH_PERMS: 'fetching'
          }
        },
        error: {
          on: {
            FETCH_PERMS: 'fetching'
          }
        }
      }
    },
    update_user_permission: {
      initial: 'idle',
      states: {
        idle: {
          on: {
            UPDATE_PERM: 'updating'
          }
        },
        updating: {
          on: {
            RESOLVE_UPDATE: {
              target: 'success',
              actions: ['updateUserPermission']
            },
            REJECT_UPDATE: 'error'
          }
        },
        success: {
          on: {
            UPDATE_PERM: 'updating'
          }
        },
        error: {
          on: {
            UPDATE_PERM: 'updating'
          }
        }
      }
    }
  }
}, {
  actions: {
    setUsers: assign({
      users: (context, event) => event.response.data.users
    }),
    setPermissionTypes: assign({
      permissionTypes: (context, event) => getPermissionTypes(event.response.data.__schema)
    }),
    setSelectedUser: assign({
      selectedUser: (context, event) => event.user
    })
  }
})