Details fully working and modal opening when query is empty or undefined

LuisLeandro94 · Jun 17, 2021 · 115f0fd · 115f0fd
1 parent c780295
commit 115f0fd
Show file tree

Hide file tree

Showing 6 changed files with 40 additions and 37 deletions.
diff --git a/src/app/image-details/image-details.component.html b/src/app/image-details/image-details.component.html
@@ -4,35 +4,35 @@
       <div class="row mx-1">
         <div class="col-12 mb-0">
           <div class="shadow-mb">
-            <a href="{{ image.download }}" target="_blank">
-              <img src="{{ image.regPath }}" class="img-fluid"
+            <a href="{{ dataStore.Image.download }}" target="_blank">
+              <img src="{{ dataStore.Image.regPath }}" class="img-fluid"
             /></a>
           </div>
         </div>
       </div>
     </div>
     <div class="col-md-6 height">
-      <h1 *ngIf="image.description != ''">
-        {{ image.description.concat(" ") }}
-        <span>({{ image.created_at | date: "yyyy" }})</span>
+      <h1 *ngIf="dataStore.Image.description != ''">
+        {{ dataStore.Image.description.concat(" ") }}
+        <span>({{ dataStore.Image.created_at | date: "yyyy" }})</span>
       </h1>
-      <h1 *ngIf="image.description == ''">
-        {{ image.alt_description.concat(" ")
-        }}<span>({{ image.created_at | date: "yyyy" }})</span>
+      <h1 *ngIf="dataStore.Image.description == ''">
+        {{ dataStore.Image.alt_description.concat(" ")
+        }}<span>({{ dataStore.Image.created_at | date: "yyyy" }})</span>
       </h1>
-      <h2>{{ image.creator }}</h2>
-      <h3>{{ image.created_at | date: "dd/MM/yyyy" }}</h3>
+      <h2>{{ dataStore.Image.creator }}</h2>
+      <h3>{{ dataStore.Image.created_at | date: "dd/MM/yyyy" }}</h3>
       <div class="likes_downloads">
         <div class="likes">
           <p>
             <fa-icon [icon]="faHeart"></fa-icon>
-            <span>{{ image.total_likes }}</span>
+            <span>{{ dataStore.Image.total_likes }}</span>
           </p>
         </div>
         <div class="downloads">
           <p>
             <fa-icon [icon]="faDownload"></fa-icon>
-            <span>{{ image.total_downloads }}</span>
+            <span>{{ dataStore.Image.total_downloads }}</span>
           </p>
         </div>
       </div>
@@ -42,8 +42,8 @@ <h3>{{ image.created_at | date: "dd/MM/yyyy" }}</h3>
         routerLink=""
         (click)="
           isFavorite
-            ? imageService.addToFavorite(image)
-            : imageService.remFromFavorite(image.id)
+            ? imageService.addToFavorite(dataStore.Image)
+            : imageService.remFromFavorite(dataStore.Image.id)
         "
         [ngClass]="{ remF: !isFavorite }"
       >
@@ -55,7 +55,7 @@ <h3>{{ image.created_at | date: "dd/MM/yyyy" }}</h3>
         <h2 class="tags">Tags</h2>
         <p class="bracket">
           [
-          <span class="dark">{{ image.tags.join(" | ") }}</span>
+          <span class="dark">{{ dataStore.Image.tags.join(" | ") }}</span>
           ]
         </p>
       </div>

diff --git a/src/app/image-details/image-details.component.ts b/src/app/image-details/image-details.component.ts
@@ -1,4 +1,4 @@
-import { Component, Input, OnInit } from '@angular/core';
+import { Component, OnDestroy, OnInit } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
 import { ImageService } from '../services/image.service';
 import { Image } from '../shared/image.model';
@@ -16,7 +16,7 @@ import { DatastoreService } from '../services/datastore.service';
   templateUrl: './image-details.component.html',
   styleUrls: ['./image-details.component.css'],
 })
-export class ImageDetailsComponent implements OnInit {
+export class ImageDetailsComponent implements OnInit, OnDestroy {
   imageService: ImageService;
   faPlus = faPlus;
   faMinus = faMinus;
@@ -31,22 +31,19 @@ export class ImageDetailsComponent implements OnInit {
   constructor(
     imageService: ImageService,
     private activeRoute: ActivatedRoute,
-    private dataStore: DatastoreService
+    public 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];
-      }
+      this.dataStore.getFav(p.id);
     });
   }
+
+  ngOnDestroy(): void {
+    this.dataStore.getFav(null);
+  }
 }
diff --git a/src/app/navbar/navbar.component.html b/src/app/navbar/navbar.component.html
@@ -53,7 +53,11 @@
         class="btn btn-outline-success my-2 my-sm-0"
         type="submit"
         (click)="isMenuCollapsed = true"
-        (click)="searchInput != '' ? search() : modalOpen(data)"
+        (click)="
+          searchInput != '' && searchInput != undefined
+            ? search()
+            : modalOpen(data)
+        "
       >
         Search
       </button>

diff --git a/src/app/navbar/navbar.component.ts b/src/app/navbar/navbar.component.ts
@@ -2,15 +2,13 @@ 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';
 import {
   debounceTime,
   distinctUntilChanged,
   switchMap,
   tap,
 } from 'rxjs/operators';
 import { DatastoreService } from '../services/datastore.service';
-import { ImageService } from '../services/image.service';
 import { Image } from '../shared/image.model';
 
 @Component({
@@ -28,14 +26,14 @@ export class NavbarComponent implements OnInit {
 
   constructor(
     private dataStore: DatastoreService,
-    private imageService: ImageService,
     private modalService: NgbModal,
     private router: Router
   ) {}
 
   ngOnInit(): void {}
 
   search(): void {
+    debugger;
     this.dataStore.getSearch(this.searchInput);
   }
 

diff --git a/src/app/services/datastore.service.ts b/src/app/services/datastore.service.ts
@@ -53,9 +53,11 @@ export class DatastoreService {
 
   async getFav(id: string | null) {
     if (id != null) {
-      this.Image = await this.imageService.convertSingle(id);
+      await this.imageService.convertSingle(id).then((data: any) => {
+        this.Image = data.image;
+      });
     } else {
-      this.Image = <Image>{}; //declara um objeto vazio -- APRENDE NABE
+      this.Image = <Image>{};
     }
   }
 }
diff --git a/src/app/services/image.service.ts b/src/app/services/image.service.ts
@@ -76,15 +76,17 @@ export class ImageService {
     });
   }
 
-  convertSingle(id: string) {
+  convertSingle(id: string): Promise<any> {
     let image: Image;
 
-    this.getImageByID(id).subscribe((data) => {
-      this.createImageDetails(data).then((data: any) => {
-        image = data.image;
+    return new Promise((resolve, reject) => {
+      this.getImageByID(id).subscribe((data) => {
+        this.createImageDetails(data).then((data: any) => {
+          image = data.image;
+          resolve({ image: image });
+        });
       });
     });
-    return image;
   }
 
   createImageDetails(image: any): Promise<any> {