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

machine.js

const {cancel} = actions

Machine(
  {
    id: `createContract`,
    initial: `editing`,
    context: {
      grades: [],
      query: ``,
      services: [],
      students: [],
    },
    states: {
      editing: {
        type: `parallel`,
        on: {
          SUBMIT: `creating`,
        },
        states: {
          search: {
            initial: `idle`,
            states: {
              idle: {
                on: {
                  SEARCH: {
                    cond: `searchValid`,
                    target: `loading`,
                  },
                  TYPE: {
                    actions: [`assignQuery`, `cancelSearch`, `sendSearchEvent`],
                  },
                },
              },
            
              loading: {
                invoke: {
                  id: `searchStudents`,
                  src: `searchStudents`,
                  onDone: {
                    actions: `setStudents`,
                    target: `idle`,
                  },
                },
              }
            },
          },

          data: {
            initial: `idle`,
            states: {
              idle: {
                on: {
                  SELECT_MODALITY: `loading`,
                },
              },
              
              loading: {
                onDone: `idle`,
                type: `parallel`,
                states: {
                  grades: {
                    initial: `loading`,
                    states: {
                      loading: {
                        invoke: {
                          id: `loadGrades`,
                          src: `loadGrades`,
                          onDone: {
                            actions: `setGrades`,
                            target: `done`,
                          },
                        },
                      },
                      
                      done: {
                        type: `final`,
                      },
                    },
                  },
        
                  services: {
                    initial: `loading`,
                    states: {
                      loading: {
                        invoke: {
                          id: `loadServices`,
                          src: `loadServices`,
                          onDone: {
                            actions: `setServices`,
                            target: `done`,
                          },
                        },
                      },
                      
                      done: {
                        type: `final`,
                      },
                    },
                  },
                },
              },
            },
          },
        }
      },

      creating: {
        invoke: {
          id: `createContract`,
          src: `createContract`,
          onDone: `success`,
          onError: {
            actions: `handleGraphQLErrors`,
            target: `editing`,
          },
        },
      },

      success: {
        entry: `createContractSuccess`,
        type: `final`,
      },
    },
  },
  {
    actions: {
      setStudents: assign((ctx, event) => {
        // ctx.students = event.data.search.edges.map((edge) => edge.node)
      }),
      setGrades: assign((ctx, event) => {
        // ctx.grades = event.data.allGrades
      }),
      setServices: assign((ctx, event) => {
        // ctx.services = event.data.allServices
      }),

      assignQuery: assign((ctx, {query}) => {
        // ctx.query = query
      }),
      cancelSearch: cancel(`debouncedSearch`),
      sendSearchEvent: send(`SEARCH`, {
        delay: 2500,
        id: `debouncedSearch`,
      }),
    },
    guards: {
      hasErrors: (ctx, event) => false, // !!event.data?.errors,
      searchValid: (ctx) => true, // ctx.query?.length > 0,
    },
  }
)