feat: abstract classes and destroy subscriptions

apps/NwaifuAnime/src/app/components/reader/reader.component.ts

@@ -1,7 +1,7 @@
 import { CommonModule } from "@angular/common";
-import { AfterViewInit, Component } from "@angular/core";
-import { ActivatedRoute, Router } from "@angular/router";
-import { Observable, map } from "rxjs";
+import { AfterViewInit, Component, OnDestroy } from "@angular/core";
+import { ActivatedRoute, Router, RouterLink } from "@angular/router";
+import { Observable, Subject, map, takeUntil } from "rxjs";
 import { Chapter, Page } from "../../services/parsers/rulib/rulib.chapter.dto";
 import { IRulibChapter } from "../../services/parsers/rulib/rulib.chapters.dto";
 import { SearchService } from "../../services/search.service";
@@ -13,9 +13,9 @@ import { CachedPages } from "./reader.dto";
   templateUrl: "./reader.component.html",
   styleUrls: ["./reader.component.less"],
   standalone: true,
-  imports: [CommonModule, ScaleImageComponent],
+  imports: [CommonModule, ScaleImageComponent, RouterLink],
 })
-export class ReaderComponent implements AfterViewInit {
+export class ReaderComponent implements AfterViewInit, OnDestroy {
   pages: Page[] = [];
   currentPageIndex = 0;
   cachedPages: CachedPages = {};
@@ -25,17 +25,22 @@ export class ReaderComponent implements AfterViewInit {
   private chaptersInfo: IRulibChapter[] = [];
   private chapterNum: number = 0;
   private chapterVol: number = 0;
-  private url = "";
+  url = "";
   private fromTowards = false;
+  private destroy$ = new Subject<void>();
 
   constructor(
     private route: ActivatedRoute,
     private router: Router,
     private searchService: SearchService,
   ) {}
+  ngOnDestroy(): void {
+    this.destroy$.next();
+    this.destroy$.complete();
+  }
 
   ngAfterViewInit(): void {
-    this.route.queryParams.subscribe((params) => {
+    this.route.queryParams.pipe(takeUntil(this.destroy$)).subscribe((params) => {
       const url = params["url"];
       const chapter = params["chapter"];
       const volume = params["volume"];
@@ -47,9 +52,12 @@ export class ReaderComponent implements AfterViewInit {
         this.chapterVol = +volume;
         this.url = url;
         this.loadChapter(url, chapter, volume);
-        this.searchService.getChapters(url).subscribe((data) => {
-          this.chaptersInfo = data.data;
-        });
+        this.searchService
+          .getChapters(url)
+          .pipe(takeUntil(this.destroy$))
+          .subscribe((data) => {
+            this.chaptersInfo = data.data;
+          });
       } else {
         this.router.navigate(["/"]);
       }
@@ -61,14 +69,17 @@ export class ReaderComponent implements AfterViewInit {
   }
 
   loadChapter(url: string, chapter: string, volume: string) {
-    this.searchService.getChapter(url, chapter, volume).subscribe((data) => {
-      this.currentChapterInfo = data.data;
-      this.pages = data.data.pages;
-      if (this.fromTowards) {
-        this.currentPageIndex = this.pages.length - 1;
-        this.loadPage(this.pages.length - 1); // Загрузить последнюю страницу при открытии главы
-      } else this.loadPage(0); // Загрузить первую страницу при открытии главы
-    });
+    this.searchService
+      .getChapter(url, chapter, volume)
+      .pipe(takeUntil(this.destroy$))
+      .subscribe((data) => {
+        this.currentChapterInfo = data.data;
+        this.pages = data.data.pages;
+        if (this.fromTowards) {
+          this.currentPageIndex = this.pages.length - 1;
+          this.loadPage(this.pages.length - 1); // Загрузить последнюю страницу при открытии главы
+        } else this.loadPage(0); // Загрузить первую страницу при открытии главы
+      });
   }
 
   loadPage(index: number) {
@@ -85,9 +96,11 @@ export class ReaderComponent implements AfterViewInit {
       }
       if (!this.cachedPages[index]?.imageData) {
         // Если страница не закэширована, загружаем её
-        this.fetchAndCachePage(index).subscribe(() => {
-          this.updateImage();
-        });
+        this.fetchAndCachePage(index)
+          .pipe(takeUntil(this.destroy$))
+          .subscribe(() => {
+            this.updateImage();
+          });
       } else {
         // Если страница уже в кэше, просто обновляем изображение
         this.updateImage();
@@ -135,11 +148,13 @@ export class ReaderComponent implements AfterViewInit {
 
     for (let i = startIndex; i <= endIndex; i++) {
       if (!this.isPageCached(i)) {
-        this.fetchAndCachePage(i).subscribe(() => {
-          if (i === this.currentPageIndex) {
-            this.updateImage();
-          }
-        });
+        this.fetchAndCachePage(i)
+          .pipe(takeUntil(this.destroy$))
+          .subscribe(() => {
+            if (i === this.currentPageIndex) {
+              this.updateImage();
+            }
+          });
       }
     }
   }