feat: refresh on pull for news module

src/app/modules/news/page/news-page.component.ts

@@ -13,6 +13,7 @@
  * this program. If not, see <https://www.gnu.org/licenses/>.
  */
 import {Component} from '@angular/core';
+import {IonRefresher} from '@ionic/angular';
 import {SCMessage} from '@openstapps/core';
 import {NewsProvider} from '../news.provider';
 /**
@@ -26,16 +27,38 @@ export class NewsPageComponent {
   /**
    * News (messages) to show
    */
-  news: SCMessage[];
+  news: SCMessage[] = [];
 
   constructor(private newsProvider: NewsProvider) {
   }
 
   /**
-   * Initialize the local variables on component initialization
+   * Fetch news from the backend
    */
-  async ngOnInit() {
+  async fetchNews() {
     /* tslint:disable:no-magic-numbers */
     this.news = await this.newsProvider.getList(30, true);
   }
+
+  /**
+   * Initialize the local variables on component initialization
+   */
+  ngOnInit() {
+    void this.fetchNews();
+  }
+
+  /**
+   * Updates the shown list
+   *
+   * @param refresher Refresher component that triggers the update
+   */
+  async refresh(refresher: IonRefresher) {
+    try {
+      await this.fetchNews();
+    } catch (e) {
+      this.news = [];
+    } finally {
+      await refresher.complete();
+    }
+  }
 }

src/app/modules/news/page/news-page.html

@@ -10,13 +10,18 @@
 </ion-header>
 
 <ion-content fullscreen>
+  <ion-refresher slot="fixed" (ionRefresh)="refresh($event.target)">
+    <ion-refresher-content pullingIcon="arrow-dropdown" pullingText="{{'data.REFRESH_ACTION' | translate}}"
+      refreshingText="{{'data.REFRESHING' | translate}}">
+    </ion-refresher-content>
+  </ion-refresher>
   <ion-grid>
-    <ion-row *ngIf="!news">
+    <ion-row *ngIf="news.length === 0">
       <ion-col size="12" size-md="6" *ngFor="let skeleton of [1, 2, 3, 4, 5]">
         <stapps-skeleton-news-item></stapps-skeleton-news-item>
       </ion-col>
     </ion-row>
-    <ion-row *ngIf="news">
+    <ion-row *ngIf="news.length > 0">
       <ion-col size="12" size-md="6" *ngFor="let item of news">
         <stapps-news-item [item]="item"></stapps-news-item>
       </ion-col>