From 2053bed13618c79c8e4081b382f67f35bcfdf94e Mon Sep 17 00:00:00 2001 From: Milad Raeisi Date: Mon, 28 Oct 2024 20:40:37 +0400 Subject: [PATCH] Load project metadata from storage --- .../components/explore/explore.component.html | 225 +++++------------- .../components/explore/explore.component.ts | 87 ++++--- 2 files changed, 111 insertions(+), 201 deletions(-) diff --git a/src/app/components/explore/explore.component.html b/src/app/components/explore/explore.component.html index f2f7430..bbbe679 100644 --- a/src/app/components/explore/explore.component.html +++ b/src/app/components/explore/explore.component.html @@ -1,37 +1,20 @@
-
+
- - + +

Explore Projects

-
+
What’s your next investment?
-
+
Check out our projects and find your next investment opportunity.
@@ -40,185 +23,116 @@
-
+
-
+
- - - + + + - -
- + Hide completed
-
+
- Card cover image + alt="Card cover image" />
- Project logo + " onerror="this.onerror=null; this.src='/images/avatars/avatar-placeholder.png';" + alt="Project logo" />
@if (project.displayName || project.name) { -
- {{ - project.displayName || - project.nostrPubKey - }} -
+ "> + {{ + project.displayName || + project.nostrPubKey + }} +
} @if ( - !project.name && !project.displayName + !project.name && !project.displayName ) { -
- {{ - project.displayName || - project.nostrPubKey - }} -
- } -
+
{{ - project.about || - 'No description available' + project.displayName || + project.nostrPubKey + }} +
+ } +
+ {{ + project.about || + 'No description available' }}
@if (project.displayName || project.name) { - -
- -
+ +
+ +
}
-
+
{{ project.totalInvestmentsCount || 0 }} investors
- + "> - Investor avatar {{ + + }}" />
@@ -228,31 +142,16 @@
-
- -
+
+ +
No project
-
-
diff --git a/src/app/components/explore/explore.component.ts b/src/app/components/explore/explore.component.ts index 7cb24b1..e10bc46 100644 --- a/src/app/components/explore/explore.component.ts +++ b/src/app/components/explore/explore.component.ts @@ -61,88 +61,100 @@ import { Contact } from '../chat/chat.types'; }) export class ExploreComponent implements OnInit, OnDestroy { - filteredProjects: Project[] = []; - showCloseSearchButton: boolean = false; - - - - projects: Project[] = []; loading: boolean = false; errorMessage: string = ''; - noMoreProjects: boolean = false; // Track if more projects are available + noMoreProjects: boolean = false; private _unsubscribeAll: Subject = new Subject(); constructor( private _projectsService: ProjectsService, + private _storageService: StorageService, private _changeDetectorRef: ChangeDetectorRef ) {} ngOnInit(): void { this.loadInitialProjects(); - this.subscribeToProjects(); + this.subscribeToProjectsUpdates(); this.subscribeToLoading(); this.subscribeToNoMoreProjects(); } - // Load initial projects and reset state + // Load initial projects and fetch metadata for each private loadInitialProjects(): void { - this._projectsService.resetProjects(); // Reset service state to start fresh + this._projectsService.resetProjects(); this._projectsService.fetchProjects().pipe( takeUntil(this._unsubscribeAll) ).subscribe({ next: (projects: Project[]) => { this.projects = projects; - console.log('Initial projects loaded:', projects); + this.fetchMetadataForProjects(projects); this._changeDetectorRef.detectChanges(); }, error: (error) => { this.errorMessage = 'Error loading projects'; - console.error(this.errorMessage, error); this._changeDetectorRef.detectChanges(); } }); } + // Load metadata for each project by public key + private fetchMetadataForProjects(projects: Project[]): void { + projects.forEach(project => { + this._storageService.getProfile(project.nostrPubKey) + .then(profileMetadata => { + if (profileMetadata) { + this.updateProjectMetadata(project, profileMetadata); + } + }); + }); + } + + // Real-time subscription to updates on project metadata + private subscribeToProjectsUpdates(): void { + this._storageService.profile$ + .pipe(takeUntil(this._unsubscribeAll)) + .subscribe((data) => { + if (data && data.pubKey) { + const project = this.projects.find(proj => proj.nostrPubKey === data.pubKey); + if (project) { + this.updateProjectMetadata(project, data.metadata); + this._changeDetectorRef.detectChanges(); + } + } + }); + } + + // Method to update project metadata + private updateProjectMetadata(project: Project, metadata: any): void { + project.displayName = metadata.name || project.displayName; + project.about = metadata.about || project.about; + project.picture = metadata.picture || project.picture; + project.banner= metadata.banner || project.banner; + } + // Load the next page of projects and add them to the existing list loadMoreProjects(): void { this._projectsService.fetchProjects().pipe( takeUntil(this._unsubscribeAll) ).subscribe({ next: (newProjects: Project[]) => { - if (newProjects.length > 0) { - // Filter out duplicate projects - const uniqueNewProjects = newProjects.filter(newProject => - !this.projects.some(existingProject => - existingProject.projectIdentifier === newProject.projectIdentifier - ) - ); - // Add only unique new projects to the list - this.projects = [...this.projects, ...uniqueNewProjects]; - console.log('Loaded more projects:', uniqueNewProjects); - } else { - this.noMoreProjects = true; // No more projects to load - } + const uniqueNewProjects = newProjects.filter(newProject => + !this.projects.some(existingProject => + existingProject.projectIdentifier === newProject.projectIdentifier + ) + ); + this.projects = [...this.projects, ...uniqueNewProjects]; + this.fetchMetadataForProjects(uniqueNewProjects); this._changeDetectorRef.detectChanges(); }, error: (error) => { this.errorMessage = 'Error loading more projects'; - console.error(this.errorMessage, error); this._changeDetectorRef.detectChanges(); } }); } - // Subscribe to projects observable for updates - private subscribeToProjects(): void { - this._projectsService.projects$ - .pipe(takeUntil(this._unsubscribeAll)) - .subscribe((projects) => { - this.projects = projects; - this._changeDetectorRef.detectChanges(); - }); - } - // Subscribe to loading status observable for updates private subscribeToLoading(): void { this._projectsService.loading$ @@ -163,14 +175,13 @@ export class ExploreComponent implements OnInit, OnDestroy { }); } + // Track by function for ngFor to optimize rendering trackByFn(index: number, item: Project): string | number { return item.projectIdentifier || index; } - ngOnDestroy(): void { this._unsubscribeAll.next(null); this._unsubscribeAll.complete(); } - }