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 fetchMachine = Machine({
    id: 'fetch',
    initial: 'unfocussed',
    context: { activeType: 'all', focussedItemIndex: -1, currentScopeIndex: 0, currentTypeIndex: -1, query: '' },
    states: {
        unfocussed: {
            on: {
                CLICK: 'searchActive',
                CMD_K: 'searchActive'
            }
        },
        searchActive: {
            on: {
                LEFT_ARROW: [{
                    target: 'scopeSelection',
                    cond: (context) => context.currentTypeIndex === -1
                }],
                DOWN_ARROW: { target: 'horizontalFilterSelection', cond: (context) => context.currentTypeIndex === -1 },
                ESC: 'unfocussed',
                QUERY_CHANGE: 'load_data',
                FILTER_CHANGE: {
                    target: 'load_data',
                    cond: (context) => context.activeType !== 'all'
                }
            }
        },
        errorState: {
            on: {
                ESC: 'searchActive',
                QUERY_CHANGE: 'load_data',
                FILTER_CHANGE: {
                    target: 'load_data',
                    cond: (context) => context.activeType !== 'all'
                }
            }
        },
        load_data: {
            on: {
                SUCCESS: 'searchResultsFetched',
                FAILURE: 'errorState'
            }
        },
        searchResultsFetched: {
            on: {
                LEFT_ARROW: [
                    {
                        target: 'scopeSelection',
                        cond: (context) => context.currentTypeIndex === -1
                    }
                ],
                // DOWN_ARROW: { target: 'keyBoardNavigation', actions: assign({ key: 'down' }) },
                UP_ARROW: {},
                ESC: 'unfocussed',
                QUERY_CHANGE: 'load_data',
                CLEAR_TYPE_FILTER: {
                    target: 'load_data',
                    cond: (context) => context.currentTypeIndex !== -1,
                    actions: assign({ currentTypeIndex: -1 })
                },
                SCOPE_CHANGE: {
                    target: 'scopeSelection',
                    actions: assign({ focussedItemIndex: (context) => context.currentScopeIndex })
                }
            }
        },
        scopeSelection: {
            on: {
                ESC: 'searchResultsFetched',
                DOWN_ARROW: {
                    target: 'scopeSelection',
                    actions: assign({ focussedItemIndex: (context) => (context.focussedItemIndex + 1) % 3 })
                },
                UP_ARROW: {
                    target: 'scopeSelection',
                    actions: assign({ focussedItemIndex: (context) => (((context.focussedItemIndex - 1) % 3) + 3) % 3 })
                },
                ENTER: [{
                    target: 'searchResultsFetched',
                    actions: assign({focussedItemIndex:-1}),
                    cond: (context) => context.focussedItemIndex === context.currentScopeIndex
                }, {
                    target: 'load_data',
                    actions: assign({currentScopeIndex:(context)=>context.focussedItemIndex,focussedItemIndex:-1}),
                    cond: (context) => context.focussedItemIndex !== context.currentScopeIndex
                }]
            }
        },
        horizontalFilterSelection: {
            entry:  assign({focussedItemIndex:0}),
            on: {
                ESC: {},
                LEFT_ARROW: {
                    target: 'horizontalFilterSelection',
                    internal:true,
                    actions: assign({focussedItemIndex: (context) => (((context.focussedItemIndex - 1) % 5) + 5) % 5})

                },
                RIGHT_ARROW: {
                    target: 'horizontalFilterSelection',
                    internal:true,
                    actions: assign({
                        focussedItemIndex: (context)=>(context.focussedItemIndex + 1) % 5
                    })
                },
                UP_ARROW: {},
                DOWN_ARROW: {},
                ENTER: [{
                    target: 'searchResultsFetched',
                    actions: assign({focussedItemIndex:-1}),
                    cond: (context) => context.focussedItemIndex === context.currentTypeIndex
                }, {
                    target: 'load_data',
                    actions: assign({
                        currentScopeIndex: (context) => context.focussedItemIndex,
                        focussedItemIndex:-1
                    }),
                    cond: (context) => context.focussedItemIndex !== context.currentTypeIndex
                }
                ]
            }
        }
    }
});