CODEWITHSUNDEEP
reactjsstate-machinexstate-react
mohamedamin benhamissa
mohamedamin benhamissa

Reputation: 1

How to Trigger a Function from a Step Machine without Declaring a Button in the Component

I have a feedback component where I'm sending feedback using an async function. Here’s the function:

const sendFeedback = async () => {
  const feedbackData = {
    feedback: {
      comment: "test",
      rating: 5,
    },
  };

  try {
    const response = await axios.patch("api", feedbackData);
    console.log("Feedback sent successfully:", response.data);
  } catch (error) {
    console.error("Error sending feedback:", error);
  }
};

Additionally, I’m using a step machine that handles different states. Here’s the relevant part of the step machine:

FEEDBACK: {
  entry: () => {
    console.log("CallFeedback event handled, transitioned to FEEDBACK");
  },
  on: {
    next: [
      {
        target: "LOCKED",
        guard: ({ context }: { context: StepsContext }) =>
          context.outroVideo.length > 0,
      },
      {
        target: "START",
        guard: ({ context }: { context: StepsContext }) =>
          context.evaluationStatus === "InProgress",
      },
      { target: "RESULTS" },
    ],
  },
},

Question:

How can I make the next event of the step machine trigger the sendFeedback function without explicitly declaring a button in my component? Is there a way to automatically execute the function when the next event is fired?

Upvotes: 0

Views: 21

Answers (0)

Related Questions