From d38c80f7925d56fd8521a66183833f0a4d9d886b Mon Sep 17 00:00:00 2001 From: Esther White Date: Thu, 28 Nov 2024 19:15:42 +0200 Subject: [PATCH] minor inconsistencies and improvements --- .../components/header/header.component.scss | 1 - src/app/components/header/header.component.ts | 7 +- .../post-details/post-details.component.ts | 5 +- .../settings-dialog.component.ts | 153 +++++++++--------- src/app/services/blog.service.ts | 2 +- src/styles.scss | 2 +- 6 files changed, 86 insertions(+), 84 deletions(-) diff --git a/src/app/components/header/header.component.scss b/src/app/components/header/header.component.scss index 424745f..78c7617 100644 --- a/src/app/components/header/header.component.scss +++ b/src/app/components/header/header.component.scss @@ -72,7 +72,6 @@ p-toolbar { a { font-size: 1.1rem; - ; text-transform: uppercase; } } diff --git a/src/app/components/header/header.component.ts b/src/app/components/header/header.component.ts index 22c1e90..58981f1 100644 --- a/src/app/components/header/header.component.ts +++ b/src/app/components/header/header.component.ts @@ -2,8 +2,8 @@ import { Component, inject, OnDestroy, OnInit } from "@angular/core"; import { FormsModule } from "@angular/forms"; import { ThemeService } from "../../services/theme.service"; import { BlogService } from "../../services/blog.service"; -import { AsyncPipe, KeyValuePipe } from "@angular/common"; -import { ActivatedRoute, NavigationEnd, Router, RouterLink } from "@angular/router"; +import { KeyValuePipe } from "@angular/common"; +import { ActivatedRoute, Router, RouterLink } from "@angular/router"; import { BlogInfo, BlogLinks } from "../../models/blog-info"; import { SeriesList } from "../../models/post"; import { SearchDialogComponent } from "../../partials/search-dialog/search-dialog.component"; @@ -20,7 +20,6 @@ import { FollowDialogComponent } from "../../partials/follow-dialog/follow-dialo selector: "app-header", standalone: true, imports: [ - AsyncPipe, SearchDialogComponent, SettingsDialogComponent, FollowDialogComponent, @@ -46,8 +45,6 @@ export class HeaderComponent implements OnInit, OnDestroy { selectedTheme: string = "dark"; seriesList!: SeriesList[]; visible: boolean = false; - private route = inject(ActivatedRoute); - private router = inject(Router); themeService: ThemeService = inject(ThemeService); blogService: BlogService = inject(BlogService); diff --git a/src/app/components/post-details/post-details.component.ts b/src/app/components/post-details/post-details.component.ts index 03ca9bd..1f7a053 100644 --- a/src/app/components/post-details/post-details.component.ts +++ b/src/app/components/post-details/post-details.component.ts @@ -1,6 +1,6 @@ import { Component, inject, Input, OnDestroy, OnInit } from "@angular/core"; import { BlogService } from "../../services/blog.service"; -import { AsyncPipe, DatePipe } from "@angular/common"; +import { AsyncPipe, DatePipe, ViewportScroller } from "@angular/common"; import { Post, SeriesList } from "../../models/post"; import { Observable, Subscription } from "rxjs"; import { RouterLink } from "@angular/router"; @@ -12,7 +12,6 @@ import { FooterComponent } from "../footer/footer.component"; import { ThemeService } from "../../services/theme.service"; import { SanitizerHtmlPipe } from "../../pipes/sanitizer-html.pipe"; import { YoutubeVideoEmbedDirective } from "../../directives/youtube-video-embed.directive"; -import { ViewportScroller } from "@angular/common"; import { TagModule } from "primeng/tag"; import { ToolbarModule } from "primeng/toolbar"; @@ -73,7 +72,7 @@ export class PostDetailsComponent implements OnInit, OnDestroy { this.blogName = this.blogInfo.title; const { __typename, ...links } = data.links; this.blogSocialLinks = links; - this.isTeam = this.blogInfo.isTeam ? true : false; + this.isTeam = this.blogInfo.isTeam ?? false; }); this.post$ = this.blogService.getSinglePost(this.blogURL, this.postSlug); this.querySubscription = this.blogService diff --git a/src/app/partials/settings-dialog/settings-dialog.component.ts b/src/app/partials/settings-dialog/settings-dialog.component.ts index c01f5ff..3eb457c 100644 --- a/src/app/partials/settings-dialog/settings-dialog.component.ts +++ b/src/app/partials/settings-dialog/settings-dialog.component.ts @@ -7,89 +7,96 @@ import { InputTextModule } from "primeng/inputtext"; import { ButtonModule } from "primeng/button"; @Component({ - selector: "app-settings-dialog", - standalone: true, - imports: [ - DialogModule, - InputTextModule, - ButtonModule, - FormsModule, - ReactiveFormsModule, - ], - templateUrl: "./settings-dialog.component.html", - styleUrl: "./settings-dialog.component.scss", + selector: "app-settings-dialog", + standalone: true, + imports: [ + DialogModule, + InputTextModule, + ButtonModule, + FormsModule, + ReactiveFormsModule, + ], + templateUrl: "./settings-dialog.component.html", + styleUrl: "./settings-dialog.component.scss", }) export class SettingsDialogComponent implements OnInit { - visible = false; - blogURL: string = "hashnode.anguhashblog.com"; + visible = false; + blogURL: string = "hashnode.anguhashblog.com"; newBlogInput: string = ""; - newBlogURL: string = ""; - blogURLChanged: boolean = false; - noBlogFound: boolean = false; - emptyInput: boolean = false; - invalidInput: boolean = false; - blogService: BlogService = inject(BlogService); + newBlogURL: string = ""; + blogURLChanged: boolean = false; + noBlogFound: boolean = false; + emptyInput: boolean = false; + invalidInput: boolean = false; + blogService: BlogService = inject(BlogService); - ngOnInit() { - this.blogURL = this.blogService.getBlogURL(); - if (this.blogURL === "hashnode.anguhashblog.com") { - this.blogURLChanged = false; - } else { - this.blogURLChanged = true; - } - } + ngOnInit() { + this.blogURL = this.blogService.getBlogURL(); + this.blogURLChanged = this.blogURL !== "hashnode.anguhashblog.com"; + } - changeBlogURL(): void { - this.noBlogFound = false; - if (this.newBlogInput === "") { - this.emptyInput = true; - return; - } else if ( this.newBlogInput !== "") { - this.emptyInput = false; + changeBlogURL(): void { + // Reset flags + this.noBlogFound = false; + this.emptyInput = false; + this.invalidInput = false; - if (this.newBlogInput.includes("https://") || this.newBlogInput.endsWith("/")) { - const cleanedBlogURL = this.newBlogInput.split("https://")[1]; - this.newBlogURL = cleanedBlogURL.split("/")[0]; + // Validate input + if (!this.newBlogInput.trim()) { + this.emptyInput = true; + return; + } - } else { - this.newBlogURL = this.newBlogInput; - } + // Clean and parse the blog URL + this.newBlogURL = this.cleanBlogURL(this.newBlogInput); - this.blogService.getBlogInfo(this.newBlogURL).subscribe((blogInfo) => { - if (blogInfo === null) { - this.noBlogFound = true; - this.blogURLChanged = false; - this.newBlogInput = ""; - } else { - this.blogService.setBlogURL(this.newBlogURL); - this.blogURL = this.blogService.getBlogURL(); - this.blogURLChanged = true; - this.visible = false; - window.location.reload(); - } - }); - } else if (this.blogURL === "hashnode.anguhashblog.com") { - this.blogURLChanged = false; - } else { - this.noBlogFound = true; - this.emptyInput = false; - this.blogURLChanged = false; + if (!this.newBlogURL) { this.invalidInput = true; - this.newBlogInput = ""; - } - } + return; + } + + // Check if it's the default URL case + if (this.newBlogURL === "hashnode.anguhashblog.com") { + this.blogURLChanged = false; + return; + } + + // Validate blog URL via the service + this.blogService.getBlogInfo(this.newBlogURL).subscribe((blogInfo) => { + if (blogInfo === null) { + // Blog not found + this.noBlogFound = true; + this.blogURLChanged = false; + this.newBlogInput = ""; + } else { + // Valid blog found + this.blogService.setBlogURL(this.newBlogURL); + this.blogURL = this.blogService.getBlogURL(); + this.blogURLChanged = true; + this.visible = false; + window.location.reload(); + } + }); + } + resetBlogURL(): void { + this.blogService.resetBlogURL(); + this.blogURL = this.blogService.getBlogURL(); + this.emptyInput = false; + this.blogURLChanged = false; + this.visible = false; + window.location.reload(); + } - resetBlogURL(): void { - this.blogService.resetBlogURL(); - this.blogURL = this.blogService.getBlogURL(); - this.emptyInput = false; - this.blogURLChanged = false; - this.visible = false; - window.location.reload(); - } + showDialog() { + this.visible = true; + } - showDialog() { - this.visible = true; - } + private cleanBlogURL(input: string): string { + // Strip "https://" and trailing slashes if present + if (input.includes("https://")) { + input = input.split("https://")[1]; + } + return input.endsWith("/") ? input.slice(0, -1) : input; + } } diff --git a/src/app/services/blog.service.ts b/src/app/services/blog.service.ts index ddb899e..75d323c 100644 --- a/src/app/services/blog.service.ts +++ b/src/app/services/blog.service.ts @@ -29,7 +29,7 @@ export class BlogService { getBlogURL(): string { if (isPlatformBrowser(this.platformId)) { return ( - localStorage.getItem(this.localStorageKey) || + localStorage.getItem(this.localStorageKey) ?? "hashnode.anguhashblog.com" ); } diff --git a/src/styles.scss b/src/styles.scss index c040ec2..97f95b8 100644 --- a/src/styles.scss +++ b/src/styles.scss @@ -85,7 +85,7 @@ article { .content { p { font-size: 1.1rem; - line-height: 1.5rem;; + line-height: 1.5rem; } pre { overflow-y: scroll;