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

machine.js

/*
 * Entity CRUD bis
 * preview: https://xstate.js.org/viz/?gist=5cee8452667147d56aa04f4bbfb0ed2d
 */

const machine = Machine({
  id: 'fetch',
  initial: 'idle',
  states: {
    idle: {
      type: 'atomic',
      on: {
        FETCH: 'pending'
      }
    },
    pending: {
      type: 'parallel',
      states: {
        resource1: {
          type: 'compound',
          initial: 'pending',
          states: {
            pending: {
              on: {
                'FULFILL.resource1': 'success'
              }
            },
            success: {
              type: 'final'
            }
          }
        },
        resource2: {
          type: 'compound',
          initial: 'pending',
          states: {
            pending: {
              on: {
                'FULFILL.resource2': 'success'
              }
            },
            success: {
              type: 'final'
            }
          }
        }
      },
      onDone: 'success'
    },
    success: {
      // type: 'compound',
      initial: 'list',
      states: {
        list: {
          on: {
            'ITEM.CLICK': 'item',
            'CREATE': 'create'
          }
        },
        create: {
          initial: 'form',
          context: {
            retries: 0
          },
          states: {
            form: {
              on: {
                ADD: 'saving'
              }
            },
            saving: {
              on: {
                RESOLVE: 'success',
                REJECT: 'failure'
              }
            },
            success: {
              type: 'final'
            },
            failure: {
              on: {
                RETRY: {
                  target: 'saving',
                  actions: assign({
                    retries: (context, event) => context.retries + 1
                  })
                }
              }
            }
          }
        },
        item: {
          initial: 'show',
          states: {
            show: {
              on: {
                // BACK_TO_LIST: 'list',
                EDIT: 'edit',
                DELETE: 'delete'
              },
            },
            edit: {
              initial: 'form',
              context: {
                retries: 0
              },
              states: {
                form: {
                  on: {
                    ADD: 'saving'
                  }
                },
                saving: {
                  on: {
                    RESOLVE: 'success',
                    REJECT: 'failure'
                  }
                },
                success: {
                  type: 'final'
                },
                failure: {
                  on: {
                    RETRY: {
                      target: 'saving',
                      actions: assign({
                        retries: (context, event) => context.retries + 1
                      })
                    }
                  }
                }
              },
              // on: {
              //   CANCEL: 'show',
              //   UPDATE: 'show' // async/remote
              // }
            },
            delete: {
              initial: 'form',
              context: {
                retries: 0
              },
              states: {
                form: {
                  on: {
                    ADD: 'saving'
                  }
                },
                saving: {
                  on: {
                    RESOLVE: 'success',
                    REJECT: 'failure'
                  }
                },
                success: {
                  type: 'final'
                },
                failure: {
                  on: {
                    RETRY: {
                      target: 'saving',
                      actions: assign({
                        retries: (context, event) => context.retries + 1
                      })
                    }
                  }
                }
              },
              // on: {
              //   CANCEL: 'show',
              //   DELETE: 'show' // async/remote
              // }
            }
          }
        },
        // on: {
        //   BACK_TO_LIST: 'list',
        //   ADD: 'list' // async/remote
        // }
      },
      // show: {
      //   on: {
      //     BACK_TO_LIST: 'list',
      //     EDIT: 'edit' // async/remote
      //   }
      // },
      // edit: {
      //   on: {
      //     CANCEL: 'show',
      //     UPDATE: 'show' // async/remote
      //   }
      // },
      // delete: {
      //   on: {
      //     CANCEL: 'show',
      //     DELETE: 'show' // async/remote
      //   }
      // }
    },
    hist: {
      type: 'history',
      history: 'shallow'
    }
  }
});