feat: abstract classes and destroy subscriptions

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

@@ -1,6 +1,7 @@
 import { CommonModule } from "@angular/common";
-import { AfterViewInit, Component } from "@angular/core";
-import { ActivatedRoute, Router } from "@angular/router";
+import { AfterViewInit, Component, OnDestroy } from "@angular/core";
+import { ActivatedRoute, Router, RouterLink } from "@angular/router";
+import { Subject, takeUntil } from "rxjs";
 import { IRulibChaptersResult } from "../../services/parsers/rulib/rulib.chapters.dto";
 import { Data } from "../../services/parsers/rulib/rulib.detail.dto";
 import { SearchService } from "../../services/search.service";
@@ -10,11 +11,12 @@ import { SearchService } from "../../services/search.service";
   templateUrl: "./detail.component.html",
   styleUrls: ["./detail.component.less"],
   standalone: true,
-  imports: [CommonModule],
+  imports: [CommonModule, RouterLink],
 })
-export class DetailComponent implements AfterViewInit {
+export class DetailComponent implements AfterViewInit, OnDestroy {
   detail_item: Data | null = null;
   chapters: IRulibChaptersResult = { data: [] };
+  private destroy$ = new Subject<void>();
   constructor(
     private route: ActivatedRoute,
     private searchService: SearchService,
@@ -22,17 +24,23 @@ export class DetailComponent implements AfterViewInit {
   ) {}
 
   private getDetails(url: string) {
-    this.searchService.getDetails(url).subscribe((data) => {
-      this.detail_item = data.data;
-    });
-    this.searchService.getChapters(url).subscribe((data) => {
-      this.chapters = data;
-      console.log(data);
-    });
+    this.searchService
+      .getDetails(url)
+      .pipe(takeUntil(this.destroy$))
+      .subscribe((data) => {
+        this.detail_item = data.data;
+      });
+    this.searchService
+      .getChapters(url)
+      .pipe(takeUntil(this.destroy$))
+      .subscribe((data) => {
+        this.chapters = data;
+        console.log(data);
+      });
   }
 
   ngAfterViewInit(): void {
-    this.route.queryParams.subscribe((params) => {
+    this.route.queryParams.pipe(takeUntil(this.destroy$)).subscribe((params) => {
       const url = params["url"];
       if (url) {
         this.getDetails(url);
@@ -42,14 +50,8 @@ export class DetailComponent implements AfterViewInit {
     });
   }
 
-  goToReader(chapter: string = "1", volume: string = "1") {
-    console.log(chapter, volume);
-    this.router.navigate(["/", "reader"], {
-      queryParams: {
-        url: this.detail_item?.slug_url,
-        chapter: +chapter,
-        volume: +volume,
-      },
-    });
+  ngOnDestroy(): void {
+    this.destroy$.next();
+    this.destroy$.complete();
   }
 }