Merge pull request #19 from posthello-code/http-client

Http client

src/app/app.component.spec.ts

@@ -1,10 +1,12 @@
 import { TestBed } from "@angular/core/testing";
 import { AppComponent } from "./app.component";
+import { provideHttpClient } from "@angular/common/http";
 
 describe("AppComponent", () => {
   beforeEach(async () => {
     await TestBed.configureTestingModule({
       imports: [AppComponent],
+      providers: [provideHttpClient()],
     }).compileComponents();
   });
 

src/app/app.component.ts

@@ -1,11 +1,9 @@
-import { Component, HostListener, OnInit } from "@angular/core";
+import { Component, HostListener } from "@angular/core";
 import { RouterOutlet } from "@angular/router";
 import { SplitterModule } from "primeng/splitter";
 import { TimelineModule } from "primeng/timeline";
 import { TimelineViewerComponent } from "./timeline-viewer/timeline-viewer.component";
-import { CommonModule, NgIf, isPlatformBrowser } from "@angular/common";
-import { WindowSizeService } from "./window-size.service";
-import { Subscription } from "rxjs";
+import { CommonModule, NgIf } from "@angular/common";
 
 @Component({
   selector: "app-root",
@@ -22,18 +20,15 @@ import { Subscription } from "rxjs";
   styleUrl: "./app.component.scss",
 })
 export class AppComponent {
-  private sizeSubscription: Subscription;
   isSmallScreen = false;
   title = "slacker-news";
-  constructor(private windowSizeService: WindowSizeService) {
+  constructor() {
     this.isSmallScreen = window.innerWidth < 768;
-    this.sizeSubscription = this.windowSizeService.onResize$.subscribe(() => {
-      console.log("Window resized");
-    });
   }
 
   @HostListener("window:resize", ["$event"])
-  onResize(event: any) {
+  onResize() {
+    console.log("window resize");
     this.isSmallScreen = window.innerWidth < 768;
   }
 }

src/app/models/comments.ts

@@ -0,0 +1,7 @@
+export interface Comment {
+  summary?: string;
+  id?: string;
+  sourceId?: string;
+  createdDate?: string;
+  externalId?: number;
+}

src/app/models/stories.ts

@@ -0,0 +1,9 @@
+export interface Story {
+  id?: string;
+  title?: string;
+  summary?: string;
+  sourceUri?: string;
+  sourceId?: string;
+  createdDate?: string;
+  externalId?: number;
+}

src/app/slacker-news-api.service.spec.ts

@@ -1,12 +1,13 @@
 import { TestBed } from "@angular/core/testing";
 
 import { SlackerNewsApiService } from "./slacker-news-api.service";
+import { provideHttpClient } from "@angular/common/http";
 
 describe("SlackerNewsApiService", () => {
   let service: SlackerNewsApiService;
 
   beforeEach(() => {
-    TestBed.configureTestingModule({});
+    TestBed.configureTestingModule({ providers: [provideHttpClient()] });
     service = TestBed.inject(SlackerNewsApiService);
   });
 

src/app/slacker-news-api.service.ts

@@ -1,17 +1,19 @@
+import { HttpClient } from "@angular/common/http";
 import { Injectable } from "@angular/core";
-import axios from "axios";
+import { Story } from "./models/stories";
+import { Comment } from "./models/comments";
 
 const url = "https://slacker-news-server.onrender.com";
 
 @Injectable({
   providedIn: "root",
 })
 export class SlackerNewsApiService {
-  constructor() {}
+  constructor(private http: HttpClient) {}
   getStories() {
-    return axios.get(url + "/stories");
+    return this.http.get<Story[]>(url + "/stories");
   }
   getComments() {
-    return axios.get(url + "/comments");
+    return this.http.get<Comment[]>(url + "/comments");
   }
 }

src/app/timeline-viewer/timeline-viewer.component.html

@@ -106,6 +106,7 @@
   </p-scrollPanel>
 </div>
 <ng-template [style]="{ display: 'flex' }" #elseDataFallback>
-  <div>Thanks for visiting, take a deep breath and try again in a moment.</div>
-  <button (click)="reload()">Click here to reload</button>
+  <p-progressSpinner ariaLabel="loading"></p-progressSpinner>
+  <div>Loading</div>
+  <button (click)="reload()">Click here to try again</button>
 </ng-template>

src/app/timeline-viewer/timeline-viewer.component.spec.ts

@@ -1,6 +1,7 @@
 import { ComponentFixture, TestBed } from "@angular/core/testing";
 
 import { TimelineViewerComponent } from "./timeline-viewer.component";
+import { provideHttpClient } from "@angular/common/http";
 
 describe("TimelineViewerComponent", () => {
   let component: TimelineViewerComponent;
@@ -9,6 +10,7 @@ describe("TimelineViewerComponent", () => {
   beforeEach(async () => {
     await TestBed.configureTestingModule({
       imports: [TimelineViewerComponent],
+      providers: [provideHttpClient()],
     }).compileComponents();
 
     fixture = TestBed.createComponent(TimelineViewerComponent);

src/app/timeline-viewer/timeline-viewer.component.ts

@@ -2,27 +2,14 @@ import { Component } from "@angular/core";
 import { TimelineModule } from "primeng/timeline";
 import { CardModule } from "primeng/card";
 import { ScrollPanelModule } from "primeng/scrollpanel";
+import { ProgressSpinnerModule } from "primeng/progressspinner";
+
 import { SlackerNewsApiService } from "../slacker-news-api.service";
 import { ListboxModule } from "primeng/listbox";
 import { CommonModule, NgFor, NgIf } from "@angular/common";
-
-interface Story {
-  id?: string;
-  title?: string;
-  summary?: string;
-  sourceUri?: string;
-  sourceId?: string;
-  createdDate?: string;
-  externalId?: number;
-}
-
-interface Comment {
-  summary?: string;
-  id?: string;
-  sourceId?: string;
-  createdDate?: string;
-  externalId?: number;
-}
+import { forkJoin } from "rxjs";
+import { Story } from "../models/stories";
+import { Comment } from "../models/comments";
 
 @Component({
   selector: "app-timeline-viewer",
@@ -35,6 +22,7 @@ interface Comment {
     ListboxModule,
     NgFor,
     CommonModule,
+    ProgressSpinnerModule,
   ],
   templateUrl: "./timeline-viewer.component.html",
   styleUrl: "./timeline-viewer.component.scss",
@@ -61,29 +49,15 @@ export class TimelineViewerComponent {
   }
 
   loadData() {
-    this.slackerNewsApi
-      .getStories()
-      .then((data) => {
+    forkJoin({
+      stories: this.slackerNewsApi.getStories(),
+      comments: this.slackerNewsApi.getComments(),
+    }).subscribe({
+      next: (value) => {
+        this.comments = value.comments;
+        this.stories = value.stories;
         this.dataAvailable = true;
-
-        // Use the data here
-        this.stories = data.data;
-      })
-      .catch((e) => {
-        this.dataAvailable = false;
-        console.log(e);
-      });
-    this.slackerNewsApi
-      .getComments()
-      .then((data) => {
-        this.commentsAvailable = true;
-
-        // Use the data here
-        this.comments = data.data;
-      })
-      .catch((e) => {
-        this.commentsAvailable = false;
-        console.log(e);
-      });
+      },
+    });
   }
 }