feat: abstract classes and destroy subscriptions

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

@@ -10,20 +10,29 @@
       </summary>
       <div class="flex flex-col items-center pb-16">
         @for (chapter of chapters.data; track $index) {
-          <button
+          <a
-            (click)="goToReader(chapter.number, chapter.volume)"
+            routerLink="/reader"
+            [queryParams]="{
+              url: detail_item.slug_url,
+              chapter: chapter.number,
+              volume: chapter.volume,
+            }"
             [title]="chapter.name"
             class="p-3 text-white bg-slate-600 w-[300px] mt-3 rounded-lg"
           >
             <h3>
               <strong>{{ chapter.number }}.</strong> {{ chapter.name || "Нет названия" }}
             </h3>
-          </button>
+          </a>
         }
       </div>
     </details>
-    <button class="p-3 text-white bg-slate-600 w-[300px] mt-5 rounded-lg" (click)="goToReader()">
+    <a
+      routerLink="/reader"
+      class="p-3 text-white bg-slate-600 w-[300px] mt-5 rounded-lg text-center"
+      [queryParams]="{ url: detail_item.slug_url, volume: 1, chapter: 1 }"
+    >
       Читать
-    </button>
+    </a>
   }
 </div>

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 { AfterViewInit, Component, OnDestroy } from "@angular/core";
-import { ActivatedRoute, Router } from "@angular/router";
+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.searchService
+      .getDetails(url)
+      .pipe(takeUntil(this.destroy$))
+      .subscribe((data) => {
         this.detail_item = data.data;
       });
