How to add a filter in react-admin List populated by unique values within the list?

Probably a newbie question, but can't quite connect the dots. I have a filter component in a List:

const BrandFilter = (props) => (
    <Filter {...props}>
      <SearchInput source="q" alwaysOn />
      <RadioButtonGroupInput source="active" alwaysOn label="" choices={[
        { id: 'true', name: 'Active' },
        { id: 'false', name: 'Inactive' },
        { id: ' ', name: 'All' },
      ]} />
      <QuickFilter source="pursue" label="Pursue" resettable />
      <SelectInput label="Status" source="status" optionText="status" />
    </Filter>
  );

The SelectInput doesn't show anything in the dropdown list. Not sure if it's possible but I'd like to show a dropdown list with unique status values that appear in the records. Status does not have an FK relationship; its just a text field that anything can be entered into. But, I'd still like the user to be able to see the values in the dropdown and select one. Possible? Thanks.

UPDATE

I tried to add a unique list of statuses as a reference record by modifying the api to accept a new end point: /brands/statuses and returning a unique list of statuses. It did work in populating the Status dropdown list.

App.js:

<Resource
  name="brands/statuses" />

Brand.js (Filter component)

  <ReferenceInput source="status" reference="brands/statuses" perPage={25}>
    <SelectInput label="Status" source="status" optionText="status" />
  </ReferenceInput>

However, I got an error that at least one record didn't have an id. I remembered that react expects records to have an id. So, as a hack, I added the id of the first brand record to the sql:

SELECT fpb.id, fpb.status FROM lookabout.fgm_product_brand fpb WHERE fpb.status IS NOT NULL GROUP BY fpb.status ORDER BY fpb.status

That resulted in getting a list of statuses in the filter dropdown. However, when I clicked on one of them, it sent the id of the status (which was actually just the id of a brand record) and returned no results:

http://localhost:3010/brands/find?limit=15&page=1&orderBy=id&orderDir=ASC&filter={%22active%22:%22%20%22,%22status%22:2}

Close, but not quite. I feel I'm forcing something because I'm not quite getting it. Or, working against how react-admin was meant to operate?? Any suggestions would be welcome. Thanks.

FINAL UPDATE

Got it to work. Rather than use the id of the brand record as a substitute status id, I just used the status itself. So, the sql in the api now reads:

SELECT fpb.status AS id, fpb.status FROM lookabout.fgm_product_brand fpb WHERE fpb.status IS NOT NULL GROUP BY fpb.status ORDER BY fpb.status

That gives the result set an id that is unique and that is then used in when passing the filter criteria. The HTTP GET request now looks like:

http://localhost:3010/brands/find?limit=15&page=1&orderBy=id&orderDir=ASC&filter={%22active%22:%22%20%22,%22status%22:%22Potential%22}

And that returns the expected results. Thanks to all for your help.

Solution

I see two solutions:

First, probably the best but with more work, is create new api endpoint, e.g, yourResourceStatuses or yourResource/statuses, which returns distinct uniques values for the status field, then reference this new resource with a ReferenceInput as your SelectInput parent:

<Filter>
    ....
    <ReferenceInput source="status" reference="resourceStatuses">
        <SelectInput label="Status" source="status" optionText="status" />
    </ReferenceInput>
<Filter/>

You need also to declare such resource under Admin, only with name prop, allowing react-admin to initialize it's redux stores.

<Admin>
    ....
    <Resource name="resourceStatuses"/>
</Admin>

If you are using SQL, this can be as simple as

SELECT DISTINCT status from 'table';

The second, probably will make appear duplicate status values on the dropdown, but would require less work if your api support text search on the status field. Is chaging the SelectInput for a AutocompleteInput and wrapping it with a ReferenceInput with the same resource.

<Filter>
    ....
    <ReferenceInput
        source="status"
        reference="yourResource"
        filterToQuery={searchText => ({ status: searchText })}
    >
        <AutocompleteInput label="Status" optionText="status" />
    </ReferenceInput>
<Filter/>