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

machine.js

const fetchMachine = Machine(
{
      id: 'community',
      type: 'parallel',

      context: {
        slug: '1234',
        community: undefined,
        followMachineServices: undefined,
        activitiesMachineServices: undefined,

        isFollowing: false,
        isAuthenticated: false,
      },

      states: {
        init: {
          meta: {
            message: 'loading data',
          },

          initial: 'loading',

          states: {
            loading: {
              meta: {
                message: 'loading community data',
              },
              invoke: {
                id: 'queryCommunity',
                src: 'queryCommunity',
                onDone: [
                  {
                    meta: {
                      message: 'community api call a success.',
                    },
                    cond: 'communityFound',
                    actions: [
                      'queryCommunitySuccess',
                      'createFollowMachineServices',
                      'createActivityMachineServices',
                    ],
                    target: 'loaded',
                  },
                  {
                    cond: 'communityNotFound',
                    target: 'notFound',
                  },
                ],
                onError: 'error',
              },
            },

            loaded: {
              meta: {
                message: 'user data loaded, now idle.',
              },
            },

            notFound: {
              meta: {
                message: 'community not found.',
              },
              entry: 'notFound',
              type: 'final',
            },

            error: {
              entry: 'logError',
              type: 'final',
            },
          },
        },

        user: {
          meta: {
            message: 'data has been loaded',
          },

          initial: 'unknown',

          on: {
            AUTHENTICATED: {
              actions: ['setIsAuthenticated'],
              target: '.unknown',
            },
          },

          states: {
            unknown: {
              on: {
                '': [
                  {
                    cond: 'isAuthenticated',
                    target: 'authenticated',
                  },
                  {
                    cond: 'isUnAuthenticated',
                    target: 'unAuthenticated',
                  },
                ],
              },
            },

            authenticated: {
              meta: {
                message: 'user is currently authenticated',
              },

              initial: 'loadFollowing',

              on: {
                FOLLOW: '.toggleFollow',
              },

              states: {
                loadFollowing: {
                  meta: {
                    message: 'loading what communities the user follows.',
                  },

                  invoke: {
                    id: 'queryMyFollowing',
                    src: 'queryMyFollowing',
                    onDone: [
                      {
                        meta: {
                          message: 'load following api success.',
                        },
                        actions: ['queryMyFollowingSuccess'],
                        target: 'loaded',
                      },
                    ],

                    onError: {
                      meta: {
                        message: 'toggle follow api errored.',
                      },
                      target: 'error',
                    },
                  },
                },

                toggleFollow: {
                  meta: {
                    message: 'user requested to follow community.',
                  },

                  invoke: {
                    id: 'toggleFollow',
                    src: 'toggleFollow',
                    onDone: [
                      {
                        meta: {
                          message: 'toggle follow api success.',
                        },
                        actions: ['toggleFollowSuccess', 'refreshFollowers'],
                        target: 'loaded',
                      },
                    ],
                    onError: {
                      meta: {
                        message: 'toggle follow api errored.',
                      },
                      target: 'error',
                    },
                  },
                },

                loaded: {},

                error: {
                  entry: 'logError',
                  type: 'final',
                },
              },
            },

            unAuthenticated: {
              meta: {
                message: 'user is currently NOT authenticated',
              },

              on: {
                LOGINANDFOLLOW: {
                  entry: 'login',
                  type: 'final',
                },
              },
            },
          },
        },
      },
    },
    {
      guards: {
        communityFound: (_, event) => event.data !== null,
        communityNotFound: (_, event) => event.data === null,
        isAuthenticated: context => context.isAuthenticated,
        isUnAuthenticated: context => context.isAuthenticated,
      },
    },

);