I've been struggling with the code for an Ionic taxi app for a few weeks now. My main issue is that whenever the page loads, the subscription gets triggered multiple times along with other functions within it. The same problem occurs when any travel information is updated in Firebase.
Is there a way to load the travel and driver information just once so that the screen only monitors the other services?
Traveling.ts:
export class TravelingPage {
driver;
trip;
...
constructor(
public nav: NavController,
...
) {
...
if (this.navParams.get('tripId')) {
this.tripId = this.navParams.get('tripId')
}
else {
this.tripId = this.tripService.getId();
}
}
ionViewDidLoad() {
this.tripService.getTrip(this.tripId).take(1).subscribe(snapTrip => {
this.driverService.getDriver(snapTrip.driverId).take(1).subscribe(snapDriver => {
// load trip data
this.trip = snapTrip;
// load driver data
this.driver = snapDriver;
// watchTrip
this.watchTrip(this.trip.id);
// start map
this.loadMap();
// check if trip is already paid
if (!this.trip['paymentData'] && this.orderStatus == false) {
// pay Trip
this.tripService.doOrder(this.trip);
} else {
console.info('Paid already. Do nothing');
}
}
});
})
}
...
}
TripService.ts:
getTrip(id) {
return this.db.object('trips/' + id);
}