Refactor project list

src/app/components/explore/explore.component.html

@@ -104,7 +104,6 @@ <h2 class="text-xl font-semibold">Explore Projects</h2>
                 </button>
             </div>
 
-            <div *ngIf="loading" class="loading-spinner">Loading Projects...</div>
             <div *ngIf="!loading && errorMessage" class="error-message">
                 {{ errorMessage }}
             </div>

src/app/components/explore/explore.component.ts

@@ -51,23 +51,55 @@ export class ExploreComponent implements OnInit, OnDestroy {
   ) {}
 
   ngOnInit(): void {
-    this.projects = this.stateService.getProjects();
-    this.filteredProjects = [...this.projects];
+    this.loadInitialProjects();
+    this.subscribeToMetadataUpdates();
+  }
 
-    if (this.projects.length === 0) {
-      this.loadProjects();
-    } else {
-      this.loading = false;
-      this.projects.forEach(project => {
-        if (!project.displayName || !project.about) {
-          this.loadMetadataForProject(project);
+  private async loadInitialProjects(): Promise<void> {
+    try {
+      this.loading = true;
+      this.projects = this.stateService.getProjects();
+
+      if (this.projects.length === 0) {
+        await this.loadProjectsFromService();
+      } else {
+        this.filteredProjects = [...this.projects];
+        const pubkeysToFetch = this.getProjectsWithoutMetadata();
+        if (pubkeysToFetch.length > 0) {
+          await this.loadMetadataForProjects(pubkeysToFetch);
         }
-      });
+      }
+    } catch (error) {
+      this.handleError('Error loading initial projects');
+    } finally {
+      this.loading = false;
+      this.changeDetectorRef.detectChanges();
     }
+  }
+
+  private async loadProjectsFromService(): Promise<void> {
+    try {
+      const projects = await this.projectService.fetchProjects();
+      if (projects.length === 0) {
+        this.errorMessage = 'No projects found';
+        return;
+      }
+
+      this.projects = projects;
+      this.filteredProjects = [...this.projects];
+      this.stateService.setProjects(this.projects);
+
+      const pubkeys = projects.map(p => p.nostrPubKey);
+      await this.loadMetadataForProjects(pubkeys);
 
+    } catch (error) {
+      this.handleError('Error fetching projects from service');
+    }
+  }
+  private subscribeToMetadataUpdates(): void {
     this.indexedDBService.getMetadataStream()
       .pipe(takeUntil(this._unsubscribeAll))
-      .subscribe((updatedMetadata) => {
+      .subscribe((updatedMetadata: any) => {
         if (updatedMetadata) {
           const projectToUpdate = this.projects.find(p => p.nostrPubKey === updatedMetadata.pubkey);
           if (projectToUpdate) {
@@ -77,8 +109,29 @@ export class ExploreComponent implements OnInit, OnDestroy {
       });
   }
 
+  private getProjectsWithoutMetadata(): string[] {
+    return this.projects
+      .filter(project => !project.displayName || !project.about)
+      .map(project => project.nostrPubKey);
+  }
+
+  loadMetadataForProjects(pubkeys: string[]): void {
+    this.metadataService.fetchMetadataForMultipleKeys(pubkeys)
+      .then((metadataList: any[]) => {
+        metadataList.forEach(metadata => {
+          const project = this.projects.find(p => p.nostrPubKey === metadata.pubkey);
+          if (project) {
+            this.updateProjectMetadata(project, metadata);
+          }
+        });
+        this.changeDetectorRef.detectChanges();
+      })
+      .catch(error => {
+        console.error('Error fetching metadata for projects:', error);
+      });
+  }
 
-  loadProjects(): void {
+  async loadProjects(): Promise<void> {
     if (this.loading || this.errorMessage === 'No more projects found') return;
 
     this.loading = true;
@@ -93,7 +146,8 @@ export class ExploreComponent implements OnInit, OnDestroy {
         this.filteredProjects = [...this.projects];
 
         const pubkeys = projects.map(project => project.nostrPubKey);
-        await this.metadataService.fetchMetadataForMultipleKeys(pubkeys);
+
+        await this.loadMetadataForProjects(pubkeys);
 
         this.stateService.setProjects(this.projects);
 
@@ -109,7 +163,6 @@ export class ExploreComponent implements OnInit, OnDestroy {
     });
   }
 
-
   async loadMetadataForProject(project: Project): Promise<void> {
     try {
       const metadata = await this.metadataService.fetchMetadataWithCache(project.nostrPubKey);
@@ -156,7 +209,6 @@ export class ExploreComponent implements OnInit, OnDestroy {
     this.router.navigate(['/projects', project.projectIdentifier]);
   }
 
-
   filterByQuery(query: string): void {
     if (!query) {
       this.filteredProjects = [...this.projects];
@@ -169,7 +221,6 @@ export class ExploreComponent implements OnInit, OnDestroy {
     );
   }
 
-
   toggleCompleted(event: any): void {
 
   }
@@ -178,4 +229,11 @@ export class ExploreComponent implements OnInit, OnDestroy {
     this._unsubscribeAll.next(null);
     this._unsubscribeAll.complete();
   }
+
+  private handleError(message: string): void {
+    console.error(message);
+    this.errorMessage = message;
+    this.loading = false;
+    this.changeDetectorRef.detectChanges();
+  }
 }

src/app/components/settings/relay/relay.component.html

@@ -19,8 +19,8 @@
                         class="flex h-10 w-10 flex-0 items-center justify-center overflow-hidden rounded-full"
                     >
                              <img
-                                class="h-full w-full object-cover"
-                                onerror="this.src='/images/avatars/avatar-placeholder.png'" [src]="relayFavIcon(relay.url)"
+                                class="h-full w-full object-cover" [src]="relayFavIcon(relay.url)"
+                                onerror="this.src='/images/avatars/avatar-placeholder.png'"
                                 alt="relay avatar"
                             />
 

src/app/services/metadata.service.ts

@@ -20,18 +20,16 @@ export class MetadataService {
     private relayService: RelayService
   ) {}
 
-
   getMetadataStream(): Observable<any> {
     return this.metadataSubject.asObservable().pipe(throttleTime(2000));
   }
 
-
   private enqueueRequest(pubkey: string): void {
     this.requestQueue.add(pubkey);
     this.processQueue();
   }
 
-  async fetchMetadataForMultipleKeys(pubkeys: string[]): Promise<void> {
+  async fetchMetadataForMultipleKeys(pubkeys: string[]): Promise<any[]> {
     const filter: Filter = {
       kinds: [0],
       authors: pubkeys,
@@ -43,30 +41,36 @@ export class MetadataService {
 
       if (connectedRelays.length === 0) {
         console.error('No relays are connected.');
-        return;
+        return [];
       }
 
+      const metadataList: any[] = [];
+
       const sub = this.relayService.getPool().subscribeMany(connectedRelays, [filter], {
         onevent: async (event: NostrEvent) => {
           if (event.kind === 0) {
             try {
               const metadata = JSON.parse(event.content);
               await this.indexedDBService.saveUserMetadata(event.pubkey, metadata);
-              this.metadataSubject.next({ pubkey: event.pubkey, metadata });
+              metadataList.push({ pubkey: event.pubkey, metadata });
             } catch (error) {
               console.error('Error parsing metadata:', error);
             }
           }
         },
         oneose: () => {
-         }
+          console.log('Relay connection closed.');
+        }
       });
 
       setTimeout(() => {
         sub.close();
       }, 10 * 60 * 1000);
+
+      return metadataList;
     } catch (error) {
       console.error('Failed to fetch metadata for multiple keys:', error);
+      return [];
     }
   }
 
@@ -132,9 +136,6 @@ export class MetadataService {
     });
   }
 
-
-
-
   async fetchMetadataRealtime(pubkey: string): Promise<any> {
     await this.relayService.ensureConnectedRelays();
     const connectedRelays = this.relayService.getConnectedRelays();
@@ -166,7 +167,6 @@ export class MetadataService {
     });
   }
 
-
   async refreshAllStoredMetadata(): Promise<void> {
     const storedUsers = await this.indexedDBService.getAllUsers();
     if (!storedUsers || storedUsers.length === 0) {