index.tsx

import { component$, useVisibleTask$ } from "@builder.io/qwik";
import { useLocation } from "@builder.io/qwik-city";

// import the file we created
import { usePatternParamExtractor } from '~/hooks/pattern-param-extractor'



export default component$(() => {
  const loc = useLocation();
  // /user/__username__/index.tsx
  // /user/PatrickJS -> {username: 'PatrickJS'}
  const param = usePatternParamExtractor(loc.url.pathname);
  const github = useStore({
    org: param.username,
  });

  const reposResource = useResource$<string[]>(({ track, cleanup }) => {
    // We need a way to re-run fetching data whenever the `github.org` changes.
    // Use `track` to trigger re-running of this data fetching function.
    track(() => github.org);

    // A good practice is to use `AbortController` to abort the fetching of data if
    // new request comes in. We create a new `AbortController` and register a `cleanup`
    // function which is called when this function re-runs.
    const controller = new AbortController();
    cleanup(() => controller.abort());

    // Fetch the data and return the promises.
    return getRepositories(github.org, controller);
  });

  console.log('Render');
  return (
    <main>
      {github.org}
      <section>
        <Resource
          value={reposResource}
          onPending={() => <>Loading...</>}
          onRejected={(error) => <>Error: {error.message}</>}
          onResolved={(repos) => (
            <ul>
              {repos.map((repo) => (
                <li>
                  <a href={`https://github.com/${github.org}/${repo}`}>{repo}</a>
                </li>
              ))}
            </ul>
          )}
        />
      </section>
    </main>
  );
});

export async function getRepositories(
  username: string,
  controller?: AbortController
): Promise<string[]> {
  console.log('FETCH', `https://api.github.com/users/${username}/repos`);
  const resp = await fetch(`https://api.github.com/users/${username}/repos`, {
    signal: controller?.signal,
  });
  console.log('FETCH resolved');
  const json = await resp.json();
  return Array.isArray(json)
    ? json.map((repo: { name: string }) => repo.name)
    : Promise.reject(json);
}

pattern-param-extractor.js

// make a file for this maybe in /src/hooks/pattern-param-extractor.js
function PatternParamExtractor(routesArray) {
  const routes = routesArray.map((path) => {
    const parameterNames = [];
    const regexPath = path.replace(/__([^_]+)__/g, (_, paramName) => {
      parameterNames.push(paramName);
      return '([^\\/]+)';
    });

    return {
      regex: new RegExp(`^${regexPath}/?$`),
      parameterNames,
    };
  });

  function extractParams(url) {
    const path = url.split('?')[0];

    for (const route of routes) {
      const match = route.regex.exec(path);
      if (match) {
        return route.parameterNames.reduce((acc, paramName, index) => {
          acc[paramName] = match[index + 1];
          return acc;
        }, {});
      }
    }

    return null; // No routes matched
  }

  return extractParams;
}

// Example usage:
export const usePatternParamExtractor = PatternParamExtractor([
  '/user/__username__',
  '/bookmarks/__bookmark__',
]);
// ^ export that and manually include your dynamic routes each time you create one