Problem with storage provider and lifecycle event

Ionic Framework ionic-v3
1

Hey,

I have a massive issue with lifecycle events and my storage provider.

Main Page: loads my provider data inside the ionViewDidLoad (should happen at the very beginning).
Sub Page: stores my provider data inside the ionViewWillUnload (should happen at the very end when leaving the sub page).

So when I switch from the Sub Page to the Main Page, I would always load the old data as the storage.set function within the ionViewWillUnload would run AFTER the ionViewDidLoad of my main page.

How can I make sure that whenever I go back from my Sub Page to my Main Page, that the data will be stored BEFORE the main page would get the data within ionViewDidLoad ?

No idea to solve this to be honest.

Thanks in advance!

2

Youā€™re asking for the data before itā€™s ready. And you DO NOT WANT to force your page to wait until the data is ready. Maybe it takes 5 seconds or 25 seconds for the data to process. You have no control over the userā€™s device.

So load the page, and display the information when it is ready, for example by using Observables and the async pipe.

1 Like
3

observables are provided with Ionic, so the most straight forward approach would be to use rxjs to solve my problem, or?

4

Well, I donā€™t completely understand your situation, but there are several possible solutions. Letā€™s say you donā€™t have to store a ton of data. One thing you could do that would avoid Observables would be to make a redundant copy.

Youā€™ve got your StoreDataProvider that all pages give data to and get data from. That provider keeps a copy of all the data in memory. So you call your providerā€™s store() function and it stores data in some Map or Array letā€™s say. As a side effect, you also store the data in Storage. So storing in Storage only fires after storing in the provider is complete. Then your next page reads from the provider, so it doesnā€™t have to wait for Storage.

Anyway, there are lots of other strategies too. But youā€™d need to explain more about your potential data set if you want more useful advice than just me spitballing.

1 Like
5

Thanks for your feedback!

What I would like to do is the following:

My page shows a list of entried (i.e. movies). Each movie belongs to a category.

I have a filter menu which lets me filter the categories via checkboxes. Once I return to my movie page, Iā€™d like to only show the movies which belong to the categories I previously checked.

The movie list and the filter settings (category name with true/false flag) are stored seperately via provider in an Ionic storage.

The only solution I could think of is to update my category storage every single time I click on a checkbox button. Can I make sure the myprovider.storage.set(ā€˜categorienameā€™, newBooleanValue) performed on the onclick is fast enough when the user spams the button? And would it actually become a performance issue if I update my ionic storage via provider on every click?:confused:

Otherwise, if you know a better approach for this, please let me know :slight_smile: The original idea to simply store the category selection in a local array and storing the whole array when I leave the filter page does not work for the reasons I mentioned in my first post (storing the array when leaving the filter page would fire AFTER I returned to my move list).

Thanks in advance:)

6

I think it is better to simply use a modal page with checkboxes and a save/return button as filter page, when I click on save/return I would simply store the filter data in an observed object which would trigger the filtering of my main page. Thoughts?:slight_smile:

7

Something iā€™ve done to prevent ā€œspammingā€ is create a boolean on my component that triggers to true when the save process initiates, then resolves to false once the data is saved / stored. For example

export class SavePage {
 isSaving: boolean;

constructor(public storage: Storage) {
   this.isSaving = false;
  }

 saveNewItem(email: string) {
   if (this.isSaving) {  
       return;  
     }
  this.isSaving = true;
  this.storage.set('email', email)
 .then(() => this.isSaving = false)
 .catch(() => this.isSaving = false)   
  }  
 }

And / or set items to disabled in my template based on that boolean

<button ion-button [disabled]="isSaving" (click)="saveNewItem(email)"> Save </button>

This is a simplified example, as I would be using a provider to save whatever it is in storage, a database, whatever. The ā€˜emailā€™ item is arbitrary.

1 Like
8

Thanks for the tip!

Quick question: what is the better approach:

  • update my Ionic storage on every checkbox click
    or
  • store the checkbox values in a local array, and when the user returns to the main page update my Ionic storage with the local array
9

My knee-jerk reaction is to say store the values in a local array (via provider), and save when user returns to the main page, or offer an explicit option for users to save manually. In my opinion, it just seems more ā€˜normalā€™.