From f10c3ab2d3f8fa2a9e42637381a48826b277282f Mon Sep 17 00:00:00 2001
From: Teriuihi <teriuihi@alttd.com>
Date: Thu, 10 Apr 2025 02:08:27 +0200
Subject: [PATCH] Refactor team component to use dynamic data loading

Replaced static member entries with dynamic rendering using `getTeamMembers` for better scalability. Added caching and data deduplication logic to optimize API calls. This enhances maintainability and reduces redundancy in the team component.
---
 frontend/src/app/team/team.component.html | 44 ++++++++++++++++++-----
 frontend/src/app/team/team.component.ts   | 28 ++++++++++-----
 2 files changed, 55 insertions(+), 17 deletions(-)

diff --git a/frontend/src/app/team/team.component.html b/frontend/src/app/team/team.component.html
index f6c0fd5..38ea691 100644
--- a/frontend/src/app/team/team.component.html
+++ b/frontend/src/app/team/team.component.html
@@ -12,17 +12,16 @@
     <section class="darkmodeSection">
       <div class="container teamContainer">
         <h2 class="sectionTitle">Management</h2>
-        <div class="member">
-          <img ngSrc="https://crafatar.com/avatars/55e46bc32a294c53850fdbd944dc5c5f?overlay"
-               alt="akastijn's Minecraft skin" height="160" width="160" style="width: 160px;">
-          <h2>akastijn</h2>
+        <div *ngFor="let members of getTeamMembers('owner') | async" class="member">
+          <img ngSrc="https://crafatar.com/avatars/{{members.uuid.replace('-', '')}}?overlay"
+               alt="{{members.name}}'s Minecraft skin" height="160" width="160" style="width: 160px;">
+          <h2>{{ members.name }}</h2>
           <p>Owner</p>
-          <p>{{ members }}</p>
         </div>
-        <div class="member">
-          <img ngSrc="https://crafatar.com/avatars/0b06c1b9ae5845d5af60731e4c788dc8?overlay"
-               alt="akalexu's Minecraft skin" height="160" width="160" style="width: 160px;">
-          <h2>akalexu</h2>
+        <div *ngFor="let members of getTeamMembers('manager') | async" class="member">
+          <img ngSrc="https://crafatar.com/avatars/{{members.uuid.replace('-', '')}}?overlay"
+               alt="{{members.name}}'s Minecraft skin" height="160" width="160" style="width: 160px;">
+          <h2>{{ members.name }}</h2>
           <p>Manager</p>
         </div>
       </div>
@@ -30,16 +29,43 @@
     <section class="darkmodeSectionThree">
       <div class="container teamContainer">
         <h2 class="sectionTitle">Admins</h2>
+        <div *ngFor="let members of getTeamMembers('admin') | async" class="member">
+          <img ngSrc="https://crafatar.com/avatars/{{members.uuid.replace('-', '')}}?overlay"
+               alt="{{members.name}}'s Minecraft skin" height="160" width="160" style="width: 160px;">
+          <h2>{{ members.name }}</h2>
+          <p>Admin</p>
+        </div>
       </div>
     </section>
     <section class="darkmodeSection">
       <div class="container teamContainer">
         <h2 class="sectionTitle">Head Moderators</h2>
+        <div *ngFor="let members of getTeamMembers('headmod') | async" class="member">
+          <img ngSrc="https://crafatar.com/avatars/{{members.uuid.replace('-', '')}}?overlay"
+               alt="{{members.name}}'s Minecraft skin" height="160" width="160" style="width: 160px;">
+          <h2>{{ members.name }}</h2>
+          <p>Admin</p>
+        </div>
       </div>
     </section>
     <section class="darkmodeSectionThree">
       <div class="container teamContainer">
         <h2 class="sectionTitle">Moderators</h2>
+        <div *ngFor="let members of getTeamMembers('moderator') | async" class="member">
+          <img ngSrc="https://crafatar.com/avatars/{{members.uuid.replace('-', '')}}?overlay"
+               alt="{{members.name}}'s Minecraft skin" height="160" width="160" style="width: 160px;">
+          <h2>{{ members.name }}</h2>
+        </div>
+      </div>
+    </section>
+    <section *ngIf="(getTeamMembers('trainee') | async)?.length  ?? 0 > 0" class="darkmodeSection">
+      <div class="container teamContainer">
+        <h2 class="sectionTitle">Trainees</h2>
+        <div *ngFor="let members of getTeamMembers('trainee') | async" class="member">
+          <img ngSrc="https://crafatar.com/avatars/{{members.uuid.replace('-', '')}}?overlay"
+               alt="{{members.name}}'s Minecraft skin" height="160" width="160" style="width: 160px;">
+          <h2>{{ members.name }}</h2>
+        </div>
       </div>
     </section>
   </main>
diff --git a/frontend/src/app/team/team.component.ts b/frontend/src/app/team/team.component.ts
index 52f9290..4203e83 100644
--- a/frontend/src/app/team/team.component.ts
+++ b/frontend/src/app/team/team.component.ts
@@ -1,9 +1,10 @@
 import {Component} from '@angular/core';
 import {ScrollService} from '../scroll/scroll.service';
-import {BASE_PATH, TeamMember, TeamService} from '../../api';
+import {BASE_PATH, Player, TeamService} from '../../api';
 import {CommonModule, NgOptimizedImage} from '@angular/common';
 import {HeaderComponent} from '../header/header.component';
 import {CookieService} from 'ngx-cookie-service';
+import {map, Observable, shareReplay} from 'rxjs';
 
 @Component({
   selector: 'app-team',
@@ -22,14 +23,25 @@ import {CookieService} from 'ngx-cookie-service';
   styleUrl: './team.component.scss'
 })
 export class TeamComponent {
-  public members: TeamMember[] = [];
+
+  private teamMembersCache: { [key: string]: Observable<Player[]> } = {};
 
   constructor(public scrollService: ScrollService, public teamApi: TeamService) {
-    console.log("TeamComponent")
-    teamApi.getTeamMembers("test").subscribe(res => {
-      console.log(res)
-      console.log("AHH")
-      this.members = res;
-    });
+  }
+
+  public getTeamMembers(team: string): Observable<Player[]> {
+    if (!this.teamMembersCache[team]) {
+      this.teamMembersCache[team] = this.teamApi.getTeamMembers(team).pipe(
+        map(res => this.removeDuplicates(res)),
+        shareReplay(1)
+      );
+    }
+    return this.teamMembersCache[team];
+  }
+
+  private removeDuplicates(array: Player[]): Player[] {
+    return array.filter((player, index, self) =>
+      index === self.findIndex((p) => p.uuid === player.uuid)
+    );
   }
 }