feat: implement recipe search

- Add recipe-list and recipe-search components
- Replace home component with recipe-search
- Add searchRecipes method to recipe service
- Add SearchRecipes method to RecipeController

gh-16

Co-authored-by: Syed Zaidi <[email protected]>
Co-authored-by: Zubair Shibly <[email protected]>

client/src/app/app.module.ts

@@ -7,17 +7,19 @@ import { RouterModule } from '@angular/router';
 import { ApiAuthorizationModule } from 'src/api-authorization/api-authorization.module';
 import { AuthorizeInterceptor } from 'src/api-authorization/authorize.interceptor';
 import { AppComponent } from './app.component';
-import { FridgeComponent } from './fridge/fridge.component';
-import { HomeComponent } from './home/home.component';
+import { RecipeSearchComponent } from './recipe-search/recipe-search.component';
 import { NavMenuComponent } from './nav-menu/nav-menu.component';
 import { RecipeComponent } from './recipe/recipe.component';
+import { FridgeComponent } from './fridge/fridge.component';
+import { RecipeListComponent } from './recipe-list/recipe-list.component';
 
 @NgModule({
   declarations: [
     AppComponent,
     NavMenuComponent,
-    HomeComponent,
     FridgeComponent,
+    RecipeListComponent,
+    RecipeSearchComponent,
     RecipeComponent,
   ],
   imports: [
@@ -30,10 +32,10 @@ import { RecipeComponent } from './recipe/recipe.component';
     UpperCasePipe,
     ApiAuthorizationModule,
     RouterModule.forRoot([
-      { path: '', component: HomeComponent, pathMatch: 'full' },
+      { path: '', component: RecipeSearchComponent, pathMatch: 'full' },
       { path: 'fridge', component: FridgeComponent },
-      { path: 'recipe', component: RecipeComponent },
-    ]),
+      { path: 'recipe', component: RecipeComponent},
+    ])
   ],
   providers: [
     { provide: HTTP_INTERCEPTORS, useClass: AuthorizeInterceptor, multi: true },

client/src/app/nav-menu/nav-menu.component.html

@@ -3,7 +3,9 @@
     class="navbar navbar-expand-sm navbar-toggleable-sm navbar-light bg-white border-bottom box-shadow mb-3"
   >
     <div class="container">
-      <a class="navbar-brand" [routerLink]="['/']">server</a>
+      <a class="navbar-brand" [routerLink]="['/']" (click)="navigateAndReload()"
+        >PantryPal</a
+      >
       <button
         class="navbar-toggler"
         type="button"
@@ -20,13 +22,6 @@
         [ngClass]="{ show: isExpanded }"
       >
         <ul class="navbar-nav flex-grow">
-          <li
-            class="nav-item"
-            [routerLinkActive]="['link-active']"
-            [routerLinkActiveOptions]="{ exact: true }"
-          >
-            <a class="nav-link text-dark" [routerLink]="['/']">Home</a>
-          </li>
           <li class="nav-item" [routerLinkActive]="['link-active']">
             <a class="nav-link text-dark" [routerLink]="['/fridge']">Fridge</a>
           </li>

client/src/app/nav-menu/nav-menu.component.ts

@@ -1,18 +1,26 @@
 import { Component } from '@angular/core';
-
+import { Router } from '@angular/router';
 @Component({
   selector: 'app-nav-menu',
   templateUrl: './nav-menu.component.html',
-  styleUrls: ['./nav-menu.component.scss']
+  styleUrls: ['./nav-menu.component.scss'],
 })
 export class NavMenuComponent {
   isExpanded = false;
 
+  constructor(private router: Router) {}
+
   collapse() {
     this.isExpanded = false;
   }
 
   toggle() {
     this.isExpanded = !this.isExpanded;
   }
+
+  navigateAndReload() {
+    this.router.navigate(['/']).then(() => {
+      window.location.reload();
+    });
+  }
 }

client/src/app/recipe-list/recipe-list.component.html

@@ -0,0 +1,19 @@
+<ng-container *ngIf="recipeList.length != 0">
+  <ng-container *ngIf="recipeList.length == 1; else moreThanOne">
+    <h3>There is {{ recipeList.length }} recipe in the list.</h3>
+    <div *ngFor="let recipe of recipeList">
+      <a [routerLink]="['/recipe', recipe.id]">{{ recipe.name }}</a>
+    </div>
+  </ng-container>
+  <ng-template #moreThanOne>
+    <h3>
+      There are {{ recipeList.length }} recipes in the list that contain the term
+      '{{ searchedQuery }}'
+    </h3>
+    <div *ngFor="let recipe of recipeList">
+      <a>{{ recipe.name }}</a>
+    </div>
+  </ng-template>
+</ng-container>
+
+<!-- TODO (NilinReza): handle template  -->

client/src/app/recipe-list/recipe-list.component.scss

@@ -0,0 +1,23 @@
+.center-container {
+  display: flex;
+  align-items: center;
+  height: 10vh; /* This will take the full height of the viewport */
+}
+
+.form-control {
+  border-radius: 25px; /* Rounded edges */
+  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); /* Shadow effect */
+  padding-left: 35px; /* Make room for the search icon */
+  width: 50vw; /* Increase the width of the search bar to 70% of the viewport width */
+}
+.form-outline {
+  position: relative; /* Allow the search icon and filter button to be positioned relative to this element */
+  margin-top: 10px;
+  margin-bottom: 10px; /* Add space after the search bar */
+}
+.form-outline i {
+  position: absolute;
+  left: 10px;
+  top: 50%;
+  transform: translateY(-50%); /* Vertically center the search icon */
+}