-    this.searchService.getChapters(url).subscribe((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") {
+  ngOnDestroy(): void {
-    console.log(chapter, volume);
+    this.destroy$.next();
-    this.router.navigate(["/", "reader"], {
+    this.destroy$.complete();
-      queryParams: {
-        url: this.detail_item?.slug_url,
-        chapter: +chapter,
-        volume: +volume,
-      },
-    });
   }
 }

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

@@ -1,7 +1,7 @@
 import { CommonModule } from "@angular/common";
-import { AfterViewInit, Component, ElementRef, ViewChild } from "@angular/core";
+import { AfterViewInit, Component, ElementRef, OnDestroy, ViewChild } from "@angular/core";
 import { ActivatedRoute, NavigationEnd, Router } from "@angular/router";
-import { filter } from "rxjs";
+import { Subject, filter, takeUntil } from "rxjs";
 
 @Component({
   selector: "app-header",
@@ -10,15 +10,17 @@ import { filter } from "rxjs";
   standalone: true,
   imports: [CommonModule],
 })
-export class HeaderComponent implements AfterViewInit {
+export class HeaderComponent implements AfterViewInit, OnDestroy {
   @ViewChild("searchInput") searchInput: ElementRef<HTMLInputElement> | null = null;
   menuOpened = false;
+  private destroy$ = new Subject<void>();
   constructor(
     private router: Router,
     private route: ActivatedRoute,
   ) {
     this.router.events
       .pipe(filter((event) => event instanceof NavigationEnd))
+      .pipe(takeUntil(this.destroy$))
       // eslint-disable-next-line @typescript-eslint/no-explicit-any
       .subscribe((val: any) => {
         if (val.url.startsWith("/detail") || val.url.startsWith("/reader")) {
@@ -46,11 +48,16 @@ export class HeaderComponent implements AfterViewInit {
   }
 
   ngAfterViewInit(): void {
-    this.route.queryParams.subscribe((params) => {
+    this.route.queryParams.pipe(takeUntil(this.destroy$)).subscribe((params) => {
       const search = params["search"];
       if (search && this.searchInput) {
         this.searchInput.nativeElement.value = search;
       }
     });
   }
+
+  ngOnDestroy(): void {
+    this.destroy$.next();
+    this.destroy$.complete();
+  }
 }

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 { AfterViewInit, Component, Input, OnDestroy } from "@angular/core";
-import { ActivatedRoute, Router } from "@angular/router";
+import { ActivatedRoute, RouterLink } from "@angular/router";
-import { Subscription } from "rxjs";
+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;
+          });
       }
     });
   }

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

@@ -1,8 +1,14 @@
-<div class="flex flex-row items-center justify-between me-4">
+<div
-  <button class="bg-slate-600 text-white rounded-lg p-3 m-4" (click)="backToTitle()">
+  class="flex flex-row items-center justify-between me-4 max-w-[900px] relative -translate-x-[50%] left-[50%]"
+>
+  <a
+    [routerLink]="['/', 'detail']"
+    [queryParams]="{ url: url }"
+    class="bg-slate-600 text-white rounded-lg p-3 m-4"
+  >
     Назад к тайтлу
-  </button>
+  </a>
-  <h3>{{ currentChapterInfo?.number }}. {{ currentChapterInfo?.name }}</h3>
+  <h3>{{ currentChapterInfo?.number }}. {{ currentChapterInfo?.name || "Нет названия" }}</h3>
 </div>
 <div class="flex flex-col items-center">
   @if (pages.length > 0 && cachedPages[currentPageIndex]) {

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 { AfterViewInit, Component, OnDestroy } from "@angular/core";
-import { ActivatedRoute, Router } from "@angular/router";
+import { ActivatedRoute, Router, RouterLink } from "@angular/router";
-import { Observable, map } from "rxjs";
+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,7 +52,10 @@ export class ReaderComponent implements AfterViewInit {
         this.chapterVol = +volume;
         this.url = url;
         this.loadChapter(url, chapter, volume);
-        this.searchService.getChapters(url).subscribe((data) => {
+        this.searchService
+          .getChapters(url)
+          .pipe(takeUntil(this.destroy$))
+          .subscribe((data) => {
             this.chaptersInfo = data.data;
           });
       } else {
@@ -61,7 +69,10 @@ export class ReaderComponent implements AfterViewInit {
   }
 
   loadChapter(url: string, chapter: string, volume: string) {
-    this.searchService.getChapter(url, chapter, volume).subscribe((data) => {
+    this.searchService
+      .getChapter(url, chapter, volume)
+      .pipe(takeUntil(this.destroy$))
+      .subscribe((data) => {
         this.currentChapterInfo = data.data;
         this.pages = data.data.pages;
         if (this.fromTowards) {
@@ -85,7 +96,9 @@ export class ReaderComponent implements AfterViewInit {
       }
       if (!this.cachedPages[index]?.imageData) {
         // Если страница не закэширована, загружаем её
-        this.fetchAndCachePage(index).subscribe(() => {
+        this.fetchAndCachePage(index)
+          .pipe(takeUntil(this.destroy$))
+          .subscribe(() => {
             this.updateImage();
           });
       } else {
@@ -135,7 +148,9 @@ export class ReaderComponent implements AfterViewInit {
 
     for (let i = startIndex; i <= endIndex; i++) {
       if (!this.isPageCached(i)) {
-        this.fetchAndCachePage(i).subscribe(() => {
+        this.fetchAndCachePage(i)
+          .pipe(takeUntil(this.destroy$))
+          .subscribe(() => {
             if (i === this.currentPageIndex) {
               this.updateImage();
             }

apps/NwaifuAnime/src/app/services/parsers/decorators/parser.decorator.ts

@@ -0,0 +1,19 @@
+export function ParserDecorator({
+  site_name,
+  url,
+  nsfw = false,
+  site_id = 1,
+}: {
+  site_name: string;
+  url: string;
+  nsfw?: boolean;
+  site_id?: number;
+}) {
+  // eslint-disable-next-line @typescript-eslint/ban-types
+  return function (constructor: Function) {
+    constructor.prototype.site_name = site_name;
+    constructor.prototype.nsfw = nsfw;
+    constructor.prototype.api_url = url;
+    constructor.prototype.site_id = site_id;
+  };
+}

apps/NwaifuAnime/src/app/services/parsers/parser.ts

@@ -0,0 +1,18 @@
+import { HttpClient } from "@angular/common/http";
+import { Injectable } from "@angular/core";
+import { Observable } from "rxjs";
+
+@Injectable({ providedIn: "root" })
+export abstract class Parser {
+  constructor(protected http: HttpClient) {}
+
+  protected abstract url: string;
+
+  abstract searchManga(query: string): Observable<object>;
+
+  abstract getDetails(slug_url: string): Observable<object>;
+
+  abstract getChapters(url: string): Observable<object>;
+
+  abstract getChapter(url: string, chapter: string, volume: string): Observable<object>;
+}

apps/NwaifuAnime/src/app/services/parsers/rulib/lib.social.parser.service.ts

@@ -1,7 +1,6 @@
-import { HttpClient } from "@angular/common/http";
 import { Injectable } from "@angular/core";
 import { Observable, catchError, map, throwError } from "rxjs";
-import { ESiteUrls } from "../urls";
+import { Parser } from "../parser";
 import { IRulibChapterResult } from "./rulib.chapter.dto";
 import { IRulibChaptersResult } from "./rulib.chapters.dto";
 import { IRulibDetailResult } from "./rulib.detail.dto";
@@ -11,17 +10,20 @@ import { IRulibSearchResult } from "./rulib.search.dto";
 @Injectable({
   providedIn: "root",
 })
-export class LibSocialParserService {
+export class LibSocialParserService extends Parser {
-  private readonly url = ESiteUrls.LIB_SOCIAL;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  constructor(private readonly http: HttpClient) {}
+  protected url = (this as any).api_url;
-
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  private site_id = (this as any).site_id;
   get imageServer() {
     return "https://img33.imgslib.link";
   }
 
   searchManga(query: string): Observable<IRulibSearchResult> {
     return this.http
-      .get(`${this.url}/api/manga?fields[]=rate_avg&fields[]=rate&q=${query}&site_id[]=1`)
+      .get(
+        `${this.url}/api/manga?fields[]=rate_avg&fields[]=rate&q=${query}&site_id[]=${this.site_id}`,
+      )
       .pipe(
         map((data: object) => {
           return data as IRulibSearchResult;

apps/NwaifuAnime/src/app/services/parsers/rulib/mangalib.parser.service.ts

@@ -0,0 +1,10 @@
+import { Injectable } from "@angular/core";
+import { ParserDecorator } from "../decorators/parser.decorator";
+import { ESiteUrls } from "../urls";
+import { LibSocialParserService } from "./lib.social.parser.service";
+
+@Injectable({
+  providedIn: "root",
+})
+@ParserDecorator({ site_name: "MangaLib", url: ESiteUrls.MANGALIB, site_id: 1 })
+export class MangalibParserService extends LibSocialParserService {}

apps/NwaifuAnime/src/app/services/parsers/urls.ts

@@ -1,3 +1,4 @@
 export enum ESiteUrls {
   LIB_SOCIAL = "https://api.lib.social",
+  MANGALIB = "https://api.mangalib.me",
 }

apps/NwaifuAnime/src/app/services/search.service.ts

@@ -1,25 +1,27 @@
+import { HttpClient } from "@angular/common/http";
 import { Injectable } from "@angular/core";
 import { BehaviorSubject, Observable, map } from "rxjs";
-import { LibSocialParserService } from "./parsers/rulib/lib.social.parser.service";
+import { MangalibParserService } from "./parsers/rulib/mangalib.parser.service";
 import { IRulibChapterResult } from "./parsers/rulib/rulib.chapter.dto";
 import { IRulibChaptersResult } from "./parsers/rulib/rulib.chapters.dto";
 import { IRulibDetailResult } from "./parsers/rulib/rulib.detail.dto";
-import { Datum } from "./parsers/rulib/rulib.search.dto";
+import { Datum, IRulibSearchResult } from "./parsers/rulib/rulib.search.dto";
-import { HttpClient } from "@angular/common/http";
 
 @Injectable({ providedIn: "root" })
 export class SearchService {
   private itemsTerm = new BehaviorSubject<Datum[]>([]);
   currentItemsTerm = this.itemsTerm.asObservable();
   constructor(
-    private parser: LibSocialParserService,
+    private parser: MangalibParserService,
     private http: HttpClient,
   ) {}
 
-  search(query: string) {
+  search(query: string): Observable<IRulibSearchResult> {
-    this.parser.searchManga(query).subscribe((data) => {
+    return this.parser.searchManga(query).pipe(
-      this.itemsTerm.next(data.data);
+      map((data) => {
-    });
+        return data;
+      }),
+    );
   }
 
   getDetails(slug_url: string): Observable<IRulibDetailResult> {
@@ -50,12 +52,11 @@ export class SearchService {
     return this.parser.imageServer;
   }
 
-  getImageData(imageUrl: string): Observable<Uint8Array>{
+  getImageData(imageUrl: string): Observable<Uint8Array> {
-    return this.http.get(imageUrl, {responseType: 'arraybuffer'}).pipe(
+    return this.http.get(imageUrl, { responseType: "arraybuffer" }).pipe(
       map((arrayBuffer: ArrayBuffer) => {
         return new Uint8Array(arrayBuffer);
-      })
+      }),
     );
   }
-
 }