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

machine.js

let splash = {
  initial: 'idle',
  states: {
    idle: {
      on: {
        LOAD_DATA: 'spinner',
      },
    },
    spinner: {
      type: 'final',
    },
  },
  on: {
    LOAD_DATA_SUCCESS: 'main_app',
    LOAD_DATA_FAIL: 'auth_screen',
  },
};

let auth_screen = {
  initial: 'login_screen',
  states: {
    login_screen: {
      type: 'final',
      initial: 'login_form',
      states: {
        login_form: {
          on: {
            LOGIN_WITH_SOCIAL_MEDIA: 'login_with_social_media',
          },
        },
        login_with_social_media: {
          type: 'final',
        },
      },
      on: {
        LOGIN_FAIL: 'login_screen',
        NAVIGATE_TO_SIGNUP_SCREEN: 'signup_screen',
      },
    },
    signup_screen: {
      type: 'final',
      initial: 'signup_form',
      states: {
        signup_form: {
          on: {
            LOGIN_WITH_SOCIAL_MEDIA: 'signup_with_social_media',
          },
        },
        signup_with_social_media: {
          type: 'final',
        },
      },
      on: {
        SIGNUP_FAIL: 'signup_screen',
        NAVIGATE_TO_LOGIN_SCREEN: 'login_screen',
      },
    },
  },
  on: {
    LOGIN_SUCCESS: 'main_app',
    LOGIN_FAIL: 'auth_screen',
    CONTINUE_AS_GUEST: 'main_app',
    SIGNUP_SUCCES: 'main_app',
    SIGNUP_FAIL: 'auth_screen',
  },
};

let main_app = {
  id: 'main_app',
  initial: 'home',
  states: {
    home: {
      initial: 'home_directory',
      states: {
        home_directory: {
          on: {
            SEARCH: 'search_directory_screen',
          },
        },
        search_directory_screen: {
          on: {
            CLICK_LOCATION: 'map_location_screen',
            CLICK_COURSE: 'course_detail_screen',
            BACK: 'home_directory',
          },
        },
        map_location_screen: {
          on: {
            CLICK_COURSE: 'course_detail_screen',
          },
        },
        course_detail_screen: {
          on: {
            CLICK_PROGRAM: 'program_detail_screen',
            CHAT_COURSE_OWNER: {
              target: 'chat_screen',
              cond: 'isLogin',
            },
            REGISTER: {
              target: 'payment_screen',
              cond: 'isLogin',
            },
          },
        },
        program_detail_screen: {
          on: {
            BACK: 'course_detail_screen',
            REGISTER: {
              target: 'payment_screen',
              cond: 'isLogin',
            },
          },
        },
        chat_screen: {
          on: {
            BACK: 'course_detail_screen',
          },
        },
        payment_screen: {},
      },
    },
    bookmark: {},
    profile: {},
  },
  on: {
    LOG_OUT: {
      target: 'auth_screen',
      cond: 'isLogin',
    },
    LOG_IN: {
      target: 'auth_screen',
      cond: 'isGuest',
    },
  },
};

let course_finder = Machine({
  initial: 'splash',
  states: {
    splash,
    main_app,
    auth_screen,
  },
});