feat: abstract classes and destroy subscriptions

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

@@ -1,11 +1,16 @@
 <h1>It's home component</h1>
 <div class="flex flex-col items-center w-full px-3">
   @for (item of items; track $index) {
-    <button (click)="getDetails(item.slug_url)" title="{{ item.name }}" class="mb-6 w-full">
+    <a
+      routerLink="/detail"
+      [queryParams]="{ url: item.slug_url }"
+      title="{{ item.name }}"
+      class="mb-6 max-w-[700px] w-full"
+    >
       <div class="card flex flex-col items-center border-black border-2 rounded-md p-4 w-full">
         <h1>{{ item.rus_name }}</h1>
         <img [src]="item.cover.thumbnail" [alt]="item.slug" class="w-[200px] h-auto aspect-auto" />
       </div>
-    </button>
+    </a>
   }
 </div>

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;
+          });
       }
     });
   }