feat: demo manga search

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

@@ -6,6 +6,6 @@
     <h1>Update not available</h1>
   }
 }
-<app-header></app-header>
+<app-header (searchEvent)="onSearch($event)"></app-header>
 <div class="h-10"></div>
 <router-outlet></router-outlet>

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;
@@ -26,4 +34,8 @@ export class AppComponent {
   get serviceWorkerEnabled() {
     return this.sw.serviceWorkerEnabled;
   }
+
+  onSearch(text: string) {
+    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/app.routes.ts

@@ -1,4 +1,9 @@
 import { Route } from "@angular/router";
 import { HomeComponent } from "./components/home/home.component";
 
-export const appRoutes: Route[] = [{ path: "", component: HomeComponent }];
+export const appRoutes: Route[] = [
+  {
+    path: "",
+    component: HomeComponent,
+  },
+];

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

@@ -1,17 +1,23 @@
 <div
-  class="fixed flex justify-between w-full p-2 bg-gray-700 md:h-8 h-auto items-center md:flex-row flex-col"
+  class="header fixed flex justify-between w-full p-2 bg-gray-700 md:h-8 h-auto items-center md:flex-row flex-col md:gap-0 gap-3"
 >
-  <h1 class="text-white">NwaifuAnime</h1>
+  <div class="flex justify-between flex-row w-full align-middle">
-  <div
+    <h1 class="text-white">NwaifuAnime</h1>
-    id="search-bar"
+    <!-- Search bar on small screens -->
-    class="bg-slate-300 md:w-[50%] w-full md:m-0 ms-2 me-2 max-h-6 flex justify-start flex-row items-center gap-1 rounded-md"
+    <button type="button" class="md:hidden" (click)="changeMenu()">
-  >
+      <i [class]="menuBtnClass"></i>
+    </button>
+  </div>
+
+  <!-- Search bar on big screens -->
+  <div [class]="searchBarClass">
     <input
       type="search"
-      class="outline-none ps-1 text-sm leading-6 w-[70%] border-0 bg-transparent border-r border-gray-700"
+      #searchInput
+      class="outline-none ps-1 text-sm leading-6 w-full border-0 bg-transparent border-r border-gray-700"
     />
-    <button class="align-middle w-[30%] text-center" type="submit">
+    <button class="align-middle w-[100px] text-center" type="submit" (click)="search()">
-      <span class="text-sm text-white">Поиск <i class="lni lni-search-alt"></i></span>
+      <span class="text-sm text-black h-full">Поиск</span>
     </button>
   </div>
 </div>

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

@@ -0,0 +1,3 @@
+.header {
+  transition: height 0.3s;
+}

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

@@ -1,9 +1,33 @@
-import { Component } from "@angular/core";
+import { CommonModule } from "@angular/common";
+import { Component, ElementRef, EventEmitter, Output, ViewChild } from "@angular/core";
 
 @Component({
   selector: "app-header",
   templateUrl: "./header.component.html",
   styleUrls: ["./header.component.less"],
   standalone: true,
+  imports: [CommonModule],
 })
-export class HeaderComponent {}
+export class HeaderComponent {
+  @Output() searchEvent: EventEmitter<string> = new EventEmitter();
+  @ViewChild("searchInput") searchInput: ElementRef<HTMLInputElement> | null = null;
+  menuOpened = false;
+  changeMenu() {
+    this.menuOpened = !this.menuOpened;
+  }
+
+  get menuBtnClass(): string {
+    return `lni ${this.menuOpened ? "lni-close" : "lni-menu"} text-white`;
+  }
+
+  get searchBarClass(): string {
+    return `search-bar bg-slate-300 md:w-[50%] w-full md:m-0 ms-2 me-2 max-h-6 md:flex justify-start flex-row items-center rounded-md ${this.menuOpened ? "flex" : "hidden"}`;
+  }
+
+  search() {
+    if (this.searchInput) {
+      const text = this.searchInput.nativeElement.value;
+      this.searchEvent.emit(text);
+    }
+  }
+}

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