Feat/queryparams

[oskarrough]

Refactor of the query filter dance.

• Easier queries --> ?search=funk jazz and ?order=asc/desc. Works on /explore and /tracks. These are internally mapped to the supabase search filter and order config respectively
• Debounced data fetching. Now it'll maximum query every 400ms when modifying the filters
• The usual fixes and improvements here and there
• A few new functions in url-utils.js for url query param handling
• A more consistent pattern?

There's still quite a lot of code to be added to any component that wants to all this query->filter->browse magic. I made a test class to try and extract it all. It goes something like this

• props query: {} and defaultFilters: []
• get queryWithDefaults() -> query incl. defaultFilters and this.query.search filter
• connectedCallback -> set this.query from (known) URLSearchParams
• debouncedDataFetcher()
• render() -> <r4-supabase-filter-search> and <r4-supabase-query>
• clearFilters() -> setQuery
• @onQuery -> setQuery
• @onSearchFilter -> setQuery
• setQuery -> updates this.query, update url params, fetch data

These things have to be duplicated whereever we want the query interface. Thinking of ideas how to reduce it or improve it, but what we have also works.

Closes #154

[netlify[bot]]

✅ Deploy Preview for radio4000-components ready!

Name	Link
🔨 Latest commit	74a071d8950379eec1f8cb857a6d7be4e2b7cfbe
🔍 Latest deploy log	https://app.netlify.com/sites/radio4000-components/deploys/654e02a82b4bb7000856e204
😎 Deploy Preview	https://deploy-preview-155--radio4000-components.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[oskarrough]

OK, tried with extending our pages with a "BaseQuery" class. This works, seems pretty clean, but extending classes when in comes to custom elements doesn't feel right. So I went back to dropping a component <r4-base-query> in the pages DOM instead, and rely on events.

SO, this is how it works now:

constructor() {
  this.query = {table: 'channels'}
}
handleData(event) {
  this.myData = event.detail.data
}
render() {
  return html`
    <r4-base-query .initialQuery=${this.query} .defaultFilters=${[]} @data=${this.handleData}></r4-base-query>
    <p>We have ${this.myData?.length} rows</p>
  `
}

The base query component will do this:

• handle initial query from parent + URL
• render filter controls
• fetch data (debounced) when query changes
• dispatches data event on new data

You can't stop it from rendering the filter controls atm. Probably we want more flexibility here? But in those cases we can also just skip the component and use r4-filter-search and r4-supabase-query directly.