feat: Filters prefix

[stephenlago99]

Context

The current Filters architecture makes it impossible to have 2 sets of filters on the same page, because of how the filters are stored in the URL params.

Description

Added a new prop filtersNamePrefix which enables us to have multiple Filters on the same page by prefixing their name:

https://app.lago.dev/invoices/invoices?
  in_amount=isBetween%2C5%2C100
  &in_currency=USD
  &cn_amount=isBetween%2C5%2C6
  &cn_creditNoteCreditStatus=voided

To use this functionality, we need to pass the new prop in two places:

• The Filters.Provider

  <Filters.Provider
    quickFiltersType={AvailableQuickFilters.InvoiceStatus}
    filtersNamePrefix="in"
    ...

• When calling the formatFiltersForQuery function

  return formatFiltersForQuery({
    searchParams,
    availableFilters: InvoiceAvailableFilters,
    filtersNamePrefix: 'in',
  })

Implementation

I've tried to keep the existing structure, without changing too many things. Most of the work was done inside useFilters, since it assumed a single set of filters in most cases (for example when setting a quick filter, or when resetting filters, it was deleting everything from the search params).

Screenshot