feat: getting details of manga

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

@@ -1,8 +1,7 @@
-import { Component } from "@angular/core";
+import { AfterViewInit, Component } from "@angular/core";
-import { RouterModule } from "@angular/router";
+import { ActivatedRoute, Router, RouterModule } from "@angular/router";
 import { AppService } from "./app.service";
 import { HeaderComponent } from "./components/header/header.component";
-import { LibSocialParserService } from "./services/parsers/rulib/lib.social.parser.service";
 import { Datum } from "./services/parsers/rulib/rulib.dto";
 import { SearchService } from "./services/search.service";
 
@@ -14,13 +13,14 @@ import { SearchService } from "./services/search.service";
   styleUrl: "./app.component.less",
   providers: [AppService],
 })
-export class AppComponent {
+export class AppComponent implements AfterViewInit {
   title = "NwaifuAnime";
   items: Datum[] = [];
   constructor(
     private sw: AppService,
-    private parser: LibSocialParserService,
     private searchService: SearchService,
+    private route: ActivatedRoute,
+    private router: Router,
   ) {}
 
   get hasUpdate() {
@@ -36,6 +36,19 @@ export class AppComponent {
   }
 
   onSearch(text: string) {
+    const currentParams = this.route.snapshot.queryParams;
+    const newParams = { ...currentParams, search: text };
+    this.router.navigate([], { queryParams: newParams });
     this.searchService.search(text);
   }
+
+  ngAfterViewInit(): void {
+    this.route.queryParams.subscribe((params) => {
+      console.log(params);
+      const searchParam: string | undefined = params["search"];
+      if (searchParam) {
+        this.searchService.search(searchParam);
+      }
+    });
+  }
 }

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

@@ -1,7 +1,11 @@
 <h1>It's home component</h1>
-@for (item of items; track $index) {
+<div class="flex flex-col items-center">
-  <div class="card">
+  @for (item of items; track $index) {
-    <h1>{{ item.rus_name }}</h1>
+    <button (click)="getDetails(item.slug)">
-    <img [src]="item.cover.thumbnail" [alt]="item.slug" />
+      <div class="card flex flex-col items-center">
-  </div>
+        <h1>{{ item.rus_name }}</h1>
-}
+        <img [src]="item.cover.thumbnail" [alt]="item.slug" />
+      </div>
+    </button>
+  }
+</div>

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

@@ -23,6 +23,12 @@ export class HomeComponent implements OnInit, OnDestroy {
     });
   }
 
+  getDetails(slug_url: string) {
+    this.searchService.getDetails(slug_url).subscribe((data) => {
+      console.log(data);
+    });
+  }
+
   ngOnDestroy(): void {
     this.subscription.unsubscribe();
   }

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

@@ -24,4 +24,19 @@ export class LibSocialParserService {
         }),
       );
   }
+
+  getDetails(slug_url: string) {
+    return this.http
+      .get(
+        `${this.url}/api/manga/${slug_url}?fields[]=summary&fields[]=genres&fields[]=tags&fields[]=authors`,
+      )
+      .pipe(
+        map((data: object) => {
+          return data;
+        }),
+        catchError((error) => {
+          return throwError(() => `Now found ${error}`);
+        }),
+      );
+  }
 }

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

@@ -1,5 +1,5 @@
 import { Injectable } from "@angular/core";
-import { BehaviorSubject } from "rxjs";
+import { BehaviorSubject, Observable, map } from "rxjs";
 import { LibSocialParserService } from "./parsers/rulib/lib.social.parser.service";
 import { Datum } from "./parsers/rulib/rulib.dto";
 
@@ -14,4 +14,12 @@ export class SearchService {
       this.itemsTerm.next(data.data);
     });
   }
+
+  getDetails(slug_url: string): Observable<object> {
+    return this.parser.getDetails(slug_url).pipe(
+      map((data) => {
+        return data;
+      }),
+    );
+  }
 }