added ranking and connected with back

src/app/pages/ranking/ranking.component.ts

@@ -1,5 +1,7 @@
-import {Component} from '@angular/core';
-import {IonicModule} from "@ionic/angular";
+import {Component, inject, OnInit, signal} from '@angular/core';
+import {IonicModule, LoadingController, ToastController} from "@ionic/angular";
+import {GetUserDto, OverallrankingService, UsersService} from "../../services/api";
+import {firstValueFrom} from "rxjs";
 
 @Component({
     selector: 'app-ranking',
@@ -9,5 +11,37 @@ import {IonicModule} from "@ionic/angular";
         IonicModule
     ]
 })
-export class RankingComponent {
+export class RankingComponent implements OnInit {
+    private overallRankingService = inject(OverallrankingService);
+    private loadCtrl = inject(LoadingController);
+    private toastCtrl = inject(ToastController);
+
+    users = signal<GetUserDto[]>([]);
+
+    async ngOnInit() {
+        await this.fetchUsers();
+    }
+
+    async fetchUsers() {
+        const loading = await this.loadCtrl.create({
+            message: 'Chargement...',
+            duration: 1000,
+            spinner: 'circles'
+        });
+        await loading.present();
+
+        try {
+            const users = await firstValueFrom(this.overallRankingService.getOverallRankingEndpoint());
+            this.users.set(users);
+        } catch (e) {
+            const toast = await this.toastCtrl.create({
+                message: 'Impossible de charger les joueurs',
+                duration: 2000,
+                color: 'primary'
+            });
+            await toast.present();
+        }
+    }
 }
+
+//TODO: FAIRE NOS SERVICES POUR TOAST ET LOADING