Integrate leaderboard service

ls1intum · Sep 13, 2024 · 1916d90 · 1916d90
1 parent d207561
commit 1916d90
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 39 deletions.
diff --git a/webapp/src/app/@types/leaderboard.d.ts b/webapp/src/app/@types/leaderboard.d.ts
diff --git a/webapp/src/app/components/leaderboard/leaderboard.component.html b/webapp/src/app/components/leaderboard/leaderboard.component.html
@@ -11,7 +11,7 @@ <h1 class="text-3xl font-bold">Artemis Leaderboard</h1>
       <app-table>
         <thead appTableHeader>
           <tr appTableRow>
-            <th appTableHead class="w-[100px]">Contributor</th>
+            <th appTableHead>Contributor</th>
             <th appTableHead>Score</th>
             <th appTableHead>Activity</th>
           </tr>
@@ -24,16 +24,16 @@ <h1 class="text-3xl font-bold">Artemis Leaderboard</h1>
                 {{ entry.name }}
               </td>
               <td appTableCell>{{ entry.score }}</td>
-              <td appTableCell class="flex items-center gap-4">
+              <td appTableCell class="flex items-center gap-4" title="Changes Requested">
                 <div class="flex items-center gap-2">
                   <app-icon-pull-request-changes-requested />
-                  {{ entry.changes_requested }}
+                  {{ entry.changesRequested }}
                 </div>
-                <div class="flex items-center gap-2">
+                <div class="flex items-center gap-2" title="Approvals">
                   <app-icon-pull-request-approved />
                   {{ entry.approvals }}
                 </div>
-                <div class="flex items-center gap-2">
+                <div class="flex items-center gap-2" title="Comments">
                   <app-icon-pull-request-comment />
                   {{ entry.comments }}
                 </div>

diff --git a/webapp/src/app/components/leaderboard/leaderboard.component.ts b/webapp/src/app/components/leaderboard/leaderboard.component.ts
@@ -1,7 +1,6 @@
-import { HttpClient } from '@angular/common/http';
 import { ChangeDetectionStrategy, Component, computed, inject } from '@angular/core';
 import { injectQuery } from '@tanstack/angular-query-experimental';
-import { Leaderboard } from 'app/@types/leaderboard';
+import { LeaderboardEntry, LeaderboardService } from 'app/core/modules/openapi';
 import { PullRequestApprovedIconComponent } from 'app/ui/icons/PullRequestApprovedIcon.component';
 import { PullRequestChangesRequestedIconComponent } from 'app/ui/icons/PullRequestChangesRequestedIcon.component';
 import { PullRequestCommentIconComponent } from 'app/ui/icons/PullRequestCommentIcon.component';
@@ -15,18 +14,28 @@ import { TableRowDirective } from 'app/ui/table/table-row.directive';
 import { TableComponent } from 'app/ui/table/table.component';
 import { lastValueFrom } from 'rxjs';
 
-const defaultData: Leaderboard.Entry[] = [
-  { githubName: 'shadcn', name: 'I', score: 90, total: 100, changes_requested: 0, approvals: 0, comments: 0 },
-  { githubName: 'shadcn', name: 'A', score: 10, total: 100, changes_requested: 1, approvals: 0, comments: 0 },
-  { githubName: 'shadcn', name: 'B', score: 20, total: 100, changes_requested: 0, approvals: 1, comments: 0 },
-  { githubName: 'shadcn', name: 'C', score: 30, total: 100, changes_requested: 0, approvals: 0, comments: 1 },
-  { githubName: 'shadcn', name: 'D', score: 40, total: 100, changes_requested: 0, approvals: 0, comments: 0 },
-  { githubName: 'shadcn', name: 'E', score: 50, total: 100, changes_requested: 0, approvals: 0, comments: 0 },
-  { githubName: 'shadcn', name: 'F', score: 60, total: 100, changes_requested: 0, approvals: 0, comments: 0 },
-  { githubName: 'shadcn', name: 'G', score: 70, total: 100, changes_requested: 0, approvals: 0, comments: 0 },
-  { githubName: 'shadcn', name: 'H', score: 80, total: 100, changes_requested: 0, approvals: 0, comments: 0 }
+const defaultData: LeaderboardEntry[] = [
+  { githubName: 'shadcn', name: 'I', score: 90, total: 100, changesRequested: 0, approvals: 0, comments: 0 },
+  { githubName: 'shadcn', name: 'A', score: 10, total: 100, changesRequested: 1, approvals: 0, comments: 0 },
+  { githubName: 'shadcn', name: 'B', score: 20, total: 100, changesRequested: 0, approvals: 1, comments: 0 },
+  { githubName: 'shadcn', name: 'C', score: 30, total: 100, changesRequested: 0, approvals: 0, comments: 1 },
+  { githubName: 'shadcn', name: 'D', score: 40, total: 100, changesRequested: 0, approvals: 0, comments: 0 },
+  { githubName: 'shadcn', name: 'E', score: 50, total: 100, changesRequested: 0, approvals: 0, comments: 0 },
+  { githubName: 'shadcn', name: 'F', score: 60, total: 100, changesRequested: 0, approvals: 0, comments: 0 },
+  { githubName: 'shadcn', name: 'G', score: 70, total: 100, changesRequested: 0, approvals: 0, comments: 0 },
+  { githubName: 'shadcn', name: 'H', score: 80, total: 100, changesRequested: 0, approvals: 0, comments: 0 }
 ];
 
+const sortByScore = (a: LeaderboardEntry, b: LeaderboardEntry) => {
+  if (!b.score) {
+    return -1;
+  }
+  if (!a.score) {
+    return 1;
+  }
+  return b.score - a.score;
+};
+
 @Component({
   selector: 'app-leaderboard',
   standalone: true,
@@ -47,25 +56,17 @@ const defaultData: Leaderboard.Entry[] = [
   changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class LeaderboardComponent {
-  http = inject(HttpClient);
+  leaderboardService = inject(LeaderboardService);
 
   query = injectQuery(() => ({
     queryKey: ['leaderboard'],
-    queryFn: async () => lastValueFrom(this.http.get('http://127.0.0.1:8080/leaderboard')) as Promise<Leaderboard.Entry[]>,
+    queryFn: async () => lastValueFrom(this.leaderboardService.getLeaderboard()),
     gcTime: Infinity
   }));
-  // TODO: replace with leadboard service when merged
-  // pullrequest = inject(PullRequestService);
-
-  // query = injectQuery(() => ({
-  //   queryKey: ['leaderboard'],
-  //   queryFn: async () => lastValueFrom(this.pullrequest.getPullRequest(1)),
-  //   gcTime: Infinity
-  // }));
 
   leaderboard = computed(() => {
     let data = this.query.data() ?? defaultData;
-    data = data.sort((a, b) => b.score - a.score);
+    data = data.sort(sortByScore);
     return data;
   });
 }