[Ionic 4] How to update a list of elements after returning from modal

Ionic Framework ionic-v3
1

I have a list of items and I have an option to add one more item to this list. I created the “add one more item” option using a modal, but when I return to the main page I have to force a refresh using document.location.reload(true); so my new added item shows in the list. The only problem that I see with this method is the loading time, taking 1 to 2 seconds to reload the page. Considering that the loaded elements are very simple, I believe that when there are more complex items this time will increase.

I see some people suggesting to use ionViewWillEnter, but I can’t see how to implement this to reload the page.

mainpage.ts (calling the modal)

async myFunction() {
	const modal = await this.modalCtrl.create({
		component: MyModalPage,
		backdropDismiss: false
	});

	let dataReturned;
	modal.onDidDismiss().then((modalData) => {
		dataReturned = modalData.data;

		// If 'saved' is returned, refresh homepage
		if (dataReturned == 'saved') {
			document.location.reload(true);
		}
	});

	return await modal.present();
}
2

While it may seem simple, this is an issue that really goes to the heart of webapp framework design, and IMHO is probably a major reason for Angular incorporating something like RxJS in it. I completely agree with your assessment that document.location.reload is an extremely poor option, as it reloads not only the page but the entire app.

In fact, I would start by trying to avoid “reload the page” entirely. Instead, I would look into some sort of design that leverages RxJS to propagate these changes. For example,

class Service {
  stuff$ = new BehaviorSubject<Stuff | null>(null);
}

class Page {
  constructor(public service: Service) {}

  ...
  modal.onDidDismiss().then(mr => {
    this.service.stuff$.next(mr.data);
  });
  ...
}

{{service.stuff$ | async}}

Obviously this is super-bare-bones, but hopefully sufficient to demonstrate the general idea. There are also a number of alternative implementation idioms of the same concept.

1 Like
3

The modal can return data, so why not add that to the list in the caller page and angular will do the rest?

1 Like
4

First of all I would like to take this opportunity to thank for the countless times that @rapropos answers have helped me. I would very much like to try the suggestion of using RxJS, but I am still very ignorant in that regard to try to apply to my current method, coincidentally this week was the first time I knew and used code using RxJS.

So I tried using the method suggested by @Tommertom and it worked! I’m going to post here what I did in case someone need it.

edited mainpage.ts:

checkForUpdates() {
	if (this.finalModalData.length == 0) {
		console.log('Nothing new');
		return;
	} else {
		// Add new items to list
		console.log("New information received, trying to append to local list: ", this.finalModalData);
		let newEntry = {
		    name: this.finalModalData[0],
		    projectId: this.finalModalData[1]
		};
			
		// Update local array
		this.projects = [newEntry, ...this.projects];
		console.log("This is how projects looks now: ", this.projects);

		// Delete finalModalData content so we can use again later
		this.finalModalData = [];
		return;
	}
}

async myFunction() {
	const modal = await this.modalCtrl.create({
		component: MyModalPage,
		backdropDismiss: false
	});

	//Get the data returned from the Modal and add to global variable
	modal.onDidDismiss().then((modalData) => {
		this.finalModalData = modalData.data;

		// Run check updates when modal returns
		this.checkForUpdates();
	});

	return await modal.present();
}
5

Rxjs is the endgame though (currently), maybe even with ngrx

So whenever you feel comfortable enough dig into it!

6

Witch is the best practices: to update the data directly in the modal or to returning to paren page and calling the service from there?

Thank you in advance :slight_smile:

7

I would keep the modal light and focused on good ui.

Data lifting etc in a service. Service Called from parent makes the modal cleaner, testable and reuseable

8

I think so, thank you for sharing your opinion :blush:

But imagine this scenario: a modal where you have 2 buttons: ADD & CLOSE and ADD & CONTINUE.
ADD & CLOSE : Fill the form, push the button, return data to paren in the onWillDismiss(), and call to the service.
ADD & CONTINUE : Same but opening again the modal for adding a new item. Which is in your opinion the bes way? Adding items one by one and retrieving to the paren in an array or calling to service from modal for having direct feedback and not requiring the user to fill data many times for sudenly fail.

9

Hi

add and new, in a strict sense, would mean returning an array of items to the caller to be handled after the user completed all his stuff (adding and adding and adding). So the modal’s role is to change/add a serie of items, not just one.

Tom