aljaz/angor-hub-old
1
1
Fork 0
mirror of https://github.com/block-core/angor-hub-old.git synced 2026-01-31 07:34:21 +01:00
Code Issues Packages Projects Releases Wiki Activity

Refactor BookmarkComponent to use signals for loading state and project details; update template bindings accordingly

Browse Source
This commit is contained in:
Milad Raeisi
2024-12-13 15:56:22 +04:00
parent e0f643207f
commit afc94e2afc
2 changed files with 24 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/app/components/bookmark/bookmark.component.html
View File

@@ -27,7 +27,7 @@
<!-- 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 @@
</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">

48
src/app/components/bookmark/bookmark.component.ts
View File

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