Get and display filter values

I’d like to be able to display some current filter values in my ReactAdmin app’s app bar (or elsewhere), e.g.:

which is a working example (using the code below) displaying a team name from a teamId filter and a boolean value from a boolean filter.

I’ve written a method which works to let me get at and display filter data (including items looked up based on their item ids in the filter), but it dives into internal state a bit horribly:

// getFilterValue.js
const getFilterValue = (state, source, resource, field) => {
  let value = undefined;

  if (!state || !source) return value;
  
  const filterJSON =
    state.router &&
    state.router.location &&
    state.router.location.query &&
    state.router.location.query.filter;

  if (filterJSON) {
    let filter = JSON.parse(decodeURIComponent(filterJSON));

    let id = filter && filter[source];

    if (id !== undefined) {
      if (!resource) {
        value = id;
      } else {
        const data =
          state.admin &&
          state.admin.resources &&
          state.admin.resources[resource] &&
          state.admin.resources[resource].data;

        if (data) {
          value = data[id];
          if (field) {
            value = value[field];
          }
        }
      }
    }
  }

  return value;
};

export default getFilterValue;

which can be used in a connected replacement app bar component, e.g.:

const mapStateToProps = (state, props) => {
  let team = getFilterValue(state, 'teamId', 'teams'); //, 'name');
  let previousMonth = getFilterValue(state, 'previousMonth');
  let title = `${team ? team.name : 'Company'} Sales. ${previousMonth ? `Previous month = ${previousMonth}` : 'Nothing to see here'}.`;
  return {
    ...props,
    title
  };
};

I’d be very interested to get some assistance, with a view to contributing something back, if what I’m trying to do and how I’m trying to do it aren’t going completely down the wrong path!

• Is this something that I can already do, but I’ve not understood how?
• Might something along these lines (i.e. at least with the same general aim) be considered for inclusion in the project?
• If so, where might I start to integrate it better?
  • How do I get at current filter state, cleanly?
  • How do I get at (already loaded…) resources cleanly?
  • Is my assumption correct (as it seems to be), that if a resource is referred to by id in the current filter, then it must already exist in the pre-loaded resources (otherwise, the user couldn’t have selected it)?
    • If this assumption is false the existing code won’t exception, it just returns undefined as it would if the filter isn’t being applied.
• Also relevant (and something else I may just not be understanding how to do): I’ve integrated the above into an app-wide connected app bar, which means it’s trying to display filters appropriate to just one resource list in the title of every list display (which won’t exception, it just won’t be a title which makes sense!). So it’s going to need a bunch of conditional logic based on what the current list is to decide which title to construct. Is there a better, existing way to more cleanly link a (functional) title (or app bar) just to one given list/resource-type?

I’ve already found useFilterState and useReference, neither of which seem to be quite what I’d need, and parseQueryFromLocation which potentially seems to address getting at the current filter more cleanly, at least.

[mikebeaton]

Could be a Catch-22 - I don’t know what they do - yet - so I can’t document them to help myself understand what they do! 😉

A hooks-based approach is still quite new to me, not yet second nature (I suspect I won’t be completely alone, there!), so I’m finding it slower to read and understand the codebase, and thereby simply work out what to do, than I would with a non-hooks-based approach. At the moment, I haven’t fully understood how or even where in the codebase the query filter string actually gets set, for example… (and I usually think I’m quite good at reverse-engineering other people’s code!).

But, I’m sure I’ll get there!

In the meantime, my approach above - as also documented in my SO answer - does work perfectly well; it’s at least one workable way of ad hoc getting hold of the current filter settings (and corresponding selected resource objects) anywhere in your code, to display them to the user.

[djhi]

Thank you for the kind words 😃 The documentation is continuously being improved. We recently documented some hooks but not all of them. Please consider helping us if you can 😃