feat: abstract classes and destroy subscriptions

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

@@ -1,7 +1,7 @@
 import { CommonModule } from "@angular/common";
-import { AfterViewInit, Component, Input, OnDestroy, OnInit } from "@angular/core";
-import { ActivatedRoute, Router } from "@angular/router";
-import { Subscription } from "rxjs";
+import { AfterViewInit, Component, Input, OnDestroy } from "@angular/core";
+import { ActivatedRoute, RouterLink } from "@angular/router";
+import { Subject, takeUntil } from "rxjs";
 import { Datum } from "../../services/parsers/rulib/rulib.search.dto";
 import { SearchService } from "../../services/search.service";
 
@@ -10,37 +10,33 @@ import { SearchService } from "../../services/search.service";
   selector: "app-home",
   templateUrl: "./home.component.html",
   styleUrls: ["./home.component.less"],
-  imports: [CommonModule],
+  imports: [CommonModule, RouterLink],
 })
-export class HomeComponent implements OnInit, OnDestroy, AfterViewInit {
+export class HomeComponent implements OnDestroy, AfterViewInit {
   @Input() items: Datum[] = [];
-  private subscription: Subscription = new Subscription();
+
+  private destroy$ = new Subject<void>();
 
   constructor(
     private searchService: SearchService,
     private route: ActivatedRoute,
-    private router: Router,
   ) {}
 
-  ngOnInit(): void {
-    this.subscription = this.searchService.currentItemsTerm.subscribe((data) => {
-      this.items = data;
-    });
-  }
-
-  getDetails(slug_url: string) {
-    this.router.navigate(["/", "detail"], { queryParams: { url: slug_url } });
-  }
-
   ngOnDestroy(): void {
-    this.subscription.unsubscribe();
+    this.destroy$.next();
+    this.destroy$.complete();
   }
 
   ngAfterViewInit(): void {
     this.route.queryParams.subscribe((params) => {
       const search = params["search"];
       if (search) {
-        this.searchService.search(search);
+        this.searchService
+          .search(search)
+          .pipe(takeUntil(this.destroy$))
+          .subscribe((data) => {
+            this.items = data.data;
+          });
       }
     });
   }