XState Asset Page Visualization https://xstate.js.org/viz/?gist=99d65de1bd47d047cfdf9e8485396f1f

machine.js

  const assetDetailPage = {}
  
  const fetchMachine = Machine({
      id: '/assets/:id',
      initial: 'loadingAsset',
      context: {
        pageTitle: '',
        loadingAsset: true,
        name: '',
        locale: '',
        category: '',
        orientation: '',
        destinationUrl: '',
        altText: '',
        assetUrl: '',
        createdDate: '',
        orientationOptions: [],
        localeOptions: [],
        categoryOptions: [],
      },
      states: {
        loadingAsset: {
          meta: {
            uiState: assetDetailPage,
          },
          invoke: {
            id: 'loadAsset',
            src: 'loadAsset',
            onDone: {
              target: 'editAsset',
              actions: [
                'setAsset',
                'pageTitle',
                'setLookupData',
                'loadingAssetComplete',
              ],
            },
            onError: {
              target: 'error',
            },
          },
        },
        editAsset: {
          meta: {
            uiState: assetDetailPage,
          },
          on: {
            UPDATE_NAME: {
              target: 'editAsset',
              actions: ['updateName'],
            },
            UPDATE_ORIENTATION: {
              target: 'editAsset',
              actions: ['updateOrientation'],
            },
            UPDATE_CATEGORY: {
              target: 'editAsset',
              actions: ['updateCategory'],
            },
            UPDATE_LOCALE: {
              target: 'editAsset',
              actions: ['updateLocale'],
            },
            UPDATE_DESTINATION_URL: {
              target: 'editAsset',
              actions: ['updateDestinationUrl'],
            },
            UPDATE_ALT_TEXT: {
              target: 'editAsset',
              actions: ['updateAltText'],
            },
            UPDATE_ASSET_URL: {
              target: 'editAsset',
              actions: ['updateAssetURL'],
            },
            SAVE_ASSET: {
              target: 'saveAsset',
              actions: ['loadingAsset'],
            },
            DELETE_ASSET: {
              target: 'deleteAsset',
              actions: ['loadingAsset'],
            },
            NAVIGATE_TO_LIST: {
              target: 'editAsset',
              actions: ['navigateBackToListView'],
            },
          },
        },
        saveAsset: {
          meta: {
            uiState: assetDetailPage,
          },
          invoke: {
            id: 'saveAsset',
            src: 'saveAsset',
            onDone: {
              target: 'editAsset',
              actions: [
                'setAssetFromMutation',
                'pageTitle',
                'loadingAssetComplete',
              ],
            },
            onError: {
              target: 'error',
            },
          },
        },
        deleteAsset: {
          meta: {
            uiState: assetDetailPage,
          },
          invoke: {
            id: 'deleteAsset',
            src: 'deleteAsset',
            onDone: {
              target: 'editAsset',
              actions: ['navigateBackToListView'],
            },
            onError: {
              target: 'error',
            },
          },
        },
        error: {
          meta: {
            uiState: assetDetailPage,
          },
        },
      },
    });