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

machine.js

"use strict";
const InitialState = '@Initial';
const FetchingState = '@Data/Request';
const FailureState = '@Data/Failure';
const PostFetchState = '@Data/Post';
const IdleState = '@Idle';
const TabsModeState = '@TabsMode';
const SinglePaneModeState = '@SinglePaneModeState';
const AlbumsTabState = '@Albums';
const AlbumsIdleState = '@Albums/Idle';
const AlbumsTabEmptyState = '@Albums/Empty';
const TracksTabState = '@Tracks';
const TracksIdleState = '@Tracks/Idle';
const TracksEmptyState = '@Tracks/Empty';
const FetchDataEvent = 'FETCH_DATA';
const FetchSuccessEvent = 'FETCH_SUCCESS';
const FetchFailureEvent = 'FETCH_FAILURE';
const RetryEvent = 'RETRY';
const SetAlbumsTabEvent = 'ALBUMS_TAB_SET';
const SetTracksTabEvent = 'TRACKS_TAB_SET';
const SetTabsModeEvent = 'TABS_MODE_SET';
const SetSinglePaneModeEvent = 'SINGLE_PANE_MODE_SET';
const setFetchErrorAction = 'setFetchError';
const setFetchResultAction = 'setFetchResult';
const cacheFetchFunctionAction = 'cacheFetchFunctionAction';
const clearFetchFunctionAction = 'clearFetchFunction';
const clearFetchErrorAction = 'clearFetchError';
const noAlbumsFetchedGuard = 'noAlbumsFetched';
const noTracksFetchedGuard = 'noTracksFetched';
const isOnExtraLargeResolutionGuard = 'isOnExtraLargeMode';
const hottestTunesMachines = Machine({
    id: 'Hottest Tunes Machine',
    initial: InitialState,
    context: {
        fetchData: null,
        fetchError: null,
        fetchFn: null
    },
    states: {
        [InitialState]: {
            on: {
                [FetchDataEvent]: FetchingState
            }
        },
        [FetchingState]: {
            entry: cacheFetchFunctionAction,
            invoke: {
                id: 'Fetching',
                src: (ctx) => {
                    let { fetchFn } = ctx;
                    // @ts-ignore
                    return fetchFn();
                },
                onDone: {
                    target: PostFetchState,
                    actions: [setFetchResultAction, clearFetchFunctionAction]
                },
                onError: {
                    target: FailureState,
                    actions: [setFetchErrorAction]
                }
            }
        },
        [FailureState]: {
            on: {
                [RetryEvent]: {
                    target: FetchingState,
                    actions: [clearFetchErrorAction]
                }
            }
        },
        [PostFetchState]: {
            on: {
                '': [
                    { target: `${IdleState}.${SinglePaneModeState}`, cond: isOnExtraLargeResolutionGuard },
                    { target: `${IdleState}.${TabsModeState}` }
                ]
            }
        },
        [IdleState]: {
            initial: SinglePaneModeState,
            on: {
                [SetTabsModeEvent]: `.${TabsModeState}`,
                [SetSinglePaneModeEvent]: `.${SinglePaneModeState}`,
            },
            states: {
                [TabsModeState]: {
                    on: {
                        [SetAlbumsTabEvent]: `.${AlbumsTabState}`,
                        [SetTracksTabEvent]: `.${TracksTabState}`
                    },
                    invoke: {
                        id: 'Tabs Mode Window Subscription',
                        src: () => (callback) => {
                            function onResize() {
                                if (window.innerWidth >= 1440) {
                                    callback(SetSinglePaneModeEvent);
                                }
                            }
                            window.addEventListener('resize', onResize);
                            return () => window.removeEventListener('resize', onResize);
                        }
                    },
                    initial: AlbumsTabState,
                    states: {
                        [AlbumsTabState]: {
                            on: {
                                '': { target: `.${AlbumsTabEmptyState}`, cond: noAlbumsFetchedGuard }
                            },
                            initial: AlbumsIdleState,
                            states: {
                                [AlbumsTabEmptyState]: {},
                                [AlbumsIdleState]: {}
                            }
                        },
                        [TracksTabState]: {
                            on: {
                                '': { target: `.${TracksEmptyState}`, cond: noTracksFetchedGuard }
                            },
                            initial: TracksIdleState,
                            states: {
                                [TracksEmptyState]: {},
                                [TracksIdleState]: {}
                            }
                        }
                    }
                },
                [SinglePaneModeState]: {
                    type: 'parallel',
                    invoke: {
                        id: 'Extra Large Mode Window Subscription',
                        src: () => (callback) => {
                            function onResize() {
                                if (window.innerWidth < 1440) {
                                    callback(SetTabsModeEvent);
                                }
                            }
                            window.addEventListener('resize', onResize);
                            return () => window.removeEventListener('resize', onResize);
                        }
                    },
                    on: {},
                    states: {
                        [AlbumsTabState]: {
                            on: {
                                '': { target: `.${AlbumsTabEmptyState}`, cond: noAlbumsFetchedGuard }
                            },
                            initial: AlbumsIdleState,
                            states: {
                                [AlbumsTabEmptyState]: {},
                                [AlbumsIdleState]: {}
                            }
                        },
                        [TracksTabState]: {
                            on: {
                                '': { target: `.${TracksEmptyState}`, cond: noTracksFetchedGuard }
                            },
                            initial: TracksIdleState,
                            states: {
                                [TracksEmptyState]: {},
                                [TracksIdleState]: {}
                            }
                        }
                    }
                }
            }
        }
    }
});