Bloc: How to get the state of multiple filter (complex filter) in Bloc.

[rravithejareddy]

Take flutter_todos example where you just using two filters but I want complex filter like rating(4 and above, 3 and above), cost(100to200$, 200to 300$), where user can use multiple states to retrieve items. In example you just passing enum.value in super funtion something like

FilteredTodosBloc({@required this.todosBloc})
: super(
todosBloc.state is TodosLoadSuccess
? FilteredTodosLoadSuccess(
(todosBloc.state as TodosLoadSuccess).todos,
VisibilityFilter.all,
)
: FilteredTodosLoadInProgress(),
)

In case of complex filter I want to use class object with list items, how to use this in super(), which is asking for only static fields and how to fill class from UI send the state back to bloc, I am from .net background where I can pass by simple model class with get sets, it seems complex to use here, can you provide a simple example on this, which would be great a help.

[felangel]

Hi @rravithejareddy 👋
Thanks for opening an issue!

Can you please provide a link to a sample app or snippet which illustrates the issue you're having? Thanks 👍

[rravithejareddy]

I am following your examples on flutter. here the link for sample app I am following
https://github.com/felangel/bloc/tree/master/examples/flutter_todos.

In this app you are using of simple enum filter.

enum VisibilityFilter { all, active, completed }

Instead of this, I want to use complex filter like different sections having checkboxes. user can select multiple filters at the same time, Some thing like in below

For this I tried Class model with Lists and get sets, but I am facing few issues like putting class model in super function in filtered_bloc, which is asking for static fields. How to Filling class model from UI with user selections like in sample your are just taking active filter as input to state, but I want to take class object as input in state and back to UI according to the event.
class Filter { List<int> quantity; List<int>grade; String type; }

`class FilteredCropsBloc extends Bloc {
final CropsBloc cropsBloc;
StreamSubscription cropsSubscription;
static Filter filter = new Filter();
filter.type = all; // filter is model calss which I wan to pass from state instead of enum as in your
example it's visual filter model.

FilteredCropsBloc({@required this.cropsBloc})
: super(
cropsBloc.state is CropsLoadSuccess
? FilteredCropsLoadSuccess(
(cropsBloc.state as CropsLoadSuccess).crops,
filter,
)
: FilteredCropsLoadInProgress(),
)`

[felangel]

@rravithejareddy you need to make your filter immutable and add a const constructor.

class Filter {
  const Filter(this.quantity, this.grade, this.type);

  const Filter.initial() : this(const <int>[], const <int>[], '');

  final List<int> quantity;
  final List<int> grade;
  final String type;
}

Then you can create a const default instance for your initial state like:

