Making sure to store my filter settings before returning to main view

Ionic Framework ionic-v3
#1

Hey,

I have a list of items and a filter menu. I need help to ensure that my filter settings are stored before my list of items would load when I return from the filter menu back to my itemlist.

Currently my app looks like this:

In the filter menu I would set my Ionic storage to store the filter settings:

  async ionViewCanLeave() {
     //create filterSettings object
     await this.localDataProv.setFilter(this.filterSettings);
  }

In my list I would build up my list by retrieving the filter settings via .get on my filter storage:

async ionViewWillEnter() {
    this.filterSettings = await this.localDataProv.getFilter();
    //perform filtering of items based on filterSettings
}

My provider is a simple Ionic storage:

  async getFilter() {
    return await this.storage.get('filterCollection');
  }

  async setFilter(data: any) {
    await this.storage.set('filterCollection', data);
    return true;
  }

However, there is no guarantee that my filter storage would set before I retrieve the data within the ionViewWillEnter of my list view.

How can I ensure that the filter will always be set before I return back to my list?

Is there a better approach than this?

Thanks in advance.

#2

Here are the relevant methods from NavController:

ionViewWillEnter	void
ionViewCanEnter	boolean/Promise<void>	
ionViewCanLeave	boolean/Promise<void>

You see that ionViewWillEnter is not waiting for your promise to resolve before entering the page. It just is a void method. You can try to use ionViewCanEnter instead in your list view. That way NavController is waiting for your ionViewCanEnter method to resolve with a boolean before entering the page.

#3

Thanks for that, good info:)

It seems to work.

When it says ionViewCanEnter being a boolean/Promise, does that mean that it waits for my promise to actually resolve or does it simply want to obtain a promise?

I mean, will both methods be the same?

Method 1:

My storage provider:

  async setFilter(data: any) {
    await this.storage.set('filterCollection', data);
    return true;
}

My filter menu:

  async ionViewCanLeave() {
     //create filterSettings object
     await this.localDataProv.setFilter(this.filterSettings);
  }

My list items:

async ionViewCanEnter() {
    this.filterSettings = await this.localDataProv.getFilter();
    //perform filtering of items based on filterSettings
}

Method 2:
My storage provider:

  async setFilter(data: any) {
    return await this.storage.set('filterCollection', data);
}

My filter menu:

  async ionViewCanLeave() {
     //create filterSettings object
     await this.localDataProv.setFilter(this.filterSettings);
  }

My list items:

async ionViewCanEnter() {
    this.filterSettings = await this.localDataProv.getFilter();
    //perform filtering of items based on filterSettings
}
#4

I’m not sure. I think it waits for a Promise and checks if the return value from the promise is true. If not, the page is not allowed to be entered and you get back to your previous page. So you could solve it like that:

async ionViewCanEnter() {
  try{
    this.filterSettings = await this.localDataProv.getFilter();
    //perform filtering of items based on filterSettings
    return true;
  } catch(error) {
    return false;
  }
}