refactor: use latest ng flow control, rem unrequired fnctns

AndrewJBateman · Jan 3, 2024 · 93d23c7 · 93d23c7
1 parent 8deb298
commit 93d23c7
Show file tree

Hide file tree

Showing 7 changed files with 149 additions and 176 deletions.
diff --git a/src/app/pages/categories/categories.page.ts b/src/app/pages/categories/categories.page.ts
@@ -1,6 +1,6 @@
 import { Component, OnInit } from "@angular/core";
 import { Router } from "@angular/router";
-import {Observable} from "rxjs";
+import { Observable } from "rxjs";
 
 import { Article, NewsApiResponse } from "src/app/interfaces/interfaces";
 import { NewsApiService } from "src/app/providers/news-api.service";

diff --git a/src/app/pages/favourites/favourites.page.html b/src/app/pages/favourites/favourites.page.html
@@ -19,27 +19,15 @@
 <ion-content>
 	<ion-grid class="ion-no-padding">
 		<ion-row>
-			<ion-col
-				size="12"
-				size-sm="8"
-				size-ms="8"
-				size-xl="6"
-				offset-sm="2"
-				class="ion-no-padding"
-			>
-				<app-page-refresh
-					slot="fixed"
-					(ionRefresh)="onRefresh($event)"
-				></app-page-refresh>
-				<app-progress-bar
-					*ngIf="storageService.news === undefined"
-				></app-progress-bar>
+			<ion-col size="12" size-sm="8" size-ms="8" size-xl="6" offset-sm="2" class="ion-no-padding">
+				<app-page-refresh slot="fixed" (ionRefresh)="networkService.refreshPage($event)" />
+				@if (storageService.news === undefined) {
+				<app-progress-bar />
+				}
 
 				<!--ion-card displays if no favourites-->
-				<ion-card
-					class="no-favourites-card"
-					*ngIf="storageService.news.length === 0"
-				>
+				@if (storageService.news.length === 0) {
+				<ion-card class="no-favourites-card">
 					<div>
 						<app-news-svg class="card-svg"></app-news-svg>
 					</div>
@@ -50,34 +38,28 @@ <h2 class="ion-text-center">
 						</h2>
 					</ion-card-content>
 				</ion-card>
+				}
 
 				<!--list of news articles with rhs slide to delete from favourites-->
-				<div
-					*ngIf="storageService.news.length > 0"
-					class="articles"
-					color="secondary"
-				>
-					<ion-list>
-						<ion-item-sliding
-							*ngFor="let article of storageService.news"
-							style="padding: 0"
-							(click)="onGoToNewsDetail(article)"
-							router-direction="forward"
-							#slidingItem
-						>
-							<app-article-list [article]="article"></app-article-list>
-							<ion-item-options>
-								<ion-item-option
-									color="danger"
-									(click)="onRemoveFavourite(article, slidingItem)"
-								>
-									<ion-icon name="heart-dislike" slot="icon-only"></ion-icon>
-								</ion-item-option>
-							</ion-item-options>
-						</ion-item-sliding>
-					</ion-list>
-				</div>
+				@if (storageService.news.length > 0) {
+					<div class="articles" color="secondary">
+						<ion-list>
+							@for (article of storageService.news; track trackByPublishedDate) {
+								<ion-item-sliding style="padding: 0"
+								(click)="newsService.getNewsDetail(article)" router-direction="forward" #slidingItem>
+								<app-article-list [article]="article"></app-article-list>
+								<ion-item-options>
+									<ion-item-option color="danger" (click)="onRemoveFavourite(article, slidingItem)">
+										<ion-icon name="heart-dislike" slot="icon-only"></ion-icon>
+									</ion-item-option>
+								</ion-item-options>
+							</ion-item-sliding>
+							}
+
+						</ion-list>
+					</div>
+				}
 			</ion-col>
 		</ion-row>
 	</ion-grid>
-</ion-content>
+</ion-content>
diff --git a/src/app/pages/favourites/favourites.page.ts b/src/app/pages/favourites/favourites.page.ts
@@ -1,5 +1,5 @@
 import { IonItemSliding, LoadingController } from "@ionic/angular";
-import { Component, OnInit } from "@angular/core";
+import { Component } from "@angular/core";
 
 import { PopoverController } from "@ionic/angular";
 import { PopoverPage } from "./favourites-popover/favourites-popover";
