feat: popular titles on main page

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

@@ -1,30 +1,56 @@
-<h1>It's home component</h1>
 @if (!search) {
-  @for (popular of popularItems; track popular[0]) {
-    <p class="text-5xl">{{ popular[0] }}</p>
-    @for (popularTitle of popular[1]; track popularTitle.id) {
-      <p>{{ popularTitle.rus_name }}</p>
-    }
-  }
-}
-<div class="flex flex-col items-center w-full px-3">
   @if (loading) {
-    <h1>Loading...</h1>
+    <p class="text-5xl text-center mb-16">Подождите...</p>
+  } @else {
+    <p class="text-5xl text-center mb-10">Популярное:</p>
+    <div class="flex flex-col gap-3 items-center w-full px-4 overflow-x-hidden">
+      @for (popular of popularItems; track popular[0]) {
+        <p class="text-5xl text-center">{{ popular[0] }}</p>
+        <div class="w-full overflow-x-auto py-3">
+          <div class="flex flex-row items-center gap-4 h-[400px] w-max">
+            @for (popularTitle of popular[1]; track popularTitle.id) {
+              <a routerLink="/detail" [queryParams]="{ url: popularTitle.slug_url }" class="h-full">
+                <div
+                  class="flex flex-col justify-around border-black rounded-md p-4 w-[400px] items-center border h-full flex-shrink-0"
+                >
+                  <img
+                    [src]="popularTitle.cover.thumbnail"
+                    [alt]="popularTitle.slug"
+                    class="w-[200px] h-auto aspect-auto"
+                  />
+                  <p>{{ popularTitle.rus_name }}</p>
+                </div>
+              </a>
+            }
+          </div>
+        </div>
+      }
+    </div>
   }
-  @if (notFound && !loading) {
+} @else {
-    <h1>Not found</h1>
+  <div class="flex flex-col items-center w-full px-3">
-  }
+    @if (loading) {
-  @for (item of items; track $index) {
+      <h1>Loading...</h1>
-    <a
+    }
-      routerLink="/detail"
+    @if (notFound && !loading) {
-      [queryParams]="{ url: item.slug_url }"
+      <h1>Not found</h1>
-      title="{{ item.name }}"
+    }
-      class="mb-6 max-w-[700px] w-full"
+    @for (item of items; track $index) {
-    >
+      <a
-      <div class="card flex flex-col items-center border-black border-2 rounded-md p-4 w-full">
+        routerLink="/detail"
-        <h1>{{ item.rus_name }}</h1>
+        [queryParams]="{ url: item.slug_url }"
-        <img [src]="item.cover.thumbnail" [alt]="item.slug" class="w-[200px] h-auto aspect-auto" />
+        title="{{ item.name }}"
-      </div>
+        class="mb-6 max-w-[700px] w-full"
-    </a>
+      >
-  }
+        <div class="card flex flex-col items-center border-black border-2 rounded-md p-4 w-full">
-</div>
+          <h1>{{ item.rus_name }}</h1>
+          <img
+            [src]="item.cover.thumbnail"
+            [alt]="item.slug"
+            class="w-[200px] h-auto aspect-auto"
+          />
+        </div>
+      </a>
+    }
+  </div>
+}

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

@@ -36,15 +36,17 @@ export class HomeComponent implements OnDestroy, OnInit {
     this.popularSubscription.unsubscribe();
   }
 
-  private getPopular() {
+  private getPopular(parserName: string) {
-    if (!this.popularSubscription.closed) this.popularSubscription.unsubscribe();
+    this.searchService
-    this.popularSubscription = this.searchService
       .getPopular()
-      .pipe(map((data) => data as IRuLIBPopular[]))
+      .pipe(
+        map((data) => data as IRuLIBPopular[]),
+        takeUntil(this.destroy$),
+      )
       .subscribe({
         next: (data) => {
-          this.popularItemsMap.set(this.searchService.getRuLibName(), data);
+          this.popularItemsMap.set(parserName, data);
-          console.log(this.popularItemsMap);
+          this.loading = false;
         },
         error: (error) => {
           console.error(error);
@@ -52,26 +54,26 @@ export class HomeComponent implements OnDestroy, OnInit {
       });
   }
 
-  getPopularMangalib() {
+  private getPopularMangalib() {
     this.searchService.setMangalibParser();
-    this.getPopular();
+    this.getPopular(this.searchService.getRuLibName());
   }
 
-  getPopularSlashlib() {
+  private getPopularSlashlib() {
     this.searchService.setSlashlibParser();
-    this.getPopular();
+    this.getPopular(this.searchService.getRuLibName());
   }
 
   get popularItems() {
-    return this.popularItemsMap.entries();
+    return Array.from(this.popularItemsMap.entries()).sort((a, b) => (a[0] > b[0] ? 1 : -1));
   }
 
   ngOnInit(): void {
     this.route.queryParams.pipe(takeUntil(this.destroy$)).subscribe((params) => {
       this.search = params["search"] ?? "";
       this.items = [];
+      this.loading = true;
       if (this.search) {
-        this.loading = true;
         this.searchService.setMangalibParser();
         this.searchService
           .search(this.search)