feat: demo manga search

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

@@ -2,6 +2,9 @@ import { Component } from "@angular/core";
 import { 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";
 
 @Component({
   standalone: true,
@@ -13,7 +16,12 @@ import { HeaderComponent } from "./components/header/header.component";
 })
 export class AppComponent {
   title = "NwaifuAnime";
-  constructor(private sw: AppService) {}
+  items: Datum[] = [];
+  constructor(
+    private sw: AppService,
+    private parser: LibSocialParserService,
+    private searchService: SearchService,
+  ) {}
 
   get hasUpdate() {
     return this.sw.isUpdateAvailable;
@@ -28,6 +36,6 @@ export class AppComponent {
   }
 
   onSearch(text: string) {
-    console.log(text);
+    this.searchService.search(text);
   }
 }

apps/NwaifuAnime/src/app/app.config.ts

@@ -1,11 +1,17 @@
-import { ApplicationConfig, provideZoneChangeDetection, isDevMode } from "@angular/core";
+import { provideHttpClient } from "@angular/common/http";
+import { ApplicationConfig, isDevMode, provideZoneChangeDetection } from "@angular/core";
 import { provideRouter } from "@angular/router";
+import { provideServiceWorker } from "@angular/service-worker";
 import { appRoutes } from "./app.routes";
-import { provideServiceWorker } from '@angular/service-worker';
 
 export const appConfig: ApplicationConfig = {
-  providers: [provideZoneChangeDetection({ eventCoalescing: true }), provideRouter(appRoutes), provideServiceWorker('ngsw-worker.js', {
+  providers: [
-            enabled: !isDevMode(),
+    provideZoneChangeDetection({ eventCoalescing: true }),
-            registrationStrategy: 'registerWhenStable:30000'
+    provideRouter(appRoutes),
-          })],
+    provideServiceWorker("ngsw-worker.js", {
+      enabled: !isDevMode(),
+      registrationStrategy: "registerWhenStable:30000",
+    }),
+    provideHttpClient(),
+  ],
 };

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

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

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

@@ -1,5 +1,8 @@
 import { CommonModule } from "@angular/common";
-import { Component } from "@angular/core";
+import { Component, Input, OnDestroy, OnInit } from "@angular/core";
+import { Subscription } from "rxjs";
+import { Datum } from "../../services/parsers/rulib/rulib.dto";
+import { SearchService } from "../../services/search.service";
 
 @Component({
   standalone: true,
@@ -8,4 +11,19 @@ import { Component } from "@angular/core";
   styleUrls: ["./home.component.less"],
   imports: [CommonModule],
 })
-export class HomeComponent {}
+export class HomeComponent implements OnInit, OnDestroy {
+  @Input() items: Datum[] = [];
+  private subscription: Subscription = new Subscription();
+
+  constructor(private searchService: SearchService) {}
+
+  ngOnInit(): void {
+    this.subscription = this.searchService.currentItemsTerm.subscribe((data) => {
+      this.items = data;
+    });
+  }
+
+  ngOnDestroy(): void {
+    this.subscription.unsubscribe();
+  }
+}

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

@@ -0,0 +1,27 @@
+import { HttpClient } from "@angular/common/http";
+import { Injectable } from "@angular/core";
+import { Observable, catchError, map, throwError } from "rxjs";
+import { ESiteUrls } from "../urls";
+import { IRulibSearchResult } from "./rulib.dto";
+
+//TODO: Make abstract classes
+@Injectable({
+  providedIn: "root",
+})
+export class LibSocialParserService {
+  private readonly url = ESiteUrls.LIB_SOCIAL;
+  constructor(private readonly http: HttpClient) {}
+
+  searchManga(query: string): Observable<IRulibSearchResult> {
+    return this.http
+      .get(`${this.url}/api/manga?fields[]=rate_avg&fields[]=rate&q=${query}&site_id[]=1`)
+      .pipe(
+        map((data: object) => {
+          return data as IRulibSearchResult;
+        }),
+        catchError((error) => {
+          return throwError(() => `Now found ${error}`);
+        }),
+      );
+  }
+}

apps/NwaifuAnime/src/app/services/parsers/rulib/rulib.dto.ts

@@ -0,0 +1,79 @@
+export interface IRulibSearchResult {
+  data: Datum[];
+  links: Links;
+  meta: Meta;
+}
+
+//TODO: Make normal namings
+export interface Datum {
+  id: number;
+  name: string;
+  rus_name: string;
+  eng_name: string;
+  slug: string;
+  slug_url: string;
+  cover: Cover;
+  ageRestriction: AgeRestriction;
+  site: number;
+  type: AgeRestriction;
+  rating: Rating;
+  is_licensed: boolean;
+  model: Model;
+  status: AgeRestriction;
+  releaseDateString: string;
+}
+
+export interface AgeRestriction {
+  id: number;
+  label: Label;
+}
+
+export enum Label {
+  The12 = "12+",
+  The6 = "6+",
+  Завершён = "Завершён",
+  КомиксЗападный = "Комикс западный",
+  Манга = "Манга",
+  Манхва = "Манхва",
+  Маньхуа = "Маньхуа",
+  Нет = "Нет",
+  Онгоинг = "Онгоинг",
+  Приостановлен = "Приостановлен",
+}
+
+export interface Cover {
+  filename: string;
+  thumbnail: string;
+  default: string;
+  md: string;
+}
+
+export enum Model {
+  Manga = "manga",
+}
+
+export interface Rating {
+  average: string;
+  averageFormated: string;
+  votes: number;
+  votesFormated: string;
+  user: number;
+}
+
+export interface Links {
+  first: string;
+  last: null;
+  prev: null;
+  next: string;
+}
+
+export interface Meta {
+  current_page: number;
+  from: number;
+  path: string;
+  per_page: number;
+  to: number;
+  page: number;
+  has_next_page: boolean;
+  seed: string;
+}

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

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

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

@@ -0,0 +1,17 @@
+import { Injectable } from "@angular/core";
+import { BehaviorSubject } from "rxjs";
+import { LibSocialParserService } from "./parsers/rulib/lib.social.parser.service";
+import { Datum } from "./parsers/rulib/rulib.dto";
+
+@Injectable({ providedIn: "root" })
+export class SearchService {
+  private itemsTerm = new BehaviorSubject<Datum[]>([]);
+  currentItemsTerm = this.itemsTerm.asObservable();
+  constructor(private parser: LibSocialParserService) {}
+
+  search(query: string) {
+    this.parser.searchManga(query).subscribe((data) => {
+      this.itemsTerm.next(data.data);
+    });
+  }
+}