@@ -14,20 +14,26 @@ import { NetworkService } from "./../../providers/network.service";
   templateUrl: "./favourites.page.html",
   styleUrls: ["./favourites.page.scss"],
 })
-export class FavouritesPage implements OnInit {
+export class FavouritesPage {
   sliderOptions = {
     allowSlidePrev: false,
     allowSlideNext: false,
   };
 
+  private loadingElement: any;
+
   constructor(
-    private newsService: NewsApiService,
+    public newsService: NewsApiService,
     public storageService: StorageService,
-    private networkService: NetworkService,
+    public networkService: NetworkService,
     private loadingCtrl: LoadingController,
     public popoverCtrl: PopoverController
   ) {}
 
+  /**
+   * Presents the popover component.
+   * @param event The event that triggered the popover.
+   */
   async presentPopover(event) {
     const popover = await this.popoverCtrl.create({
       component: PopoverPage,
@@ -36,30 +42,24 @@ export class FavouritesPage implements OnInit {
     await popover.present();
   }
 
-  ngOnInit() {}
-
-  // get news detail via news API service
-  onGoToNewsDetail(article: Article) {
-    this.newsService.getNewsDetail(article);
-  }
-
-  // refresh page via network service
-  onRefresh(event: any) {
-    this.networkService.refreshPage(event);
-  }
-
+  /**
+   * Removes the favourite article and closes the sliding item.
+   * @param article The article to be removed.
+   * @param slidingItem The sliding item to be closed.
+   */
   onRemoveFavourite(article: Article, slidingItem: IonItemSliding) {
     slidingItem.close();
-    this.loadingCtrl
-      .create({
+    if (!this.loadingElement) {
+      this.loadingElement = this.loadingCtrl.create({
         message: "Deleting...",
-      })
-      .then((loadingEl) => {
-        loadingEl.present();
-        this.storageService.removeFromFavourites(article);
-        loadingEl.dismiss();
       });
+    }
+    this.loadingElement.present();
+    this.storageService.removeFromFavourites(article);
+    this.loadingElement.dismiss();
   }
 
-  onClearAll() {}
+  public trackByPublishedDate(index: number, article: Article): string {
+    return article ? article.publishedAt : null;
+  }
 }
diff --git a/src/app/pages/news-detail/news-detail.page.ts b/src/app/pages/news-detail/news-detail.page.ts
@@ -3,7 +3,6 @@ import { Router } from "@angular/router";
 import {
 	AlertController,
 	LoadingController,
-	ModalController,
 	ToastController,
 } from "@ionic/angular";
 
@@ -23,7 +22,6 @@ export class NewsDetailPage implements OnInit {
 		public newsService: NewsApiService,
 		public alertCtrl: AlertController,
 		public loadingCtrl: LoadingController,
-		public modalCtrl: ModalController,
 		public toastCtrl: ToastController,
 		public storageService: StorageService,
     public router: Router
@@ -35,18 +33,10 @@ export class NewsDetailPage implements OnInit {
 
 	onAddToFavourites(article: Article) {
 		this.storageService.addToFavourites(article);
-		console.log(
-			"article isFavourite status has changed to: ",
-			this.isFavourite(article)
-		);
 	}
 
 	onRemoveFromFavourites(article: Article) {
 		this.storageService.removeFromFavourites(article);
-		console.log(
-			"article isFavourite status has changed to: ",
-			this.isFavourite(article)
-		);
 	}
 
 	isFavourite(article: Article) {

diff --git a/src/app/pages/news/news.page.html b/src/app/pages/news/news.page.html
@@ -12,34 +12,47 @@
 			<!--drop-down list of sources, select one to change the news source and reload list of news-->
 			<ion-select interface="action-sheet" label="Source" placeholder="Select" name="selected"
 				(ionChange)="loadSourceData()" class="source-label" cancelText="{{ 'NEWS.cancel' | translate }}">
-				<ion-select-option *ngFor="let item of storedSources" value="{{item.id}}">
+				@for (item of storedSources; track trackById) {
+				<ion-select-option value="{{item.id}}">
 					{{ item.name }}
 				</ion-select-option>
-			</ion-select> </ion-item><!--end of drop-down menu-->
+				}
+			</ion-select>
+		</ion-item>
 	</ion-toolbar>
 </ion-header>
 
 <ion-content>
 	<ion-grid class="ion-no-padding">
 		<ion-row>
 			<ion-col size="12" size-sm="8" size-ms="8" size-xl="6" offset-sm="2" class="ion-no-padding">
-				<app-page-refresh slot="fixed" (ionRefresh)="onRefresh($event)" />
-				<app-progress-bar *ngIf="data === undefined"></app-progress-bar>
+				<app-page-refresh slot="fixed" (ionRefresh)="networkService.refreshPage($event)" />
+				@if (newsData === undefined) {
+				<app-progress-bar />
+				}
 
 				<!--list of news articles where source is not chosen & once news is stored-->
-				<div class="wrapper" *ngIf="!sourceChosen && data">
-					<div class="container" *ngFor="let article of data; trackBy: trackByPublishedDate" style="padding: 0"
-						(click)="onGoToNewsDetail(article)" router-direction="forward">
+				@if (!sourceChosen && newsData) {
+				<div class="wrapper">
+					@for (article of newsData; track trackByPublishedDate) {
+					<div class="container" class="news-article-list" (click)="newsService.getNewsDetail(article)"
+						router-direction="forward">
 						<app-article-list [article]="article" />
 					</div>
+					}
 				</div>
+				}
 
 				<!--list of news articles where source is chosen-->
-				<div class="wrapper" *ngIf="sourceChosen">
-					<div *ngFor="let article of data" style="padding: 0" (click)="onGoToNewsDetail(article)">
+				@if (sourceChosen) {
+				<div class="wrapper">
+					@for (article of newsData; track trackByPublishedDate) {
+					<div class="news-article-list" (click)="newsService.getNewsDetail(article)">
 						<app-article-list [article]="article" />
 					</div>
+					}
 				</div>
+				}
 			</ion-col>
 		</ion-row>
 	</ion-grid>

diff --git a/src/app/pages/news/news.page.ts b/src/app/pages/news/news.page.ts
@@ -1,7 +1,6 @@
 import { Component, OnInit } from "@angular/core";
 import {
   LoadingController,
-  ModalController,
   ToastController,
   Platform,
 } from "@ionic/angular";
@@ -23,7 +22,7 @@ import { NetworkService } from "../../providers/network.service";
   styleUrls: ["./news.page.scss"],
 })
 export class NewsPage implements OnInit {
-  data: any;
+  newsData: Article[];
   sources = [];
   defaultSource = "CNN";
   defaultCountry = "us";
@@ -38,10 +37,9 @@ export class NewsPage implements OnInit {
   constructor(
     private toastController: ToastController,
     private platform: Platform,
-    private newsService: NewsApiService,
+    public newsService: NewsApiService,
     private storageService: StorageService,
-    private networkService: NetworkService,
-    public modalCtrl: ModalController,
+    public networkService: NetworkService,
     public loadingCtrl: LoadingController,
     public alertCtrl: AlertController
   ) {}
@@ -76,10 +74,10 @@ export class NewsPage implements OnInit {
         .getNews("top-headlines?country=" + this.defaultCountry)
         .subscribe({
           next: (data: NewsApiResponse) => {
-            this.data = data.articles;
+            this.newsData = data.articles;
           },
           error: (error) => {
-            console.log("an error occured: ", error);
+            throw new Error(error);
           },
         });
     });
@@ -92,10 +90,10 @@ export class NewsPage implements OnInit {
       .subscribe({
         next: (data: NewsApiResponse) => {
           this.sourceChosen = true;
-          this.data = data.articles;
+          this.newsData = data.articles;
         },
         error: (error) => {
-          console.log("An error occured, error: ", error);
+          throw new Error(error);
         },
       });
   }
@@ -104,14 +102,8 @@ export class NewsPage implements OnInit {
     return article ? article.publishedAt : null;
   }
 
-  // refresh page via network service
-  onRefresh(event: any) {
-    this.networkService.refreshPage(event);
-  }
-
-  // fetch news detail via news API service
-  onGoToNewsDetail(article: Article) {
-    this.newsService.getNewsDetail(article);
+  public trackById(index: number, storedSources: any): string {
+    return storedSources ? storedSources.name : null;
   }
 
   // show pop-up message using this function with 'message' input