Refactor BookmarkComponent to use signals for loading state and proje…

…ct details; update template bindings accordingly
block-core · Dec 13, 2024 · afc94e2 · afc94e2
1 parent e0f6432
commit afc94e2
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 30 deletions.
diff --git a/src/app/components/bookmark/bookmark.component.html b/src/app/components/bookmark/bookmark.component.html
@@ -27,7 +27,7 @@ <h2 class="text-xl font-semibold">Bookmark</h2>
             <!-- Project Cards -->
             <div class="mt-10 grid w-full min-w-0 grid-cols-1 gap-6 sm:grid-cols-1 md:grid-cols-1 lg:grid-cols-2">
                 <!-- Loop through projects and render cards -->
-                <ng-container *ngFor="let project of savedProjectDetailes; trackBy: trackByFn">
+                <ng-container *ngFor="let project of savedProjectDetailes(); trackBy: trackByFn">
                     <angor-card class="filter-info flex w-full flex-col">
                         <div class="flex h-32">
                             <img class="object-cover" [src]="project.banner || '/images/pages/profile/cover.jpg'" alt="Card cover image"
@@ -127,14 +127,14 @@ <h2 class="text-xl font-semibold">Bookmark</h2>
                 </ng-container>
             </div>
             <!-- Loading spinner -->
-            <ng-container *ngIf="isLoading">
+            <ng-container *ngIf="isLoading()">
                 <div class="flex flex-auto flex-col items-center justify-center">
                     <mat-spinner [diameter]="40"></mat-spinner>
                     <div class="text-secondary mt-4 text-lg">Loading projects...</div>
                 </div>
             </ng-container>
             <!-- No projects message -->
-            <ng-container *ngIf="!isLoading && savedProjectDetailes.length === 0">
+            <ng-container *ngIf="!isLoading() && savedProjectDetailes().length === 0">
                 <div class="flex flex-auto flex-col items-center justify-center bg-gray-100 dark:bg-transparent">
                     <mat-icon class="icon-size-24" [svgIcon]="'heroicons_outline:archive-box-x-mark'"></mat-icon>
                     <div class="text-secondary mt-4 text-2xl font-semibold tracking-tight">

diff --git a/src/app/components/bookmark/bookmark.component.ts b/src/app/components/bookmark/bookmark.component.ts
@@ -1,6 +1,6 @@
 import { AngorCardComponent } from '@angor/components/card';
 import { CommonModule, NgClass } from '@angular/common';
-import { Component, OnDestroy, OnInit } from '@angular/core';
+import { Component, OnDestroy, OnInit, inject, signal } from '@angular/core';
 import { MatButtonModule } from '@angular/material/button';
 import { MatOptionModule } from '@angular/material/core';
 import { MatFormFieldModule } from '@angular/material/form-field';
@@ -40,69 +40,63 @@ import { catchError, Observable, of, Subject, takeUntil, tap } from 'rxjs';
     styleUrls: ['./bookmark.component.scss'],
 })
 export class BookmarkComponent implements OnInit, OnDestroy {
-    savedProjects: Project[] = [];
-    savedProjectDetailes: ProjectDetails[] = [];
-    bookmarks$: Observable<string[]>;
-    isLoading = true;
+    bookmarkService = inject(BookmarkService);
+    savedProjectDetailes = signal<ProjectDetails[]>([]);
+    isLoading = signal(false);
+    bookmarks$ = this.bookmarkService.bookmarks$;
     private _unsubscribeAll = new Subject<any>();
 
     constructor(
-        private _bookmarkService: BookmarkService,
         private _storageService: StorageService,
         private _router: Router,
         private _projectsService: ProjectsService,
-    ) {
-        this.bookmarks$ = this._bookmarkService.bookmarks$;
-    }
+    ) {}
 
     async ngOnInit(): Promise<void> {
         try {
-            await this._bookmarkService.initializeForCurrentUser();
+            await this.bookmarkService.initializeForCurrentUser();
             await this.loadBookmarkedProjects();
             this.subscribeToBookmarkChanges();
-            this.isLoading = false;
+            this.isLoading.set(false);
         } catch (error) {
             console.error('Error during initialization:', error);
-            this.isLoading = false;
+            this.isLoading.set(false);
         }
     }
 
-
     trackByFn(index: number, item: ProjectDetails): string | number {
         return item.nostrPubKey || index;
     }
 
     private async loadBookmarkedProjects(): Promise<void> {
-        this.isLoading = true;
+        this.isLoading.set(true);
         try {
-            const bookmarkIds = await this._bookmarkService.getBookmarks();
+            const bookmarkIds = await this.bookmarkService.getBookmarks();
             const projects = await this._storageService.getProjectsByNostrPubKeys(bookmarkIds);
-            this.savedProjectDetailes = projects;
-            this.isLoading = false;
+            this.savedProjectDetailes.set(projects);
+            this.isLoading.set(false);
         } catch (error) {
             console.error('Error loading bookmarked projects:', error);
-            this.isLoading = false;
+            this.isLoading.set(false);
         }
     }
 
-
     private subscribeToBookmarkChanges(): void {
         this.bookmarks$
             .pipe(takeUntil(this._unsubscribeAll))
             .subscribe(async (bookmarkIds) => {
                 try {
                     const projects = await this._storageService.getProjectsByNostrPubKeys(bookmarkIds);
-                    this.savedProjectDetailes = projects;
-                    this.fetchMetadataForProjects(this.savedProjectDetailes);
-                    this.isLoading = false;
+                    this.savedProjectDetailes.set(projects);
+                    this.fetchMetadataForProjects(this.savedProjectDetailes());
+                    this.isLoading.set(false);
                 } catch (error) {
                     console.error('Error updating bookmarks:', error);
-                    this.isLoading = false;
+                    this.isLoading.set(false);
                 }
             });
     }
 
-
     private fetchMetadataForProjects(projects: ProjectDetails[]): void {
         projects.forEach((project) => {
             this._storageService
@@ -124,11 +118,11 @@ export class BookmarkComponent implements OnInit, OnDestroy {
 
     async toggleBookmark(projectNpub: string): Promise<void> {
         const isBookmarked =
-            await this._bookmarkService.isBookmarked(projectNpub);
+            await this.bookmarkService.isBookmarked(projectNpub);
         if (isBookmarked) {
-            await this._bookmarkService.removeBookmark(projectNpub);
+            await this.bookmarkService.removeBookmark(projectNpub);
         } else {
-            await this._bookmarkService.addBookmark(projectNpub);
+            await this.bookmarkService.addBookmark(projectNpub);
         }
     }