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 openingAnimation = () => {
    new Promise((resolve, reject) => {
      setTimeout(() => resolve(true), 1000);
    });
  }
  
  const closingAnimation = () => {
    new Promise((resolve, reject) => {
      setTimeout(() => resolve(true), 1000);
    });
  }
    
  const fetchingPreview = () => {
    console.log('fetchingPreview');
    new Promise((resolve, reject) => {
      setTimeout(() => resolve({
          previewData: {
            '958c9c0f-db8d-49f1-bdb1-3d4495e1615a': 'Sample Text',
            'a61e2258-d433-4636-b2b5-e3744bb16920': 'Sample Text',
          },
          previewProjection: [
            {
              type: 'string',
              path: '958c9c0f-db8d-49f1-bdb1-3d4495e1615a',
              isReadOnly: false,
              label: 'title',
              isRequired: false,
              placeholder: 'Placeholder',
              isRequiredMsg: 'Required!',
              width: 'm',
            },
            {
              type: 'string',
              path: 'a61e2258-d433-4636-b2b5-e3744bb16920',
              isReadOnly: false,
              label: 'animal',
              isRequired: false,
              placeholder: 'Placeholder',
              isRequiredMsg: 'Required!',
              width: 'm',
            },
          ],
        }), 1000);
    });
  }
    
  const fetchingSuite = () => {
    new Promise((resolve, reject) => {
      setTimeout(() => resolve(true), 1000);
    });
  }
  
  const setPreviewProjection = assign({
    preview: (context, data) => {
      console.log('context', context);
      console.log('data', data);
      
      return data;
    }
  })
  
  const rootState = '@state/';
  
  const addControl = '@state/addControl';
  const done = '@state/done';
  const error = '@state/error';
  const getApplicationConfig = '@state/getApplicationConfig';
  const getVersions = '@state/getVersions';
  const idle = '@state/idle';
  const loading = '@state/loading';
  const manageVersions = '@state/manageVersions';
  const opening = '@state/opening';
  const opened = '@state/opened';
  const closing = '@state/closing';
  const statePreview = `${rootState}preview`;
  const stateSuite = `${rootState}suite`;
  
  const ADD_CONTROL = '@action/ADD_CONTROL';
  const CANCEL = '@action/CANCEL';
  const CLEAR_ERROR = '@action/CLEAR_ERROR';
  const OPEN = '@action/OPEN';
  const OPEN_DRAWER = '@action/OPEN_DRAWER';
  const FETCH = '@action/FETCH';
  const FETCH_PREVIEW = `${FETCH}/PREVIEW`;
  const FETCH_SUITE = `${FETCH}/SUITE`;
  const SAVE_CONTROL = '@action/SAVE_CONTROL';
  const SORT = '@action/SORT';

  const fetchMachine = Machine({
    id: 'fetch',
    initial: idle,
    context: {
      retries: 0,
      preview: null
    },
    states: {
      [idle]: {
        on: {
          [ADD_CONTROL]: {
            target: addControl,
            actions: 'updateSelectedGroup',
          },
          [OPEN]: opening,
          [FETCH]: loading,
          [OPEN_DRAWER]: getApplicationConfig,
          [SORT]: {
            actions: 'setSortOrder',
          },
        }
      },
      [loading]: {
        invoke: {
          id: 'invoke.fetchProjection',
          src: 'fetchProjection',
          onDone: {
            target: idle,
            actions: 'setTransformedProjection',
          },
          onError: {
            target: error,
            actions: 'updateCtxWithErrorMsg',
          },
        },
      },
      [addControl]: {
        initial: idle,
        states: {
          [idle]: {
            on: {
              [SAVE_CONTROL]: {
                target: done,
                actions: 'updateCtxWithNewControl',
              },
              [CANCEL]: done,
            },
          },
          [done]: {
            type: 'final',
          },
        },
        onDone: idle,
        onError: idle,
      },
      [getApplicationConfig]: {
        invoke: {
          id: 'invoke.fetchConfigId',
          src: 'fetchConfigId',
          onDone: {
            target: getVersions,
            actions: 'setConfigId',
          },
          onError: {
            target: error,
            actions: 'updateCtxWithErrorMsg',
          },
        },
      },
      [getVersions]: {
        invoke: {
          id: 'invoke.fetchVersions',
          src: 'fetchVersions',
          onDone: {
            target: manageVersions,
            actions: 'setVersions',
          },
          onError: {
            target: error,
            actions: 'updateCtxWithErrorMsg',
          },
        },
      },
      [manageVersions]: {
        on: {
          [CANCEL]: {
            target: idle,
          },
          [FETCH]: {
            target: loading,
          },
        },
      },
      [opening]: {
        invoke: {
          id: 'invoke.openingAnimation',
          src: openingAnimation,
          onDone: opened,
          onError: idle
        },
      },
      [opened]: {
        type: 'parallel',
        on: {
          CLOSE: closing,
        },
        states: {
          [statePreview]: {
            initial: idle,
            states: {
              [idle]: {
                on: {
                  [FETCH_PREVIEW]: loading,
                }
              },
              [loading]: {
                invoke: {
                  id: 'invoke.fetchingPreview',
                  src: 'fetchingPreview',
                  onDone: {
                    target: done,
                    actions: 'setPreviewProjection'
                  },
                  onError: error,
                },
              },
              [done]: {
                after: [
                  {
                    delay: 1000,
                    target: idle,
                  }
                ]
              },
              [error]: {},
            }
          },
          [stateSuite]: {
            initial: idle,
            states: {
              [idle]: {
                on: {
                  [FETCH_SUITE]: loading,
                }
              },
              [loading]: {
                invoke: {
                  id: 'invoke.fetchingSuite',
                  src: 'fetchingSuite',
                  onDone: done,
                  onError: error,
                },
              },
              [done]: {
                after: [
                  {
                    delay: 1000,
                    target: idle,
                  }
                ]
              },
              [error]: {},
            }
          },
        },
      },
      [closing]: {
        invoke: {
          id: 'invoke.closingAnimation',
          src: 'closingAnimation',
          onDone: idle,
          onError: idle,
        }
      },
      [error]: {
        on: {
          [CLEAR_ERROR]: {
            target: idle,
            actions: 'clearErrorMsg',
          },
        },
      },
    }
  }, {
    actions: {
      setPreviewProjection,
    },
    services: {
      fetchingSuite,
      fetchingPreview,
      closingAnimation,
    }
  });