feature(settings-dialog): input validations and error handeling

Author: esteecodes

angular-primeng-app/src/app/partials/settings-dialog/settings-dialog.component.html

@@ -4,10 +4,10 @@
 <p-dialog [(visible)]="visible" [style]="{width: '27vw'}">
   @if (blogURLChanged) {
     <div class="dialog-content">
-      <p>Blog URL changed and set in local storage</p>
-      <p>Reload the page to see your content loading</p>
-      <p>When resetting you may need to click on</p>
-      <p>the logo image to load the content again</p>
+      <p>Blog URL was changed</p>
+      <p>You are seeing blog posts</p>
+      <p>from the following blog:</p>
+      <h3>{{blogURL}}</h3>
       <div class="dialog-actions">
         <p-button label="Reset" (click)="resetBlogURL()" class="p-button-secondary"></p-button>
       </div>
@@ -18,15 +18,15 @@ <h3>Try with your Blog</h3>
       <p>try AnguHashBlog</p>
       <small>with another Hashnode blog </small>
       <span class="p-input-icon-right">
-        @if (newBlogURL) {
-          <i class="pi pi-times" (click)="newBlogURL=''"></i>
+        @if (newBlogInput) {
+          <i class="pi pi-times" (click)="newBlogInput=''"></i>
         }
-        <input type="text" pInputText placeholder="Type a Blog URL" [(ngModel)]="newBlogURL" />
+        <input type="text" pInputText placeholder="Type a Blog URL" [(ngModel)]="newBlogInput" />
      </span>
     </div>
     <div class="dialog-actions">
       <div class="dialog-actions">
-        <p-button label="Change" (click)="changeBlogURL(); newBlogURL=''" class="p-button-secondary"></p-button>
+        <p-button label="Change" (click)="changeBlogURL(); newBlogInput=''" class="p-button-secondary"></p-button>
       </div>
     </div>
     }

angular-primeng-app/src/app/partials/settings-dialog/settings-dialog.component.scss

@@ -15,7 +15,7 @@ p-dialog {
     }
 
     p-button {
-      margin: 0.5rem 0;
+      margin: 1.5rem 0;
     }
 
     p {
@@ -32,6 +32,5 @@ p-dialog {
       margin : 1rem 0;
     }
   }
-
 }
 

angular-primeng-app/src/app/partials/settings-dialog/settings-dialog.component.ts

@@ -22,8 +22,12 @@ import { ButtonModule } from "primeng/button";
 export class SettingsDialogComponent implements OnInit {
 	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);
 
 	ngOnInit() {
@@ -35,21 +39,55 @@ export class SettingsDialogComponent implements OnInit {
 		}
 	}
 
-  changeBlogURL(): void {
-    this.blogService.setBlogURL(this.newBlogURL);
-    this.blogURL = this.blogService.getBlogURL();
-    if (this.blogURL === "hashnode.anguhashblog.com") {
+	changeBlogURL(): void {
+		this.noBlogFound = false;
+		if (this.newBlogInput === "") {
+			this.emptyInput = true;
+			return;
+		} else if ( this.newBlogInput !== "") {
+      this.emptyInput = false;
+
+      if (this.newBlogInput.includes("https://") || this.newBlogInput.endsWith("/")) {
+        const cleanedBlogURL = this.newBlogInput.split("https://")[1];
+        this.newBlogURL = cleanedBlogURL.split("/")[0];
+
+      } else {
+        this.newBlogURL = 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.blogURLChanged = true;
-    }
-  }
-
-  resetBlogURL(): void {
-    this.blogService.resetBlogURL();
-    this.blogURL = this.blogService.getBlogURL();
-    this.blogURLChanged = false;
-  }
+			this.noBlogFound = true;
+			this.emptyInput = false;
+			this.blogURLChanged = false;
+      this.invalidInput = true;
+			this.newBlogInput = "";
+		}
+	}
+
+
+	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;