Learn how to create ordered lists using URL query parameters

This document explains the process of creating ordered lists by manipulating URL query parameters in order to filter and sort search results.

Creating Ordered Lists with URL Query Params

#### Conclusion

There's a lot more required to actually
get our search service to use these values
and sort the results in the order provided.

I won't go over all of it, but I do want
to tie everything together.

From the onset, our goal was to take
what's in the url bar:

```
/?filters=id:[dkGlSlktdHF2FivvJZMh,zDNghhosAudvlk6JLROZ,1VQ2Ja94WtN0sTrJDRpl,JdPQC5AB1Cm3OZH1m7kH,v8z8qexqMbMTTndstivY,xPK3G3sxVlvG3WVGMoLX,lPqCpvnoarG1p48Kv67r,9L8LnBN8bY3wUSQUlx0v,Pyg0Dlh157nAukp0XvPR]
```

And get it into our search feature so we can
filter and sort on the values.

First, I will show you the code that generates
the sort function our search feature will use:

```typescript
export type FilterObjArr =
  Array<{
    fieldPath: string,
    values: string[],
  }>
  ;
export const getFilterObjArr = (filters: string): FilterObjArr => {
  const filterObjArr: Array<{
    fieldPath: string,
    values: string[],
  }> = [];
  const _filter = filters.trim();
  const matches = _filter.matchAll(multiValuesRgx);
  for (const match of matches) {
    const [_match] = match;
    const fieldPath = _getFieldPath(_filter, _match);
    const values = _getValues(_filter, _match);
    filterObjArr.push({
      fieldPath,
      values,
    });
  }
  return filterObjArr;
}

export const getSortFunction = (filterObjArr: FilterObjArr) => {
  const compare = filterObjArr.reduce((prev, curr) => {
    return (a: any, b: any) => {
      const { values } = curr;
      const v1 = a[curr.fieldPath];
      const v2 = b[curr.fieldPath];
      const idx1 = values.indexOf(v1);
      const idx2 = values.indexOf(v2) ;
      if (idx1 === idx2) {
        return prev(a, b);
      } else if (idx1 < idx2) {
        return -1;
      } else if (idx1 > idx2) {
        return 1;
      } else {
        return 0;
      }
    }
  }, (a: any, b: any) => 0);
  return compare;
}
```

It's nice we wrote all those re-usable helper
functions! That made the logic for these
components much simpler.

And here is where we put it (mostly, finally) all together:

```typescript
// this is where the `filters` query param is accessed.
// this is the query param defined in the browser URL
// bar.
const activeFilters = ctxt.query.filters as string | undefined;

// this will store our final, modified filters
let filters = '';

if (activeFilters) {
  // here we transform the filter into 
  // the search feature format
  filters += replaceMultiValueFilters(activeFilters);
}

// and here we use the sort function
// to generate a function that
// transforms our search results 
// into a list sorted in the order
// we specified in the URL.
const filterObjArr = getFilterObjArr(filters);
let sortFunction: ((a: any, b: any) => number) | undefined;
if (filterObjArr.length > 0) {
  sortFunction = getSortFunction(filterObjArr);
}
let transformResults: ((hits: any[]) => any) | undefined;
if (sortFunction) {
  transformResults = hits => hits.sort(sortFunction);
}
```

Now we can pass our `filters` and `transformResults` 
to our search feature and it will only return
pages that match the ids we specified and in
the same order as we specified them.

That's a lot of work just to enable creating
ordered lists just via url params, isn't it!

I think it's worth it though. I enjoyed the 
process and I have a neat little tool
I can leverage as I experiment building the website
and its pages. A better solution may present itself,
but for now, this is an idiomatic and intuitive 
way to create saved lists without requiring
any data being saved to a server. This is excellent for
my usecase: ad-hoc arrangements of data accessible
by URL.

It's possible I'll never use this feature again.
However, if it's useful, it may become central
to how the application and pages work and the
concept may be extended to enable writing 
even more powerful queries--just
with URL query params. 😉

This method is certainly with its limitations.
Browsers are only required to support 2048
characters in a URL, so your lists cap out 
at a certain length. Additionally, even modest
page chains generate a large URL that is not 
entirely savory to look at. Eventually, I will
need to allow users to create custom filters
that are saved to the database. But for simpler use
cases, I think it does the trick.

Thank you for tuning in and stay 
copacetic.

\- Pat