From 0a4877a0121ea39b272932f842b6c0e81d51899a Mon Sep 17 00:00:00 2001 From: posthello-code Date: Thu, 15 Aug 2024 23:21:20 -0700 Subject: [PATCH 1/4] remove unused window resized stuff --- src/app/app.component.ts | 15 +++++---------- 1 file changed, 5 insertions(+), 10 deletions(-) diff --git a/src/app/app.component.ts b/src/app/app.component.ts index b7519a7..4d3d157 100644 --- a/src/app/app.component.ts +++ b/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; } } From 06e96a62ef244d9feeba2e7fd9b02aa8daced8b6 Mon Sep 17 00:00:00 2001 From: posthello-code Date: Thu, 15 Aug 2024 23:22:56 -0700 Subject: [PATCH 2/4] use httpclient instead of axios --- src/app/models/comments.ts | 7 +++ src/app/models/stories.ts | 9 +++ src/app/slacker-news-api.service.ts | 10 ++-- .../timeline-viewer.component.html | 5 +- .../timeline-viewer.component.ts | 56 +++++-------------- 5 files changed, 40 insertions(+), 47 deletions(-) create mode 100644 src/app/models/comments.ts create mode 100644 src/app/models/stories.ts diff --git a/src/app/models/comments.ts b/src/app/models/comments.ts new file mode 100644 index 0000000..80709ef --- /dev/null +++ b/src/app/models/comments.ts @@ -0,0 +1,7 @@ +export interface Comment { + summary?: string; + id?: string; + sourceId?: string; + createdDate?: string; + externalId?: number; +} diff --git a/src/app/models/stories.ts b/src/app/models/stories.ts new file mode 100644 index 0000000..1253993 --- /dev/null +++ b/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; +} diff --git a/src/app/slacker-news-api.service.ts b/src/app/slacker-news-api.service.ts index e891536..2724efe 100644 --- a/src/app/slacker-news-api.service.ts +++ b/src/app/slacker-news-api.service.ts @@ -1,5 +1,7 @@ +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"; @@ -7,11 +9,11 @@ const url = "https://slacker-news-server.onrender.com"; providedIn: "root", }) export class SlackerNewsApiService { - constructor() {} + constructor(private http: HttpClient) {} getStories() { - return axios.get(url + "/stories"); + return this.http.get(url + "/stories"); } getComments() { - return axios.get(url + "/comments"); + return this.http.get(url + "/comments"); } } diff --git a/src/app/timeline-viewer/timeline-viewer.component.html b/src/app/timeline-viewer/timeline-viewer.component.html index e3f5497..6205d6c 100644 --- a/src/app/timeline-viewer/timeline-viewer.component.html +++ b/src/app/timeline-viewer/timeline-viewer.component.html @@ -106,6 +106,7 @@ -
Thanks for visiting, take a deep breath and try again in a moment.
- + +
Loading
+ diff --git a/src/app/timeline-viewer/timeline-viewer.component.ts b/src/app/timeline-viewer/timeline-viewer.component.ts index aa0226c..174b63c 100644 --- a/src/app/timeline-viewer/timeline-viewer.component.ts +++ b/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); - }); + }, + }); } } From 98586f7e9cd0b4d1098ae32d76f12de161b9e577 Mon Sep 17 00:00:00 2001 From: posthello-code Date: Thu, 15 Aug 2024 23:58:29 -0700 Subject: [PATCH 3/4] remove window size service --- src/app/window-size.service.spec.ts | 16 ---------------- src/app/window-size.service.ts | 18 ------------------ 2 files changed, 34 deletions(-) delete mode 100644 src/app/window-size.service.spec.ts delete mode 100644 src/app/window-size.service.ts diff --git a/src/app/window-size.service.spec.ts b/src/app/window-size.service.spec.ts deleted file mode 100644 index 0d7a915..0000000 --- a/src/app/window-size.service.spec.ts +++ /dev/null @@ -1,16 +0,0 @@ -import { TestBed } from "@angular/core/testing"; - -import { WindowSizeService } from "./window-size.service"; - -describe("WindowSizeService", () => { - let service: WindowSizeService; - - beforeEach(() => { - TestBed.configureTestingModule({}); - service = TestBed.inject(WindowSizeService); - }); - - it("should be created", () => { - expect(service).toBeTruthy(); - }); -}); diff --git a/src/app/window-size.service.ts b/src/app/window-size.service.ts deleted file mode 100644 index 466573c..0000000 --- a/src/app/window-size.service.ts +++ /dev/null @@ -1,18 +0,0 @@ -import { Injectable } from "@angular/core"; -import { fromEvent, Observable } from "rxjs"; -import { debounceTime } from "rxjs/operators"; - -@Injectable({ - providedIn: "root", -}) -export class WindowSizeService { - private resizeObservable: Observable; - - constructor() { - this.resizeObservable = fromEvent(window, "resize").pipe(debounceTime(200)); - } - - get onResize$() { - return this.resizeObservable; - } -} From ca4c411f0e850d112471e7042c63680549298b35 Mon Sep 17 00:00:00 2001 From: posthello-code Date: Fri, 16 Aug 2024 00:06:55 -0700 Subject: [PATCH 4/4] fix tests --- src/app/app.component.spec.ts | 2 ++ src/app/slacker-news-api.service.spec.ts | 3 ++- src/app/timeline-viewer/timeline-viewer.component.spec.ts | 2 ++ 3 files changed, 6 insertions(+), 1 deletion(-) diff --git a/src/app/app.component.spec.ts b/src/app/app.component.spec.ts index d7856d6..c525f73 100644 --- a/src/app/app.component.spec.ts +++ b/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(); }); diff --git a/src/app/slacker-news-api.service.spec.ts b/src/app/slacker-news-api.service.spec.ts index 60a3e0e..297b103 100644 --- a/src/app/slacker-news-api.service.spec.ts +++ b/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); }); diff --git a/src/app/timeline-viewer/timeline-viewer.component.spec.ts b/src/app/timeline-viewer/timeline-viewer.component.spec.ts index 2536278..4513e45 100644 --- a/src/app/timeline-viewer/timeline-viewer.component.spec.ts +++ b/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);