FilteredCropsBloc({@required this.cropsBloc})
  : super(FilteredCropsLoadSuccess(const Filter.initial(), ...);

Hope that helps 👍

[rravithejareddy]

But unable to add item to list in UI, I am using something like filter.cropTyoe.add("pulses") but it's giving me error as unmodifiable list. Then how can add items and send back to bloc.

[rravithejareddy]

Hi felangel,

Can you please reply to #1443 comment.

Thanks
Ravi Theja

On Sun, 12 Jul 2020, 10:51 Felix Angelov, [e-mail] wrote:

@rravithejareddy https://github.com/rravithejareddy you need to make
your filter immutable and add a const constructor.

class Filter {

const Filter(this.quantity, this.grade, this.type);

const Filter.initial() : this(const [], const [], '');

final List quantity;

final List grade;

final String type;

}

Then you can create a const default instance for your initial state like:

FilteredCropsBloc({@required this.cropsBloc})

: super(FilteredCropsLoadSuccess(const Filter.initial(), ...);

Hope that helps 👍

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/felangel/bloc/issues/1443#issuecomment-657176957, or
unsubscribe
https://github.com/notifications/unsubscribe-auth/AHDTGHXKWRMEYMBDKKVZGO3R3FB7HANCNFSM4OXIXIBA
.

[felangel]

@rravithejareddy can you please share a link to a sample app which illustrates the issue? It's very difficult for me to help without being able to see the complete source code. Thanks!

[rravithejareddy]

These are files which support my question
https://github.com/rravithejareddy/question

Here I am facing two issues

1) In on change function I am unable to add "string of cropType" directly to filter.croptype list (which is from state), it giving me error as unmodifiable list, instead I am taking local List and pushing in to state.filter.

onChanged: (value) { if (value) { _selected.add(key); // cropName.add("redGram"); // cropName.add("greenGram"); widget.filter.cropType = _selected; // widget.filter.cropName = cropName; widget.onSelected(widget.filter); } else{ _selected.remove(key); widget.filter.cropType = _selected; widget.onSelected(widget.filter); } },

2) when I hit few checkbox list filter which doesn't return any crops from the bloc, but it's not rebuilding the tree, but I have to check checkbox through the state.filter, since it's not rebuilding I am unable to show the checkmark.

In flitered_crops_bloc
`List _mapCropsToFilteredCrops(
List crops, Filter filter) {

return crops.where((crop) {
  if (crop.grade > filter.grade.length && crop.quantity > filter.quantity.length
   && filter.cropType.contains(crop.cropType))//&& filter.cropName.contains(crop.cropName)  ){
  {  return true;
  }
  else{
   return false;
  }
}).toList();

}`

if this method not returning an any crops my tree is not rebuilding but I want to show filter checkbox checked from the state.filter.

[rravithejareddy]

Please reply to my comment

On Mon, 31 Aug 2020, 09:11 Felix Angelov, [e-mail] wrote:

@rravithejareddy https://github.com/rravithejareddy can you please
share a link to a sample app which illustrates the issue? It's very
difficult for me to help without being able to see the complete source
code. Thanks!

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/felangel/bloc/issues/1443#issuecomment-683533070, or
unsubscribe
https://github.com/notifications/unsubscribe-auth/AHDTGHVK75VVJYE7I3MLZXLSDMLWRANCNFSM4OXIXIBA
.

[felangel]

@rravithejareddy can you please update the github repo to include all the files necessary to run the example? Thanks!

[rravithejareddy]

But it depended on local mongodb, still I will send you

On Wed, 2 Sep 2020, 20:27 Felix Angelov, [e-mail] wrote:

@rravithejareddy https://github.com/rravithejareddy can you please
update the github repo to include all the files necessary to run the
example? Thanks!

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/felangel/bloc/issues/1443#issuecomment-685791849, or
unsubscribe
https://github.com/notifications/unsubscribe-auth/AHDTGHWOQK2LGXEIQZXH5E3SDZMMXANCNFSM4OXIXIBA
.

[felangel]

Can you please create a very simple flutter app to demonstrate the issue? It would be best to have a super simple example rather than a large application.

[rravithejareddy]

@felangel/bloc
[e-mail] If you
see my repo it's not working when I extend filter with Equatable. Can you
please look into that once.

[image: Mailtrack]
https://mailtrack.io?utm_source=gmail&utm_medium=signature&utm_campaign=signaturevirality5&
Sender
notified by
Mailtrack
https://mailtrack.io?utm_source=gmail&utm_medium=signature&utm_campaign=signaturevirality5&
09/09/20,
01:11:18 PM

On Wed, Sep 9, 2020 at 8:19 AM Felix Angelov [e-mail]
wrote:

Thanks so much for the support @mikededo https://github.com/mikededo 🙏
💯

@rravithejareddy https://github.com/rravithejareddy you can make Filter
extend Equatable and you should be able to achieve the desired behavior
as long as you are always returning new instances rather than modifying the
same instance 👍

Closing for now but feel free to comment with additional questions and I'm
happy to continue the conversation 😄

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/felangel/bloc/issues/1701#issuecomment-689266144, or
unsubscribe
https://github.com/notifications/unsubscribe-auth/AHDTGHVZEW6EKSLW2JTMWBLSE3ULRANCNFSM4Q2IAOJA
.

[mikededo]

The Filter class is not extending Equatable, which I believe it should.

[rravithejareddy]

If I extend filter class with Equatable, Ui is not rebuilding with
oilandseeds filter.

On Wed, 9 Sep 2020, 13:27 mikededo, [e-mail] wrote:

The Filter class is not extending Equatable, which I believe it should.

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/felangel/bloc/issues/1443#issuecomment-689393548, or
unsubscribe
https://github.com/notifications/unsubscribe-auth/AHDTGHQ6QPNFCKLXCPN6XDLSE4YQNANCNFSM4OXIXIBA
.

[mikededo]

I will see what I can find 😉

[mikededo]

After looking and testing your app I've found the problem you had. It is not because Filter extended Equatable but because you were modifying the object when creating a new one. Let me explain:
When you were creating an item from the named constructor fromAddedItem and removing an item with fromRemovedItem, you were doing the following:

this.cropType.add(cropType);
this.cropName.add(cropName);
this.quantity.add(quantity);
this.grade.add(grade);

You were adding an item to the list and then returning the list with this new added item. This looks inoffensive, yet it was causing the Equatable error. Why? Because you were using the Filter that comes from the bloc, and Dart works by reference, which means that, since the Filter was not being cloned, you were modifying the state directly.
Then, when you were sending a new event to the bloc, with the modified filter, the state had already been modified and the comparison between the state and the yielded one was true, since they both had the same Filter object.

I have solved this by creating new lists, so the ones that are in the Filter are not modified. Here's an snippet:

List<String> cropTypes = List.of(this.cropType);
if (newCropType != null) {
  cropTypes.add(newCropType);
}

/// ...

return Filter(
  cropTypes,
  /// ...
}

As I already told you, this is a solution that can work with small projects but I would definetely not recommend you creating classes like so. I will make a pull request with the updated changes.

As a final recommendation, I would tell you to learn how to debug even if it is only by printing in the console. If you did so, you would probably have seen that the state was already being modified! You can always learn from mistakes 😃

✌️