added messages

package-lock.json

@@ -22,6 +22,7 @@
         "@openapitools/openapi-generator-cli": "^2.30.2",
         "@tailwindcss/postcss": "^4.2.1",
         "browser-image-compression": "^2.0.2",
+        "jwt-decode": "^4.0.0",
         "moment": "^2.30.1",
         "postcss": "^8.5.8",
         "rimraf": "^6.1.3",
@@ -7158,6 +7159,15 @@
       ],
       "license": "MIT"
     },
+    "node_modules/jwt-decode": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/jwt-decode/-/jwt-decode-4.0.0.tgz",
+      "integrity": "sha512-+KJGIyHgkGuIq3IEBNftfhW/LfWhXUIY6OmyVWjliu5KH1y0fw7VQ8YndE2O4qZdMSd9SqbnC8GOcZEy0Om7sA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      }
+    },
     "node_modules/kleur": {
       "version": "4.1.5",
       "resolved": "https://registry.npmjs.org/kleur/-/kleur-4.1.5.tgz",

package.json

@@ -36,6 +36,7 @@
     "@openapitools/openapi-generator-cli": "^2.30.2",
     "@tailwindcss/postcss": "^4.2.1",
     "browser-image-compression": "^2.0.2",
+    "jwt-decode": "^4.0.0",
     "moment": "^2.30.1",
     "postcss": "^8.5.8",
     "rimraf": "^6.1.3",

src/app/components/group-chat/group-chat.component.html

@@ -1,3 +0,0 @@
-<p>
-    group-chat works!
-</p>

src/app/components/group-chat/group-chat.component.ts

@@ -1,16 +0,0 @@
-import {Component, OnInit} from '@angular/core';
-
-@Component({
-    selector: 'app-group-chat',
-    templateUrl: './group-chat.component.html',
-    styleUrls: ['./group-chat.component.scss'],
-})
-export class GroupChatComponent implements OnInit {
-
-    constructor() {
-    }
-
-    ngOnInit() {
-    }
-
-}

src/app/components/message/message.component.html

@@ -1,3 +1,51 @@
-<p>
+@if (messages().length) {
-    message works!
+    @for (message of messages(); track message.id) {
-</p>
+        @if (message.userId === currentUser) {
+            <div class="flex flex-row-reverse items-end">
+                <div class="flex flex-col items-end">
+                    <div class="px-3.5 py-2 text-sm rounded-3xl rounded-br-sm bg-violet-700 text-white">
+                        {{ message.libelle }}
+                    </div>
+                    <span class="text-[10px] mt-0.5 mr-1">
+          {{ message.sendDate | date:'HH:mm' }}
+        </span>
+                </div>
+            </div>
+
+        } @else {
+            <div class="flex items-end gap-2">
+                <div class="w-8 h-8 rounded-full flex items-center justify-center text-xs mb-2 bg-teal-100 text-teal-700">
+                    {{ message.username.substring(0, 2) }}
+                </div>
+                <div class="flex flex-col">
+                <span class="text-[11px] mb-1 ml-1">
+                  {{ message.username }}
+                </span>
+                    <div class="px-3.5 py-2 text-sm rounded-3xl rounded-bl-sm border">
+                        {{ message.libelle }}
+                    </div>
+                    <span class="text-[10px] mt-0.5 mx-1">
+                  {{ message.sendDate | date:'HH:mm' }}
+                </span>
+                </div>
+            </div>
+        }
+    }
+} @else {
+    <ion-item lines="none" class="mt-[60%]" style="--background: #F7F6F2;">
+        <div class="flex flex-col items-center w-full gap-3">
+            <div class="relative w-14 h-14">
+                <div class="w-14 h-14 rounded-full bg-white border border-stone-200 flex items-center justify-center">
+                    <ion-icon name="chatbubble-ellipses-outline" class="text-2xl text-stone-400"></ion-icon>
+                </div>
+                <div class="absolute -bottom-0.5 -right-0.5 w-5 h-5 rounded-full bg-white border border-stone-200 flex items-center justify-center">
+                    <ion-icon name="moon-outline" class="text-[10px] text-stone-400"></ion-icon>
+                </div>
+            </div>
+            <div class="text-center flex flex-col gap-1">
+                <p class="m-0 text-sm font-medium text-stone-400">C'est bien calme par ici</p>
+                <p class="m-0 text-xs text-stone-300 leading-relaxed">Les messages du groupe apparaîtront ici</p>
+            </div>
+        </div>
+    </ion-item>
+}

src/app/components/message/message.component.ts

@@ -1,16 +1,58 @@
-import {Component, OnInit} from '@angular/core';
+import {Component, inject, input, OnInit, signal} from '@angular/core';
+import {GetGroupDetailsDto, GetMessageDto, MessagesService} from "../../services/api";
+import {firstValueFrom} from "rxjs";
+import {IonicModule, LoadingController, ToastController} from "@ionic/angular";
+import {AuthManageService} from "../../services/auth-manage";
+import {jwtDecode} from "jwt-decode";
+import {DatePipe} from "@angular/common";
+import {addIcons} from "ionicons";
+import {chatbubbleEllipsesOutline, moonOutline} from 'ionicons/icons';
+
+addIcons({
+    "chatbubble-ellipses-outline" : chatbubbleEllipsesOutline,
+    "moon-outline" : moonOutline,
+})
 
 @Component({
     selector: 'app-message',
     templateUrl: './message.component.html',
     styleUrls: ['./message.component.scss'],
+    imports: [
+        DatePipe,
+        IonicModule
+    ]
 })
 export class MessageComponent implements OnInit {
+    private messagesService = inject(MessagesService);
+    private authService = inject(AuthManageService);
+    private loadCtrl = inject(LoadingController);
+    private toastCtrl = inject(ToastController);
 
-    constructor() {
+    messages = signal<GetMessageDto[]>([]);
-    }
+    groupId = input.required<GetGroupDetailsDto["id"]>();
 
-    ngOnInit() {
+    currentUser = 0;
-    }
 
+    async ngOnInit() {
+        const loading = await this.loadCtrl.create({
+            message: 'Chargement...',
+            spinner: 'lines-sharp-small'
+        });
+        await loading.present();
+
+        try {
+            const messages = await firstValueFrom(this.messagesService.getMessagesEndpoint(this.groupId()));
+            this.messages.set(messages);
+            this.currentUser = Number(jwtDecode<any>(this.authService.getToken()).UserId);
+        }
+        catch {
+            const toast = await this.toastCtrl.create({
+                message: 'Impossible de charger les messages.',
+                duration: 2000,
+                color: 'danger'
+            });
+            await toast.present();
+        }
+        await loading.dismiss();
+    }
 }

src/app/pages/home/home.component.html

@@ -49,7 +49,7 @@
 
     @if (groupSelected()) {
         <app-modal>
-            test
+            <app-message [groupId]="groupSelected().id"></app-message>
         </app-modal>
     }
 </ion-content>

src/app/pages/home/home.component.ts

@@ -28,6 +28,7 @@ import {GalleryComponent} from "../../components/gallery/gallery.component";
 import {GroupsComponent} from "../../components/groups/groups.component";
 import {GroupFormComponent} from "../../components/group-form/group-form.component";
 import {GroupInfoComponent} from "../../components/group-info/group-info.component";
+import {MessageComponent} from "../../components/message/message.component";
 
 addIcons({
     'profile': personOutline,
@@ -59,6 +60,7 @@ type View = 'menu' | 'profile' | 'password' | 'designation' | 'gallery' | 'group
         GroupsComponent,
         GroupFormComponent,
         GroupInfoComponent,
+        MessageComponent,
     ]
 })
 export class HomeComponent implements OnInit {

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

@@ -11,17 +11,13 @@ import {firstValueFrom} from "rxjs";
         IonicModule
     ]
 })
-export class RankingComponent implements OnInit {
+export class RankingComponent {
     private overallRankingService = inject(OverallrankingService);
     private loadCtrl = inject(LoadingController);
     private toastCtrl = inject(ToastController);
 
     users = signal<GetUserDto[]>([]);
 
-    async ngOnInit() {
-        await this.fetchUsers();
-    }
-
     async ionViewWillEnter() {
         await this.fetchUsers();
     }

src/app/pages/social/social.component.ts

@@ -24,23 +24,10 @@ addIcons({
         SearchFriendComponent
     ]
 })
-export class SocialComponent implements OnInit {
+export class SocialComponent {
     private friendsState = inject(FriendsStateService);
     private loadCtrl = inject(LoadingController);
 
-    async ngOnInit() {
-        const loading = await this.loadCtrl.create({
-            message: 'Chargement...',
-            spinner: 'lines-sharp-small'
-        });
-        await loading.present();
-
-        await this.friendsState.fetchFriendsRequest();
-        await this.friendsState.fetchFriends();
-
-        await loading.dismiss();
-    }
-
     async ionViewWillEnter() {
         const loading = await this.loadCtrl.create({
             message: 'Chargement...',