Add some unoptimized load of friends

block-core · Nov 5, 2024 · e3d6d73 · e3d6d73
1 parent aa789b1
commit e3d6d73
Show file tree

Hide file tree

Showing 3 changed files with 77 additions and 16 deletions.
diff --git a/app/src/app/friends/friends.component.html b/app/src/app/friends/friends.component.html
@@ -36,16 +36,20 @@
     <mat-list>
       <!-- <div mat-subheader>Folders</div> -->
       @for (folder of friends; track folder) {
-      <mat-list-item>
-        <!-- <mat-icon matListItemAvatar>folder</mat-icon> -->
-        <mat-icon matListItemIcon>folder</mat-icon>
+      <mat-list-item class="friend-list-item">
+        <img
+          [routerLink]="['/profile', folder.data.did]"
+          matListItemIcon
+          [src]="folder.avatar | safeResourceUrl"
+          onerror="this.src='/avatar-placeholder.png';this.onerror='';"
+          alt="Avatar"
+          class="avatar-icon"
+        />
         <div matListItemContent>
-          <div matLine>{{ folder.data.did }}</div>
-          <!-- Primary text -->
-          <!-- <div matLine>{{ folder.record.dateCreated | date }}</div> -->
-          <!-- Secondary text -->
-          <!-- <div matLine>{{ folder }}</div> -->
-          <!-- Tertiary text -->
+          <div matLine [routerLink]="['/profile', folder.data.did]">
+            {{ folder.profile?.profile?.name }}
+            @if (folder.profile?.profile?.title) { ({{ folder.profile?.profile?.title }}) }
+          </div>
         </div>
         <div matListItemMeta>
           <button mat-icon-button [matMenuTriggerFor]="menuProfile">
@@ -64,12 +68,6 @@
             <span>Message</span>
           </button>
         </mat-menu>
-
-        <!-- <div class="mdc-list-item__end ng-star-inserted">
-          <button mat-icon-button [matMenuTriggerFor]="menuProfile">
-            <mat-icon>more_vert</mat-icon>
-          </button>
-        </div> -->
       </mat-list-item>
       }
     </mat-list>

diff --git a/app/src/app/friends/friends.component.scss b/app/src/app/friends/friends.component.scss
@@ -77,3 +77,16 @@ mat-card-actions button {
 .search-input {
   background-color: transparent;
 }
+
+.avatar-icon {
+  border-radius: 50%;
+}
+
+.friend-list-item {
+  cursor: pointer;
+}
+
+.friend-list-item:hover {
+  /* Use the Material Design hover color */
+  background-color: var(--mat-list-item-hover);
+}
diff --git a/app/src/app/friends/friends.component.ts b/app/src/app/friends/friends.component.ts
@@ -19,6 +19,8 @@ import { ConnectionEntry, ConnectionService } from '../connection.service';
 import { RequestComponent } from '../settings/connections/request.component';
 import { MatButtonToggleModule } from '@angular/material/button-toggle';
 import { FormsModule } from '@angular/forms';
+import { ProfileService } from '../profile.service';
+import { SafeUrlPipe } from '../shared/pipes/safe-url.pipe';
 
 @Component({
   selector: 'app-friends',
@@ -39,12 +41,13 @@ import { FormsModule } from '@angular/forms';
     RequestComponent,
     MatButtonToggleModule,
     FormsModule,
+    SafeUrlPipe,
   ],
   templateUrl: './friends.component.html',
   styleUrl: './friends.component.scss',
 })
 export class FriendsComponent {
-  friends: ConnectionEntry[] = [];
+  friends: ConnectionEntry[] | any[] = [];
 
   requests: ConnectionEntry[] = [];
 
@@ -58,8 +61,14 @@ export class FriendsComponent {
 
   app = inject(AppService);
 
+  profile = inject(ProfileService);
+
   viewMode = model<'list' | 'thumbnail'>('list');
 
+  private avatarUrls: { [key: string]: string } = {};
+
+  private profiles: { [key: string]: any } = {};
+
   constructor() {
     this.layout.resetActions();
 
@@ -76,6 +85,17 @@ export class FriendsComponent {
     });
   }
 
+  // async avatar(did: string | undefined) {
+  //   console.log('Load avatar:', did);
+  //   if (did == null) {
+  //     return;
+  //   }
+
+  //   const avatar = await this.profile.loadAvatar(did);
+  //   console.log('Avatar:', avatar);
+  //   return avatar?.avatar;
+  // }
+
   async loadRequests() {
     this.requests = this.connection.friendRequests();
   }
@@ -87,6 +107,36 @@ export class FriendsComponent {
 
     // Get a local reference to friends, we probably will add features such as sorting in the future.
     this.friends = this.connection.friends();
+
+    for (var friend of this.friends) {
+      // This is a temporary solution to load the profile and avatars,
+      // it's not really very optimiazed at all.
+      const profile = await this.profile.loadProfile(friend.data.did!);
+      if (profile) {
+        this.profiles[friend.data.did!] = profile;
+      }
+
+      const avatar = await this.profile.loadAvatar(friend.data.did!);
+      // const avatar = await this.avatar(friend.data.did);
+      if (avatar && avatar.avatar) {
+        this.avatarUrls[friend.data.did!] = avatar.avatar;
+      }
+
+      const f = friend as any;
+
+      f.profile = profile;
+      f.avatar = avatar.avatar;
+    }
+
+    console.log(this.avatarUrls);
+
+    // this.friends.forEach(async (friend) => {
+
+    // });
+  }
+
+  getAvatarUrl(did: string): string {
+    return this.avatarUrls[did] || '/avatar-placeholder.png';
   }
 
   toggleViewMode() {