import * as React from "react";
import { FlowStore } from "trackflow";

const SubmitButton: React.FC = () => {

  const onSubmit = () => {
    // start the submit_button_click Flow with a timeout of 5000 ms
    const flow = FlowStore.newFlow("submit_button_click", 5000);
    fetchApi(flow).then(res => {
      console.log(flow.info());
    });
  } 

  return (
    <button onClick={onSubmit}>Submit</button>
  );
}

import { Flow } from "trackflow";

// method that makes a network request on submit button click
const fetchApi = (flow: Flow) => {
  const url = "https://restcountries.com/v3.1/independent?status=true";

  // add some useful data to the Flow
  flow.addFlowData({
    url,
    requestType: "GET"
  });

  return fetch(url)
    .then(res => {
      // mark the successful network request
      flow.mark("api_fetch_complete");

      await parseResponse(res);

      // mark the parsing completed step with some step data
      flow.mark("response_parsed", {
        parseType: 2,
      });

      await render(parsedResponse);

      // stop the Flow after the response has been rendered
      flow.stop({
        reason: "response rendered",
      });
    })
    .catch(error => {
      // fail the Flow if the network request throws an error
      flow.fail({
        reason: error,
      });
    });
};