add validation to the input + more

.github/workflows/firebase-hosting-merge.yml

@@ -11,7 +11,7 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v4
-      - run: npm run build
+      - run: npm install && npm run build
       - uses: FirebaseExtended/action-hosting-deploy@v0
         with:
           repoToken: ${{ secrets.GITHUB_TOKEN }}

src/app/display-recipe/display-recipe.component.ts

@@ -9,20 +9,15 @@ import { RecipeGetterService } from '../recipe-getter.service';
   templateUrl: './display-recipe.component.html',
   styleUrl: './display-recipe.component.scss'
 })
-export class DisplayRecipeComponent {
+export class DisplayRecipeComponent implements OnInit{
   data: any
 
   constructor(private recipeService: RecipeGetterService){}
 
   ngOnInit(): void {
-    this.recipeService.data$.subscribe(response => {
-      if (this.data != null){
-        this.data = response.body;
-      }
-      else{
-        this.data = ''
-      }
-    });
+    this.recipeService.data$.subscribe(
+      resp => this.data = resp?.body
+    )
   }
 
 }

src/app/recipe-getter.service.ts

@@ -1,6 +1,6 @@
 import { Injectable } from '@angular/core';
-import { HttpClient, HttpParams } from '@angular/common/http';
-import { Observable, BehaviorSubject } from 'rxjs';
+import { HttpClient, HttpErrorResponse, HttpParams } from '@angular/common/http';
+import { Observable, BehaviorSubject, throwError, catchError } from 'rxjs';
 
 
 @Injectable({
@@ -12,16 +12,35 @@ export class RecipeGetterService {
   private dataSubject = new BehaviorSubject<any>(null);
   data$ = this.dataSubject.asObservable();
 
+  errorMessage : string = "<div>Error processing request. Please check your url.<div>"
+
   constructor(private http: HttpClient) {}
 
 
   getContent(url:string): void   {
     const apiCallUrl = `${this.backendUrl}/getShortRecipe`;
     console.log(apiCallUrl)
     let params = new HttpParams().set('url', url);
-    const response = this.http.get(apiCallUrl, {params: params}).subscribe(response => {
-      this.dataSubject.next(response);
+    const response = this.http.get(apiCallUrl, {params: params}).subscribe({
+      next: (data) => {
+        this.dataSubject.next(data)
+      },
+      error: (error) => {
+        this.handleSpecificError(error)
+      }
     });
   }
 
+  private handleSpecificError(error: HttpErrorResponse): void {
+    // Specific error handling
+    if (error.status === 404) {
+      console.error('Not Found:', error.message);
+    } else if (error.status === 500) {
+      console.error('Server Error:', error.message);
+    } else {
+      console.error('Unknown Error:', error.message);
+    }
+    this.dataSubject.next({'body':this.errorMessage})
+  }
+
 }

src/app/url-input/url-input.component.html

@@ -1,5 +1,11 @@
-<div class="input-bar">
-<input id="framework" type="text" [(ngModel)]="url" />
-<button (click)="getRecipe()" class = "icon">Get Recipe</button>
-</div>
-<br>
+
+<form [formGroup]="urlForm" (ngSubmit)="getRecipe()" class="input-bar">
+    <label for="url">Recipe URL:</label>
+    <input id="website" formControlName="url" type="text">
+    <button type="submit" [disabled]="urlForm.invalid" class="icon">Get Recipe</button>
+    <div *ngIf="urlForm.get('url')?.invalid && urlForm.get('url')?.touched">
+        <small *ngIf="urlForm.get('url')?.hasError('required')" class="error-message">URL is required.</small>
+        <small *ngIf="urlForm.get('url')?.hasError('pattern')" class="error-message">Invalid URL format.</small>
+    </div>
+  </form>
+

src/app/url-input/url-input.component.scss

@@ -1,3 +1,6 @@
+.error-message {
+  position: absolute
+}
 .input-bar {
     width: 100%;
     max-width: 700px;
@@ -23,13 +26,16 @@
       position: absolute;
       top: 50%;
       right: 0px;
-      transform: translateY(-50%);
       text-emphasis-color: black;
-      color: #d23636;
+      color: rgba(3, 145, 25, 0.572);
       transition: color 0.3s;
 
       input:focus + & {
         color: #007bff;
       }
     }
+    .icon:disabled {
+      color: #d23636;
+    }
+
   }

src/app/url-input/url-input.component.ts

@@ -1,25 +1,34 @@
 import { Component } from '@angular/core';
-import {FormsModule} from '@angular/forms';
+import { CommonModule } from '@angular/common';
+
+import {FormBuilder, FormGroup, Validators, ReactiveFormsModule} from '@angular/forms';
 import { RecipeGetterService } from '../recipe-getter.service';
 @Component({
   selector: 'app-url-input',
   standalone: true,
-  imports: [FormsModule],
+  imports: [ReactiveFormsModule, CommonModule],
   templateUrl: './url-input.component.html',
   styleUrl: './url-input.component.scss'
 })
 export class UrlInputComponent {
 
-  url: string = '';
-
+  urlForm: FormGroup;
+  
   constructor(
     private recipeService: RecipeGetterService,
-  ) {}
+    private fb: FormBuilder
+  ) {
+    let pattern = '^(https?:\\/\\/)?([\\da-z.-]+)\\.([a-z.]{2,6})([\\/\\w .-]*)*\\/?$'
+    this.urlForm = this.fb.group({
+      url: ['', [Validators.required, Validators.pattern(pattern)]]
+    });
+  }
 
   getRecipe(){
-    this.recipeService.getContent(this.url)
+    let url: string = this.urlForm.get('url')?.value
+    if(url != null){
+      this.recipeService.getContent(url)
+    }
+
   }
-
-
-
 }