Problem with not-found briefly showing is solved. Also, made the sear…

…ch pagination work
LuisLeandro94 · Jun 19, 2021 · eaff7b7 · eaff7b7
1 parent 795f928
commit eaff7b7
Show file tree

Hide file tree

Showing 10 changed files with 16,398 additions and 69 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/src/app/app.component.html b/src/app/app.component.html
@@ -1,2 +1,5 @@
 <app-navbar></app-navbar>
+<app-error
+  *ngIf="dataStore.Images.length === 0 && imageService.isSearch == true"
+></app-error>
 <router-outlet></router-outlet>
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
@@ -1,5 +1,6 @@
 import { Component, OnInit } from '@angular/core';
 import { DatastoreService } from './services/datastore.service';
+import { ImageService } from './services/image.service';
 
 @Component({
   selector: 'app-root',
@@ -9,7 +10,10 @@ import { DatastoreService } from './services/datastore.service';
 export class AppComponent implements OnInit {
   title = 'finalProject';
 
-  constructor(public dataStore: DatastoreService) {}
+  constructor(
+    public dataStore: DatastoreService,
+    public imageService: ImageService
+  ) {}
 
   ngOnInit() {
     this.dataStore.getImages(1);

diff --git a/src/app/image-list/image-list.component.css b/src/app/image-list/image-list.component.css
@@ -43,22 +43,3 @@ a {
 .padding-bottom {
   padding-bottom: 5px;
 }
-
-.pagination {
-  display: flex;
-  justify-content: center;
-}
-
-.page-link {
-  color: var(--clr-accent);
-  background-color: var(--clr-dark);
-}
-
-.pagination {
-  position: fixed;
-  left: 0;
-  bottom: 10px;
-  width: 100%;
-  text-align: center;
-  z-index: 999;
-}
diff --git a/src/app/image-list/image-list.component.html b/src/app/image-list/image-list.component.html
@@ -37,23 +37,4 @@ <h5 *ngIf="image.description == ''">
       </a>
     </div>
   </div>
-  <nav aria-label="pagination" class="pagination">
-    <ul class="pagination">
-      <li class="page-item" [ngClass]="{ disabled: dataStore.Page == 1 }">
-        <a class="page-link" aria-label="Previous" (click)="paginationL()">
-          <fa-icon [icon]="faArrowLeft"></fa-icon>
-          <span class="sr-only">Previous</span>
-        </a>
-      </li>
-      <li
-        class="page-item"
-        [ngClass]="{ disabled: dataStore.Images.length < 24 }"
-      >
-        <a class="page-link" aria-label="Next" (click)="paginationR()">
-          <fa-icon [icon]="faArrowRight"></fa-icon>
-          <span class="sr-only">Next</span>
-        </a>
-      </li>
-    </ul>
-  </nav>
 </div>
diff --git a/src/app/navbar/navbar.component.css b/src/app/navbar/navbar.component.css
@@ -23,3 +23,22 @@ a:hover {
 .cursor {
   cursor: pointer;
 }
+
+.pagination {
+  position: fixed;
+  left: 0;
+  bottom: 10px;
+  width: 100%;
+  text-align: center;
+  z-index: 999;
+}
+
+.page-link {
+  color: var(--clr-accent);
+  background-color: var(--clr-dark);
+}
+
+.pagination {
+  display: flex;
+  justify-content: center;
+}
diff --git a/src/app/navbar/navbar.component.html b/src/app/navbar/navbar.component.html
@@ -89,4 +89,26 @@ <h6 class="modal-title">Search Error</h6>
     </button>
   </div>
 </ng-template>
-<app-error *ngIf="dataStore.Images.length == 0"></app-error>
+<nav
+  aria-label="pagination"
+  class="pagination"
+  [ngClass]="{ hidden: dataStore.Images.length == 0 }"
+>
+  <ul class="pagination">
+    <li class="page-item" [ngClass]="{ disabled: dataStore.Page == 1 }">
+      <a class="page-link" aria-label="Previous" (click)="paginationL()">
+        <fa-icon [icon]="faArrowLeft"></fa-icon>
+        <span class="sr-only">Previous</span>
+      </a>
+    </li>
+    <li
+      class="page-item"
+      [ngClass]="{ disabled: dataStore.Images.length < 24 }"
+    >
+      <a class="page-link" aria-label="Next" (click)="paginationR()">
+        <fa-icon [icon]="faArrowRight"></fa-icon>
+        <span class="sr-only">Next</span>
+      </a>
+    </li>
+  </ul>
+</nav>
diff --git a/src/app/navbar/navbar.component.ts b/src/app/navbar/navbar.component.ts
@@ -1,8 +1,14 @@
 import { Component, OnInit } from '@angular/core';
 import { Router } from '@angular/router';
-import { faSearch, faCameraRetro } from '@fortawesome/free-solid-svg-icons';
+import {
+  faSearch,
+  faCameraRetro,
+  faArrowRight,
+  faArrowLeft,
+} from '@fortawesome/free-solid-svg-icons';
 import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
 import { DatastoreService } from '../services/datastore.service';
+import { ImageService } from '../services/image.service';
 import { Image } from '../shared/image.model';
 
 @Component({
@@ -13,6 +19,8 @@ import { Image } from '../shared/image.model';
 export class NavbarComponent implements OnInit {
   faSearch = faSearch;
   faCameraRetro = faCameraRetro;
+  faArrowLeft = faArrowLeft;
+  faArrowRight = faArrowRight;
   images: Image[];
   searchInput: '';
 
@@ -21,13 +29,14 @@ export class NavbarComponent implements OnInit {
   constructor(
     public dataStore: DatastoreService,
     private modalService: NgbModal,
-    private router: Router
+    private router: Router,
+    private imageService: ImageService
   ) {}
 
   ngOnInit(): void {}
 
   search(): void {
-    this.dataStore.getSearch(this.searchInput);
+    this.dataStore.getSearch(this.searchInput, this.dataStore.PageSearch);
   }
 
   modalOpen(content: any) {
@@ -38,4 +47,25 @@ export class NavbarComponent implements OnInit {
     this.dataStore.getImages(1);
     this.router.navigate(['']);
   }
+
+  paginationR() {
+    if (this.imageService.isSearch == false) {
+      this.dataStore.Page += 1;
+      this.dataStore.getImages(this.dataStore.Page);
+    } else {
+      debugger;
+      this.dataStore.PageSearch += 1;
+      this.dataStore.getSearch(this.searchInput, this.dataStore.PageSearch);
+    }
+  }
+
+  paginationL() {
+    if (this.imageService.isSearch == false) {
+      this.dataStore.Page -= 1;
+      this.dataStore.getImages(this.dataStore.Page);
+    } else {
+      this.dataStore.PageSearch -= 1;
+      this.dataStore.getSearch(this.searchInput, this.dataStore.PageSearch);
+    }
+  }
 }
diff --git a/src/app/services/datastore.service.ts b/src/app/services/datastore.service.ts
@@ -16,6 +16,9 @@ export class DatastoreService {
   page = new BehaviorSubject<any>(1);
   page$ = this.page.asObservable();
 
+  pageSearch = new BehaviorSubject<any>(1);
+  pageSearch$ = this.page.asObservable();
+
   constructor(private imageService: ImageService) {}
 
   get Images(): Image[] {
@@ -42,12 +45,20 @@ export class DatastoreService {
     this.page.next(value);
   }
 
+  get PageSearch(): any {
+    return this.pageSearch.getValue();
+  }
+
+  set PageSearch(value: any) {
+    this.pageSearch.next(value);
+  }
+
   async getImages(page: number) {
     this.Images = await this.imageService.convertAnsw(page);
   }
 
-  async getSearch(queryString: string) {
-    this.Images = await this.imageService.searchAPI(queryString);
+  async getSearch(queryString: string, page: number) {
+    this.Images = await this.imageService.searchAPI(queryString, page);
   }
 
   async getFav(id: string | null) {

diff --git a/src/app/services/image.service.ts b/src/app/services/image.service.ts
@@ -4,6 +4,7 @@ import { Image } from '../shared/image.model';
 
 @Injectable()
 export class ImageService {
+  isSearch: boolean = false;
   images: Image[] = [];
   favorites = [];
   clientID: string = 'hsntDSGlKnHUNoVJgTTvMw14mHh9GgNAEwRrwLP_j_0';
@@ -25,6 +26,7 @@ export class ImageService {
   }
 
   convertAnsw(page: number) {
+    this.isSearch = false;
     this.images = [];
     this.getData(page).subscribe((data) => {
       for (const item of data as any) {
@@ -36,9 +38,10 @@ export class ImageService {
     return this.images;
   }
 
-  searchAPI(queryString: string) {
+  searchAPI(queryString: string, page: number) {
+    this.isSearch = true;
     this.images = [];
-    this.getSearch(queryString).subscribe((data: any) => {
+    this.getSearch(queryString, page).subscribe((data: any) => {
       for (const item of data.results as any) {
         this.createImage(item).then((data: any) => {
           this.images.push(data.image);
@@ -48,8 +51,9 @@ export class ImageService {
     return this.images;
   }
 
-  getSearch(queryString: string) {
-    return this.http.get(this.baseURL + queryString);
+  getSearch(queryString: string, page: number) {
+    let url = `https://api.unsplash.com/search/photos?per_page=24&page=${page}&order_by=latest&client_id=hsntDSGlKnHUNoVJgTTvMw14mHh9GgNAEwRrwLP_j_0&query=${queryString}`;
+    return this.http.get(url);
   }
 
   createImage(image: any): Promise<any> {