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 org 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();
});