From 17bc0347a28fe7e938897949ceaf9cf2e28e9b26 Mon Sep 17 00:00:00 2001
From: Quildra <Quildra@gmail.com>
Date: Tue, 19 Nov 2024 18:39:19 +0000
Subject: [PATCH]  - Add evolution method in

---
 src/app/core/models/pokemon.model.ts          |  1 +
 src/app/core/services/pokemon.service.ts      |  8 ++--
 .../directives/lazy-component.directive.ts    | 38 +++++++++++++++++++
 3 files changed, 44 insertions(+), 3 deletions(-)
 create mode 100644 src/app/shared/directives/lazy-component.directive.ts

diff --git a/src/app/core/models/pokemon.model.ts b/src/app/core/models/pokemon.model.ts
index a5321c3..e2ed7a4 100644
--- a/src/app/core/models/pokemon.model.ts
+++ b/src/app/core/models/pokemon.model.ts
@@ -13,6 +13,7 @@ export interface Pokemon {
   IsDefault?: boolean;
   IsCaught?: boolean;
   IsGenderRelevant?: boolean;
+  EvolutionMethod?: string;
 }
   
   export interface PokemonEncounter {
diff --git a/src/app/core/services/pokemon.service.ts b/src/app/core/services/pokemon.service.ts
index 2bfc1f3..795d48e 100644
--- a/src/app/core/services/pokemon.service.ts
+++ b/src/app/core/services/pokemon.service.ts
@@ -1,6 +1,6 @@
 import { Injectable } from '@angular/core';
 import { HttpClient } from '@angular/common/http';
-import { catchError, concatMap, map, Observable, pipe, shareReplay, tap } from 'rxjs';
+import { catchError, concatMap, map, Observable, of, pipe, shareReplay, tap } from 'rxjs';
 import { Pokemon, PokemonEncounter } from '../models/pokemon.model';
 import { environment } from '../../../environments/environment.development';
 import { comparePfics } from '../utils/pfic-utils';
@@ -110,7 +110,8 @@ export class PokemonService {
         Image: "",
         IsDefault: row.data.is_default || false,
         IsGenderRelevant: row.data.gender_relevant,
-        IsCaught: this.caughtPokemon.has(row.pfic)
+        IsCaught: this.caughtPokemon.has(row.pfic),
+        EvolutionMethod: row.data.evolution_method || ""
       } as Pokemon;
       pkmn.MarkIcon = this.getMarkImgName(pkmn.MarkName)
       pkmn.Image = this.getPokemonImageUrl(pkmn)
@@ -193,7 +194,8 @@ export class PokemonService {
           Image: "",
           IsDefault: data.data.is_default || false,
           IsGenderRelevant: data.data.gender_relevant,
-          IsCaught: this.caughtPokemon.has(data.pfic)
+          IsCaught: this.caughtPokemon.has(data.pfic),
+          EvolutionMethod: data.data.evolution_method || ""
         } as Pokemon;
         pkmn.MarkIcon = this.getMarkImgName(pkmn.MarkName)
         pkmn.Image = this.getPokemonImageUrl(pkmn)
diff --git a/src/app/shared/directives/lazy-component.directive.ts b/src/app/shared/directives/lazy-component.directive.ts
new file mode 100644
index 0000000..ac1ebbf
--- /dev/null
+++ b/src/app/shared/directives/lazy-component.directive.ts
@@ -0,0 +1,38 @@
+import { Directive, ElementRef, EventEmitter, Output, AfterViewInit, OnDestroy, NgZone } from '@angular/core';
+
+@Directive({
+  selector: '[appLazyLoad]',
+  standalone: true
+})
+export class LazyLoadDirective implements AfterViewInit, OnDestroy {
+  @Output() lazyLoad = new EventEmitter<void>();
+
+  private observer!: IntersectionObserver;
+
+  constructor(private element: ElementRef, private ngZone: NgZone) {}
+
+  ngAfterViewInit(): void {
+    // Run the intersection observer outside Angular's zone
+    this.ngZone.runOutsideAngular(() => {
+      this.observer = new IntersectionObserver(entries => {
+        entries.forEach(entry => {
+          if (entry.isIntersecting) {
+            // Re-enter Angular's zone to trigger the lazy load event
+            this.ngZone.run(() => {
+              this.lazyLoad.emit();
+              this.observer.disconnect(); // Disconnect after loading
+            });
+          }
+        });
+      });
+
+      this.observer.observe(this.element.nativeElement);
+    });
+  }
+
+  ngOnDestroy(): void {
+    if (this.observer) {
+      this.observer.disconnect();
+    }
+  }
+}