Search working.

package.json

@@ -48,4 +48,4 @@
     "tslint": "~6.1.0",
     "typescript": "~4.1.5"
   }
-}
+}

src/app/app-routing.module.ts

@@ -4,12 +4,10 @@ import { FavoritesComponent } from './favorites/favorites.component';
 import { ImageDetailsComponent } from './image-details/image-details.component';
 import { ImageListComponent } from './image-list/image-list.component';
 import { NotFoundComponent } from './not-found/not-found.component';
-import { SearchResultsComponent } from './search-results/search-results.component';
 
 const routes: Routes = [
   { path: '', component: ImageListComponent },
   { path: 'images/:id', component: ImageDetailsComponent },
-  { path: 'search/:query', component: SearchResultsComponent },
   { path: 'favorites', component: FavoritesComponent },
   { path: 'not-found', component: NotFoundComponent },
   { path: '**', redirectTo: 'not-found' },

src/app/app.component.ts

@@ -1,10 +1,17 @@
-import { Component } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
+import { DatastoreService } from './services/datastore.service';
 
 @Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
-  styleUrls: ['./app.component.css']
+  styleUrls: ['./app.component.css'],
 })
-export class AppComponent {
+export class AppComponent implements OnInit {
   title = 'finalProject';
+
+  constructor(public dataStore: DatastoreService) {}
+
+  ngOnInit() {
+    this.dataStore.getImages(1);
+  }
 }

src/app/app.module.ts

@@ -11,10 +11,8 @@ import { ImageListComponent } from './image-list/image-list.component';
 import { ModalComponent } from './modal/modal.component';
 import { NavbarComponent } from './navbar/navbar.component';
 import { NotFoundComponent } from './not-found/not-found.component';
-import { SearchResultsComponent } from './search-results/search-results.component';
 import { ImageService } from './services/image.service';
 import { FormsModule } from '@angular/forms';
-import { SearchService } from './services/search.service';
 import { HttpClientModule } from '@angular/common/http';
 
 @NgModule({
@@ -26,7 +24,6 @@ import { HttpClientModule } from '@angular/common/http';
     ModalComponent,
     NavbarComponent,
     NotFoundComponent,
-    SearchResultsComponent,
   ],
   imports: [
     BrowserModule,

src/app/image-details/image-details.component.ts

@@ -35,6 +35,8 @@ export class ImageDetailsComponent implements OnInit {
       this.isFavorite = this.imageService.checkIfFavorite(p.id);
       const images = this.imageService.images;
       this.image = images.filter((x) => x.id == String(p.id))[0];
+      if (this.image == undefined) {
+      }
     });
   }
 }

src/app/image-list/image-list.component.html

@@ -2,7 +2,7 @@
   <div class="row pb-5 mb-4">
     <div
       class="col-lg-3 col-md-4 col-sm-6 col-6 mb-4 mb-lg-0"
-      *ngFor="let image of images"
+      *ngFor="let image of dataStore.Images"
     >
       <a [routerLink]="['/images', image.id]">
         <div class="card rounded shadow-sm border-0 mb-5">

src/app/image-list/image-list.component.ts

@@ -3,6 +3,7 @@ import { Router } from '@angular/router';
 import { ImageService } from '../services/image.service';
 import { Image } from '../shared/image.model';
 import { faEye } from '@fortawesome/free-solid-svg-icons';
+import { DatastoreService } from '../services/datastore.service';
 
 @Component({
   selector: 'app-image-list',
@@ -17,11 +18,7 @@ export class ImageListComponent implements OnInit {
   page = 1;
   count = 1000;
 
-  constructor(private imageService: ImageService) {}
+  constructor(public dataStore: DatastoreService) {}
 
-  ngOnInit(): void {
-    debugger;
-    this.images = this.imageService.images;
-    this.imageService.getData().subscribe();
-  }
+  ngOnInit(): void {}
 }

src/app/navbar/navbar.component.html

@@ -50,11 +50,36 @@
         class="btn btn-outline-success my-2 my-sm-0"
         type="submit"
         (click)="isMenuCollapsed = true"
-        [routerLink]="['search', searchInput]"
+        (click)="searchInput != '' ? search() : modalOpen(modalData)"
       >
         Search
       </button>
     </form>
     <app-modal *ngIf="searchInput == '' || null"></app-modal>
   </div>
 </nav>
+<ng-template #modalData let-modal>
+  <div class="modal-header">
+    <h6 class="modal-title">Search Error</h6>
+    <button
+      type="button"
+      class="close"
+      aria-label="Close"
+      (click)="modal.dismiss('Cross click')"
+    >
+      <span aria-hidden="true">×</span>
+    </button>
+  </div>
+  <div class="modal-body">
+    <p>Please provide a valid search text</p>
+  </div>
+  <div class="modal-footer">
+    <button
+      type="button"
+      class="btn btn-danger"
+      (click)="modal.close('Save click')"
+    >
+      Close
+    </button>
+  </div>
+</ng-template>

src/app/navbar/navbar.component.ts

@@ -1,14 +1,15 @@
 import { Component, OnInit } from '@angular/core';
 import { faSearch, faCameraRetro } from '@fortawesome/free-solid-svg-icons';
+import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
 import { Observable, Subject } from 'rxjs';
 import {
   debounceTime,
   distinctUntilChanged,
   switchMap,
   tap,
 } from 'rxjs/operators';
+import { DatastoreService } from '../services/datastore.service';
 import { ImageService } from '../services/image.service';
-import { SearchService } from '../services/search.service';
 import { Image } from '../shared/image.model';
 
 @Component({
@@ -19,13 +20,24 @@ import { Image } from '../shared/image.model';
 export class NavbarComponent implements OnInit {
   faSearch = faSearch;
   faCameraRetro = faCameraRetro;
-  query: any;
   images: Image[];
   searchInput: '';
 
   isMenuCollapsed = true;
 
-  constructor() {}
+  constructor(
+    private dataStore: DatastoreService,
+    private imageService: ImageService,
+    private modalService: NgbModal
+  ) {}
 
   ngOnInit(): void {}
+
+  search(): void {
+    this.dataStore.getSearch(this.searchInput);
+  }
+
+  modalOpen(content: any) {
+    this.modalService.open(content).result.then();
+  }
 }

src/app/services/search.service.spec.ts → src/app/services/datastore.service.spec.ts

@@ -1,13 +1,13 @@
 import { TestBed } from '@angular/core/testing';
 
-import { SearchService } from './search.service';
+import { DatastoreService } from './datastore.service';
 
-describe('SearchService', () => {
-  let service: SearchService;
+describe('DatastoreService', () => {
+  let service: DatastoreService;
 
   beforeEach(() => {
     TestBed.configureTestingModule({});
-    service = TestBed.inject(SearchService);
+    service = TestBed.inject(DatastoreService);
   });
 
   it('should be created', () => {

src/app/services/datastore.service.ts

@@ -0,0 +1,30 @@
+import { Injectable } from '@angular/core';
+import { BehaviorSubject } from 'rxjs';
+import { Image } from '../shared/image.model';
+import { ImageService } from './image.service';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class DatastoreService {
+  images = new BehaviorSubject<any>([]);
+  images$ = this.images.asObservable();
+
+  constructor(private imageService: ImageService) {}
+
+  get Images(): Image[] {
+    return this.images.getValue();
+  }
+
+  set Images(value: Image[]) {
+    this.images.next(value);
+  }
+
+  async getImages(page: number) {
+    this.Images = await this.imageService.convertAnsw(page);
+  }
+
+  async getSearch(queryString: string) {
+    this.Images = await this.imageService.searchAPI(queryString);
+  }
+}