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 photoBook = Machine({
    id: 'photoBook',
    initial: 'initialSettings',
    context: {
      success: null,
      fileHandler: null,
      title: null
    },
    states: {
      initialSettings: {
        on: {
          SELECT_NO_OF_PAGES: 'composing'
        }
      },
      composing: {
        id: 'composing',
        initial: 'selectPage',
        context: {
          fileHandler: null,
          success: null
        },
        states: {
          selectPage: {
            on: {
              SELECT_PAGE: 'selectFile'
            },
          },
          selectFile: {
            on: {
              SELECTED: 'photoUpload'
            }
          },
          photoUpload: {
            after: {
              1000: 'failure'
            },
            invoke: {
              src: () => new Promise((res, rej) => {
                setTimeout(() => {
                  res({
                    fileHandler: 'some file'
                  })
                }, 500)
              }),
              onDone: {
                target: 'details',
                actions: assign({
                  fileHandler: (ctx, e) => e.data.fileHandler,
                  success: true
                })
              },
              onError: {
                target: 'failure'
              }
            }
          },
          failure: {
            on: {
              RETRY: 'selectFile'
            }
          },
          details: {
            on: {
              SAVE: '#composing'
            },
            type: 'parallel',
            states: {
              editTitle: {
                initial: 'read',
                states: {
                  edit: {
                    on: {
                      SAVE_TITLE: 'read'
                    }
                  },
                  read: {
                    on: {
                      EDIT_TITLE: 'edit'
                    }
                  }
                }
              },
              editDesc: {
                initial: 'read',
                states: {
                  edit: {
                    on: {
                      SAVE_DESC: 'read'
                    }
                  },
                  read: {
                    on: {
                      EDIT_DESC: 'edit'
                    }
                  }
                }
              }
            }
          }
        }
      },
    }
  });