Favorites working on search and list

src/app/app.module.ts

@@ -8,7 +8,6 @@ import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
 import { FavoritesComponent } from './favorites/favorites.component';
 import { ImageDetailsComponent } from './image-details/image-details.component';
 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 { ImageService } from './services/image.service';
@@ -21,7 +20,6 @@ import { HttpClientModule } from '@angular/common/http';
     FavoritesComponent,
     ImageDetailsComponent,
     ImageListComponent,
-    ModalComponent,
     NavbarComponent,
     NotFoundComponent,
   ],

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

@@ -9,6 +9,7 @@ import {
   faDownload,
 } from '@fortawesome/free-solid-svg-icons';
 import { Observable } from 'rxjs';
+import { DatastoreService } from '../services/datastore.service';
 
 @Component({
   selector: 'app-image-details',
@@ -25,17 +26,26 @@ export class ImageDetailsComponent implements OnInit {
 
   image: Image;
   images: Image[];
+  imageID: string;
 
-  constructor(imageService: ImageService, private activeRoute: ActivatedRoute) {
+  constructor(
+    imageService: ImageService,
+    private activeRoute: ActivatedRoute,
+    private dataStore: DatastoreService
+  ) {
     this.imageService = imageService;
   }
 
   ngOnInit(): void {
     this.activeRoute.params.subscribe((p) => {
+      debugger;
       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) {
+        this.image = this.imageService.favorites.filter(
+          (x) => x.id == String(p.id)
+        )[0];
       }
     });
   }

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

@@ -44,6 +44,21 @@ a {
   padding-bottom: 5px;
 }
 
-.pagination.pg-blue {
+.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;
+}

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

@@ -37,4 +37,23 @@ <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>

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

@@ -1,8 +1,12 @@
 import { Component, OnInit } from '@angular/core';
-import { Router } from '@angular/router';
+import { ActivatedRoute, 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 {
+  faEye,
+  faArrowRight,
+  faArrowLeft,
+} from '@fortawesome/free-solid-svg-icons';
 import { DatastoreService } from '../services/datastore.service';
 
 @Component({
@@ -13,12 +17,23 @@ import { DatastoreService } from '../services/datastore.service';
 export class ImageListComponent implements OnInit {
   images: Image[] = [];
   faEye = faEye;
+  faArrowRight = faArrowRight;
+  faArrowLeft = faArrowLeft;
 
-  router: string;
-  page = 1;
-  count = 1000;
-
-  constructor(public dataStore: DatastoreService) {}
+  constructor(
+    public dataStore: DatastoreService,
+    public imageService: ImageService
+  ) {}
 
   ngOnInit(): void {}
+
+  paginationR() {
+    this.dataStore.Page += 1;
+    this.dataStore.getImages(this.dataStore.Page);
+  }
+
+  paginationL() {
+    this.dataStore.Page -= 1;
+    this.dataStore.getImages(this.dataStore.Page);
+  }
 }

src/app/navbar/navbar.component.css

@@ -19,3 +19,7 @@ a:hover {
   font-size: var(--fs-h2);
   margin-left: 20px;
 }
+
+.cursor {
+  cursor: pointer;
+}

src/app/navbar/navbar.component.html

@@ -24,7 +24,10 @@
   >
     <ul class="navbar-nav mr-auto">
       <li class="nav-item active">
-        <a class="nav-link" routerLink="" (click)="isMenuCollapsed = true"
+        <a
+          class="nav-link cursor"
+          (click)="returnList()"
+          (click)="isMenuCollapsed = true"
           >ImageWizzard <span class="sr-only">(current)</span></a
         >
       </li>
@@ -50,15 +53,15 @@
         class="btn btn-outline-success my-2 my-sm-0"
         type="submit"
         (click)="isMenuCollapsed = true"
-        (click)="searchInput != '' ? search() : modalOpen(modalData)"
+        (click)="searchInput != '' ? search() : modalOpen(data)"
       >
         Search
       </button>
     </form>
     <app-modal *ngIf="searchInput == '' || null"></app-modal>
   </div>
 </nav>
-<ng-template #modalData let-modal>
+<ng-template #data let-modal>
   <div class="modal-header">
     <h6 class="modal-title">Search Error</h6>
     <button

src/app/navbar/navbar.component.ts

@@ -1,4 +1,5 @@
 import { Component, OnInit } from '@angular/core';
+import { Router } from '@angular/router';
 import { faSearch, faCameraRetro } from '@fortawesome/free-solid-svg-icons';
 import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
 import { Observable, Subject } from 'rxjs';
@@ -28,7 +29,8 @@ export class NavbarComponent implements OnInit {
   constructor(
     private dataStore: DatastoreService,
     private imageService: ImageService,
-    private modalService: NgbModal
+    private modalService: NgbModal,
+    private router: Router
   ) {}
 
   ngOnInit(): void {}
@@ -40,4 +42,9 @@ export class NavbarComponent implements OnInit {
   modalOpen(content: any) {
     this.modalService.open(content).result.then();
   }
+
+  returnList() {
+    this.dataStore.getImages(1);
+    this.router.navigate(['']);
+  }
 }

src/app/services/datastore.service.ts

@@ -10,6 +10,12 @@ export class DatastoreService {
   images = new BehaviorSubject<any>([]);
   images$ = this.images.asObservable();
 
+  image = new BehaviorSubject<any>(null);
+  image$ = this.image.asObservable();
+
+  page = new BehaviorSubject<any>(1);
+  page$ = this.page.asObservable();
+
   constructor(private imageService: ImageService) {}
 
   get Images(): Image[] {
@@ -20,11 +26,36 @@ export class DatastoreService {
     this.images.next(value);
   }
 
+  get Image(): Image {
+    return this.image.getValue();
+  }
+
+  set Image(value: Image) {
+    this.image.next(value);
+  }
+
+  get Page(): any {
+    return this.page.getValue();
+  }
+
+  set Page(value: any) {
+    this.page.next(value);
+  }
+
   async getImages(page: number) {
+    debugger;
     this.Images = await this.imageService.convertAnsw(page);
   }
 
   async getSearch(queryString: string) {
     this.Images = await this.imageService.searchAPI(queryString);
   }
+
+  async getFav(id: string | null) {
+    if (id != null) {
+      this.Image = await this.imageService.convertSingle(id);
+    } else {
+      this.Image = <Image>{}; //declara um objeto vazio -- APRENDE NABE
+    }
+  }
 }

src/app/services/image.service.ts

@@ -18,7 +18,7 @@ export class ImageService {
   constructor(private http: HttpClient) {}
 
   getData(page: number) {
-    let url = `https://api.unsplash.com/photos?per_page=24&order_by=latest&client_id=hsntDSGlKnHUNoVJgTTvMw14mHh9GgNAEwRrwLP_j_0&page=${page}`;
+    let url = `https://api.unsplash.com/photos?per_page=24&page=${page}&order_by=latest&client_id=hsntDSGlKnHUNoVJgTTvMw14mHh9GgNAEwRrwLP_j_0`;
     return this.http.get(url);
   }
 
@@ -58,6 +58,36 @@ export class ImageService {
   }
 
   createImage(image: any): Promise<any> {
+    return new Promise((resolve, reject) => {
+      let img: Image = new Image(
+        image.description == null ? '' : image.description,
+        image.alt_description == null ? '' : image.alt_description,
+        image.created_at,
+        image.id,
+        image.likes,
+        image.urls.raw + '&fit=crop&w=500&h=500',
+        image.urls.regular + '&fit=crop&w=500&h=500',
+        image.user.name,
+        null,
+        image.links.download,
+        null
+      );
+      resolve({ image: img });
+    });
+  }
+
+  convertSingle(id: string) {
+    let image: Image;
+
+    this.getImageByID(id).subscribe((data) => {
+      this.createImageDetails(data).then((data: any) => {
+        image = data.image;
+      });
+    });
+    return image;
+  }
+
+  createImageDetails(image: any): Promise<any> {
     return new Promise((resolve, reject) => {
       this.getImageByID(image.id)
         .toPromise()
@@ -120,4 +150,14 @@ export class ImageService {
       }
     }
   }
+
+  getFavImage(id: string): Promise<any> {
+    return new Promise((resolve, reject) => {
+      this.getImageByID(id).subscribe((data) => {
+        this.createImage(data).then((data: any) => {
+          resolve({ image: data.image });
+        });
+      });
+    });
+  }
 }

src/app/shared/image.model.ts

@@ -8,8 +8,8 @@ export class Image {
     public path: string,
     public regPath: string,
     public creator: string,
-    public tags: string[],
+    public tags: string[] | null,
     public download: string,
-    public total_downloads: number
+    public total_downloads: number | null
   ) {}
 }