CODEWITHSUNDEEP
angularionic2ionic3
javapatriot
javapatriot

Reputation: 353

Ion Refresher not updating page contents from API

I have this piece of code that is supposed to display previously sent notifications. An updated list of notifications is supposed to appear every time a user goes to the page, they also should be able to update the content on dorefresh (pulldown).

    import { Component } from '@angular/core';
    import { ToastController, Refresher } from 'ionic-angular';
    import { OneSignalData } from '../../providers/onesignal-data';
    import { NavController, NavParams } from 'ionic-angular';

    @Component({
      selector: 'page-notifications',
      templateUrl: 'notifications.html',
    })
    export class NotificationsPage {

      notifications: any = [];

      constructor(
        public navCtrl: NavController, 
        public navParams: NavParams,
        public onesignalData: OneSignalData,
        public toastCtrl: ToastController,
      ) {}

      ionViewDidLoad() {
        console.log('ionViewDidLoad NotificationsPage');
        this.updateNotifications();
      }

      updateNotifications(){
        this.onesignalData.getNotifications().subscribe((notifications) => {
          this.notifications = notifications;
          console.log(notifications)
        });    
      }

      doRefresh(refresher: Refresher) {
        this.onesignalData.getNotifications().subscribe((notifications) => {
          this.notifications = notifications;
          console.log(notifications)    
          setTimeout(() => {
            //this.updateNotifications();
            refresher.complete();

            const toast = this.toastCtrl.create({
              message: 'Push Notifications have been updated.',
              duration: 3000
            });
            toast.present();
          }, 1000);
        });  
      }  
    }

Which is supposed to grab data from another file that looks like this:

            import { Injectable } from '@angular/core';
            import { HttpClient } from '@angular/common/http';
            import { Observable } from 'rxjs/Observable';
            import 'rxjs/add/operator/map';
            import 'rxjs/add/observable/of';

            @Injectable()
            export class OneSignalData {
                data: any;

                constructor(
                    private http: HttpClient
                ) {}

                load(): any {
                    if (this.data) {
                        return Observable.of(this.data);
                    } else {
                        return this.http.get('https://onesignal.com/api/v1/notifications?app_id=XXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXX&limit=50',
                        { headers: { 'Authorization': 'Basic XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX' }},
                            );
                    }
                }    

                getNotifications() {
                    return this.load().map((data: any) => {
                        return data.notifications;
                    });
                }

            }

As you see I am running the service (below) again in the refresher function, but however the new data is not updated… unless I completely refresh the web page in order to load the new

this.onesignalData.getNotifications().subscribe((notifications) => {
this.notifications = notifications;

Initially I thought it was an issue with Observable serving old data before requesting new data but when I removed Observable from the equation I still had the same problem. Can you see what I'm missing?

Upvotes: 1

Views: 506

Answers (2)

Aarsh
Aarsh

Reputation: 2595

1)) You can use put your refresher function in ngOnChanges(), so whenever your data is changed at that time ngOnChanges will be called.

2)) You can do one thing that binds your HTML using ** two-way binding [(ngModel)]** so whenever your data is changed it automatically update in the view. Like ex --> whenever this.notification data is changed then it will reflect in your view.

I personally prefer the first method because it is more convincing and easy.

Ex of ngOnChanges() --> As per I used in my project 

ngOnChanges(changes: any) {
        if (changes.dataSourceId != null && changes.dataSourceId.currentValue != null) {
            if (changes.pageId != null && changes.pageId.currentValue != null) {
                this.GetDataSource();
            }
           }

Upvotes: 0

javapatriot
javapatriot

Reputation: 353

I still wasn't able to figure out why the data was being stored in disk cache but I was able to get around it by creating a random string and attach it with GET request URL:

load(): any {
    let timeStamp = +new Date();
    return this.http.get('https://onesignal.com/api/v1/notifications?app_id=XXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXX&limit=50?tsp=' + timeStamp,
    { headers: { 'Authorization': 'Basic XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX' }},
        );
}

Upvotes: 1

Related Questions