feat: popular titles on main page

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

@@ -36,15 +36,17 @@ export class HomeComponent implements OnDestroy, OnInit {
     this.popularSubscription.unsubscribe();
   }
 
-  private getPopular() {
-    if (!this.popularSubscription.closed) this.popularSubscription.unsubscribe();
-    this.popularSubscription = this.searchService
+  private getPopular(parserName: string) {
+    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);
-          console.log(this.popularItemsMap);
+          this.popularItemsMap.set(parserName, data);
+          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)