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 definition = {
  id: "explorer",
  initial: "initializing",
  context: {
    search: { value: "", suggestions: [], history: [] },
    filters: { selected: null, available: [] },
    sorting: { selected: null, available: [] },
    pagination: { count: 0, totalPages: 0, perPage: 0, page: 0 },
    results: []
  },
  states: {
    initializing: {
      on: {
        ready: {
          target: "ready",
          actions: assign((context, event) => ({
            ...context,
            ...event.context
          }))
        }
      }
    },
    ready: {
      type: "parallel",
      states: {
        aggregations: {
          initial: "loading",
          states: {
            idle: { on: { request: "loading" } },
            loading: {
              on: {
                aggregationsError: "error",
                aggregationsSuccess: [
                  {
                    target: "idle",
                    cond: (_context, event) => (event.results || []).length > 0
                  },
                  "empty"
                ]
              }
            },
            error: { on: { retry: "loading" } },
            empty: { on: { request: "loading" } }
          }
        },
        results: {
          initial: "loading",
          states: {
            idle: {
              initial: "list",
              on: { request: "loading" },
              states: {
                list: { on: { detail: "detail", map: "map" } },
                map: { on: { list: "list" } },
                detail: { on: { list: "list" } }
              }
            },
            loading: {
              on: {
                resultsError: "error",
                resultsSuccess: [
                  {
                    target: "idle",
                    cond: (_context, event) => (event.results || []).length > 0
                  },
                  "empty"
                ]
              }
            },
            error: { on: { retry: "loading" } },
            empty: { on: { request: "loading" } }
          }
        },
        filters: {
          initial: "menu",
          states: {
            menu: {
              initial: "unfiltered",
              on: { toggleFilterConfig: "configuring" },
              states: {
                unfiltered: {
                  on: {
                    filterBy: {
                      target: "filtered",
                      cond: (context, event) =>
                        context.filters.available
                          .map(filter => filter.name)
                          .includes(event.select),
                      actions: assign({
                        filters: (context, event) => ({
                          ...context.filters,
                          selected: event.select
                        })
                      })
                    }
                  }
                },
                filtered: {
                  on: {
                    clearFilter: {
                      target: "unfiltered",
                      actions: assign({
                        filters: context => ({
                          ...context.filters,
                          selected: null
                        })
                      })
                    }
                  }
                }
              }
            },
            configuring: { on: { toggleFilterConfig: "menu" } }
          }
        },
        search: {
          initial: "unfocused",
          states: {
            unfocused: { on: { toggleSearchFocus: "focused" } },
            focused: {
              initial: "inactive",
              on: { toggleSearchFocus: "unfocused" },
              states: {
                active: { on: { searchTermSettled: "inactive" } },
                inactive: { on: { updatingSearchTerm: "active" } }
              }
            }
          }
        },
        sorting: {
          type: "parallel",
          states: {
            sortBy: {
              initial: "unsorted",
              states: {
                sorted: {
                  on: {
                    clearSorting: {
                      target: "unsorted",
                      actions: assign({
                        sorting: context => ({
                          ...context.sorting,
                          selected: null
                        })
                      })
                    }
                  }
                },
                unsorted: {
                  on: {
                    sortBy: {
                      target: "sorted",
                      cond: (context, event) =>
                        context.sorting.available
                          .map(sortOption => sortOption.name)
                          .includes(event.select),
                      actions: assign({
                        sorting: (context, event) => ({
                          ...context.sorting,
                          selected: event.select
                        })
                      })
                    }
                  }
                }
              }
            },
            sortOrder: {
              initial: "ascending",
              states: {
                ascending: {
                  on: {
                    toggleSortOrder: "descending"
                  }
                },
                descending: {
                  on: {
                    toggleSortOrder: "ascending"
                  }
                }
              }
            }
          }
        },
        pagination: {
          initial: "preparing",
          states: {
            preparing: {
              on: {
                "": [
                  {
                    target: "more",
                    cond: context =>
                      context.pagination.totalPages > 1 &&
                      context.pagination.totalPages !== context.pagination.page
                  },
                  {
                    target: "last",
                    cond: context =>
                      context.pagination.totalPages ===
                        context.pagination.page && context.pagination.page > 1
                  },
                  {
                    target: "none"
                  }
                ]
              }
            },
            none: {},
            more: {
              on: {
                next: {
                  target: "last",
                  cond: context =>
                    context.pagination.page + 1 ===
                    context.pagination.totalPages
                }
              }
            },
            last: {}
          }
        }
      }
    }
  }
}
Machine(definition)