Running side-effects on state changes

For this tutorial, we would like to fetch the list of repositories for a given GitHub organization. To aid you, we have added the getRepositories() function to the bottom of the file. Your task is to use the getRepositories() function to fetch the list of repositories whenever the user updates the organization input.

You will need to use useWatch() to observe changes to the github.org, and on each update of the organization, invoke getRepositories(). Here is an example of how to use useWatch$()

useWatch$((track) => {
  // STEP 1: Tell Qwik which propreties it should track and re-run this function whenever they change.
  track(github, "org");

  // STEP 2: For now, we don't want to run this code on the server. We will cover SSR in the later part.
  if (isServer) return;

  // STEP 3: Perform the fetching of the repositories.
  github.repos = null;
  const controller = new AbortController();
  getRepositories(github.org, controller).then(
    (repos) => (github.repos = repos)
  );

  // STEP 4: Return a cleanup function to abort the fetching if the user changes the organization.
  return () => controller.abort();
});