client/src/app/recipe-list/recipe-list.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { RecipeListComponent } from './recipe-list.component';
+
+describe('RecipeListComponent', () => {
+  let component: RecipeListComponent;
+  let fixture: ComponentFixture<RecipeListComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [RecipeListComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(RecipeListComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

client/src/app/recipe-list/recipe-list.component.ts

@@ -0,0 +1,16 @@
+import { Component, Input } from '@angular/core';
+import { Recipe, RecipeService } from '@services';
+
+@Component({
+  selector: 'app-recipe-list',
+  templateUrl: './recipe-list.component.html',
+  styleUrls: ['./recipe-list.component.scss'],
+})
+export class RecipeListComponent {
+  @Input() public searchedQuery: string = '';
+  @Input() public recipeList: Recipe[] = [];
+
+  constructor(private recipeService: RecipeService) {}
+
+  //TODO : filter and sort has to be implemented
+}

client/src/app/recipe-search/recipe-search.component.html

@@ -0,0 +1,21 @@
+<h1>PantryPal</h1>
+<p>Use the search bar below to search for any recipe</p>
+
+<form (ngSubmit)="onSearch(inputText)">
+  <div class="form-outline">
+    <i class="fas fa-search"></i>
+    <input
+      type="text"
+      class="form-control"
+      name="inputText"
+      [(ngModel)]="inputText"
+      placeholder="Search Recipe.."
+    />
+  </div>
+  <button type="submit">Search</button>
+</form>
+
+<app-recipe-list
+  [recipeList]="recipeList"
+  [searchedQuery]="searchText"
+></app-recipe-list>

client/src/app/recipe-search/recipe-search.component.scss

@@ -0,0 +1,23 @@
+.center-container {
+  display: flex;
+  align-items: center;
+  height: 10vh; /* This will take the full height of the viewport */
+}
+
+.form-control {
+  border-radius: 25px; /* Rounded edges */
+  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); /* Shadow effect */
+  padding-left: 35px; /* Make room for the search icon */
+  width: 50vw; /* Increase the width of the search bar to 70% of the viewport width */
+}
+.form-outline {
+  position: relative; /* Allow the search icon and filter button to be positioned relative to this element */
+  margin-top: 10px;
+  margin-bottom: 10px; /* Add space after the search bar */
+}
+.form-outline i {
+  position: absolute;
+  left: 10px;
+  top: 50%;
+  transform: translateY(-50%); /* Vertically center the search icon */
+}

client/src/app/home/home.component.spec.ts → client/src/app/recipe-search/recipe-search.component.spec.ts

@@ -1,18 +1,16 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { HomeComponent } from './home.component';
+import { RecipeSearchComponent } from './recipe-search.component';
 
-describe('HomeComponent', () => {
-  let component: HomeComponent;
-  let fixture: ComponentFixture<HomeComponent>;
+describe('RecipeSearchComponent', () => {
+  let component: RecipeSearchComponent;
+  let fixture: ComponentFixture<RecipeSearchComponent>;
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      declarations: [HomeComponent],
+      imports: [RecipeSearchComponent],
     }).compileComponents();
-  });
 
-  beforeEach(() => {
-    fixture = TestBed.createComponent(HomeComponent);
+    fixture = TestBed.createComponent(RecipeSearchComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();
   });

client/src/app/recipe-search/recipe-search.component.ts

@@ -0,0 +1,22 @@
+import { Component } from '@angular/core';
+import { Recipe, RecipeService } from '@services';
+
+@Component({
+  selector: 'app-search',
+  templateUrl: './recipe-search.component.html',
+  styleUrls: ['./recipe-search.component.scss'],
+})
+export class RecipeSearchComponent {
+  public searchText = '';
+  public inputText = '';
+  public recipeList: Recipe[] = [];
+
+  constructor(private recipeService: RecipeService) {}
+
+  public onSearch(searchQuery: string) {
+    this.searchText = searchQuery;
+    this.recipeService
+      .searchRecipes(searchQuery)
+      .subscribe((recipeList: Recipe[]) => (this.recipeList = recipeList));
+  }
+}

client/src/index.html

@@ -2,7 +2,7 @@
 <html lang="en">
   <head>
     <meta charset="utf-8" />
-    <title>server</title>
+    <title>PantryPal</title>
     <base href="/" />
 
     <meta name="viewport" content="width=device-width, initial-scale=1" />

client/src/services/recipe/recipe.service.ts

@@ -1,7 +1,6 @@
 import { HttpClientService } from './../http-client/http-client.service';
 import { Injectable } from '@angular/core';
-import { Observable } from 'rxjs';
-
+import { Observable, tap, BehaviorSubject } from 'rxjs';
 export interface Recipe {
   id: number;
   name: string;
@@ -28,4 +27,10 @@ export class RecipeService {
   public getRecipe(id: number): Observable<Recipe> {
     return this.httpClientService.get<Recipe>(`recipe/${id}`);
   }
+
+  public searchRecipes(searchQuery: string): Observable<Recipe[]> {
+    return this.httpClientService.post<Recipe[]>('recipe/search', {
+      searchQuery,
+    });
+  }
 }

server/Controllers/RecipeController.cs

@@ -1,9 +1,16 @@
 using Microsoft.AspNetCore.Mvc;
 using Microsoft.EntityFrameworkCore;
 using server.Data;
+using server.Models;
 
 namespace server.Controllers
 {
+  public class SearchModel
+  {
+    public string SearchQuery { get; set; }
+  }
+
+
   [ApiController]
   [Route("api/[controller]")]
   public class RecipeController : ControllerBase
@@ -31,5 +38,16 @@ public async Task<IActionResult> GetDetails(int id)
         return NotFound();
       }
     }
+
+    [HttpPost]
+    [Route("search")]
+    public async Task<IActionResult> SearchRecipes([FromBody] SearchModel searchModel)
+    {
+      var recipes = await _context.Recipe
+        .Where(r => r.Name.ToLower().Contains(searchModel.SearchQuery.ToLower()))
+        .ToListAsync();
+
+      return Ok(recipes);
+    }
   }
 }