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 defineProgramMachine = Machine({
  id: 'defineProgram',
  type: 'parallel',
  context: {
    workoutToBeRemoved: null,
    weekToBeRemoved: null,
    selectedDay: null,
    selectedWeek: null,
  },
  states: {
    autosave: {
      initial: 'idle',
      states: {
        idle: {
          on: {
            DEFINE_WORKOUTS: 'saving',
            EDIT_DAY: 'saving',
            REMOVE_WORKOUT: 'saving',
            WEEKLY_VIEW: 'saving',
            REMOVE_WEEK: 'saving',
          }
        },
        saving: {
          on: {
            SAVED: 'idle',
          }
        }
      }
    },
    desktop: {
      initial: 'idle',
      states: {
        idle: {
          on: {
            DEFINE_WORKOUTS: 'define_workouts',
            EDIT_DAY: {
              target: 'edit_day',
              actions: ['setSelectedDay'],
            },
            REMOVE_WORKOUT: { 
              target: 'confirm_workout_removal',
              actions: ['setWorkoutToBeRemoved']
            },
            REMOVE_WEEK: {
              target: 'confirm_week_removal',
              actions: ['setWeekToBeRemoved']
            }
          }
        },
        define_workouts: {
          on: {
            BACK: 'idle',
            CONFIRM: 'confirm_workouts',
          }
        },
        confirm_workouts: {
          on: {
            CANCEL: 'idle',
            COMMIT: 'idle',
          }
        },
        edit_day: {
          on: {
            BACK: {
              target: 'idle',
              actions: ['unsetSelectedDay'],
            },
            CONFIRM: 'confirm_day',
          }
        },
        confirm_day: {
          on: {
            CANCEL: {
              target: 'idle',
              actions: ['unsetSelectedDay'],
            },
            COMMIT: {
              target: 'idle',
              actions: ['unsetSelectedDay'],
            },
          }
        },
        confirm_workout_removal: {
          on: {
            CANCEL: {
              target: 'idle',
              actions: ['unsetWorkoutToBeRemoved'],
            },
            COMMIT: {
              target: 'idle',
              actions: ['unsetWorkoutToBeRemoved'],
            }
          }
        },
        confirm_week_removal: {
          on: {
            CANCEL: {
              target: 'idle',
              actions: ['unsetWeekToBeRemoved'],
            },
            COMMIT: {
              target: 'idle',
              actions: ['unsetWeekToBeRemoved'],
            }
          }
        }
      }
    },
    mobile: {
      initial: 'idle',
      states: {
        idle: {
          on: {
            DEFINE_WORKOUTS: 'define_workouts',
            WEEKLY_VIEW: {
              target: 'weekly_view',
              actions: ['setSelectedWeek'],
            },
            EDIT_DAY: {
              target: 'weekly_view.edit_day',
              actions: ['setSelectedDay'],
            },
            REMOVE_WORKOUT: { 
              target: 'weekly_view.confirm_workout_removal',
              actions: ['setWorkoutToBeRemoved']
            },
            REMOVE_WEEK: {
              target: 'confirm_week_removal',
              actions: ['setWeekToBeRemoved']
            }
          }
        },
        confirm_week_removal: {
          on: {
            CANCEL: {
              target: 'idle',
              actions: ['unsetWeekToBeRemoved'],
            },
            COMMIT: {
              target: 'idle',
              actions: ['unsetWeekToBeRemoved'],
            }
          }
        },
        define_workouts: {
          on: {
            BACK: 'idle',
            COMMIT: 'idle',
          }
        },
        weekly_view: {
          initial: 'idle',
          states: {
            idle: {
              on: {
                BACK: {
                  target: '#defineProgram.mobile.idle',
                  actions: ['unsetSelectedWeek'],
                },
                DEFINE_WORKOUTS: 'define_workouts',
                EDIT_DAY: {
                  target: 'edit_day',
                  actions: ['setSelectedDay'],
                },
                REMOVE_WORKOUT: { 
                  target: 'confirm_workout_removal',
                  actions: ['setWorkoutToBeRemoved']
                },
              }
            },
            define_workouts: {
              on: {
                BACK: 'idle',
                CONFIRM: 'confirm_workouts',
              }
            },
            confirm_workouts: {
              on: {
                CANCEL: 'idle',
                COMMIT: 'idle',
              }
            },
            edit_day: {
              on: {
                BACK: {
                  target: 'idle',
                  actions: ['unsetSelectedDay'],
                },
                CONFIRM: 'confirm_day',
              }
            },
            confirm_day: {
              on: {
                CANCEL: {
                  target: 'idle',
                  actions: ['unsetSelectedDay'],
                },
                COMMIT: {
                  target: 'idle',
                  actions: ['unsetSelectedDay'],
                },
              }
            },
            confirm_workout_removal: {
              on: {
                CANCEL: {
                  target: 'idle',
                  actions: ['unsetWorkoutToBeRemoved'],
                },
                COMMIT: {
                  target: 'idle',
                  actions: ['unsetWorkoutToBeRemoved'],
                }
              }
            }
          }
        }
      }
    }
  }
});