Option to clear all filters programmatically

[Arvind6353]

Hi ,

Is there a way by which we can clear all the filters being applied programmatically.

[metagrover]

SelectedFilters come with a Clear All button which can help but there is no method as such that we expose to clear all the filters, but I think this will be a valuable addition.

Plus, it's trivial to implement if you or anyone else wants to take this up.

[Arvind6353]

@metagrover . Thank you . Can you please explain a bit on how to implement it programmatically . Am little new to the react but I would love to give it a try .

[metagrover]

Hi @Arvind6353, we had an internal discussion on this and it seems it's not as trivial as it seemed initially. We want to do this right without exposing any vulnerability. We are thinking of exposing an HOC connector which will expose such utility methods but this spec isn't finalised yet. So, I will get back to you on this once we have something credible.

In order to achieve this with the current setup, you can import connect method along with the clearValues action from the core and simply connect any desired component to reactivesearch-redux-store via connect method and dispatch clearValues as needed.

import React, { Component } from 'react';
import { connect } from '@appbaseio/reactivesearch/lib/utils';
import { clearValues } from '@appbaseio/reactivecore/lib/actions';

class MyComponent extends Component {
    ...
}

const mapDispatchtoProps = dispatch => ({
    clearValues: () => (dispatch(clearValues())),
});

export default connect(
    null,
    mapDispatchtoProps,
)(MyComponent);

Note that you will have full access to the redux store via this connect method, so you can do as you please. With great power, comes great responsibility.

[Arvind6353]

Thanks @metagrover for the explanation . I was trying a hack using ref . and I did call clearValues using this.ref.selector.props.clearValues(); But your suggestion makes more sense . I will try to use this .

[Arvind6353]

Hi , When I tried the above approach am getting the following error . Note : ElasticUI is my custom component.

Could not find "REACTIVESEARCH" in either the context or props of "Connect(ElasticUI)". Either wrap the root component in a , or explicitly pass "REACTIVESEARCH" as a prop to "Connect(ElasticUI)".

[metagrover]

Is your ElasticUI component wrapped inside ReactiveBase?

[Arvind6353]

No. ElasticUI component has ReactiveBase inside it . Changed it . It works . thank you .

[RukshanJS]

Hi @Arvind6353, we had an internal discussion on this and it seems it's not as trivial as it seemed initially. We want to do this right without exposing any vulnerability. We are thinking of exposing an HOC connector which will expose such utility methods but this spec isn't finalised yet. So, I will get back to you on this once we have something credible.

In order to achieve this with the current setup, you can import connect method along with the clearValues action from the core and simply connect any desired component to reactivesearch-redux-store via connect method and dispatch clearValues as needed.

import React, { Component } from 'react';
import { connect } from '@appbaseio/reactivesearch/lib/utils';
import { clearValues } from '@appbaseio/reactivecore/lib/actions';

class MyComponent extends Component {
  ...
}

const mapDispatchtoProps = dispatch => ({
  clearValues: () => (dispatch(clearValues())),
});

export default connect(
  null,
  mapDispatchtoProps,
)(MyComponent);

Note that you will have full access to the redux store via this connect method, so you can do as you please. With great power, comes great responsibility.

Hi @metagrover, sorry for replying in a really old thread. Could you please explain whether this setup is changed now because I want a method to manually update the state to re-populate the selected filters from outside the ReactiveBase component. (Without the user actually clicking on the checkboxes in a multi-list for example, but rather when navigating from another page, the required boxes are automatically checked)