Changed method to see pictures

android/app/src/main/AndroidManifest.xml

@@ -38,4 +38,6 @@
     <!-- Permissions -->
 
     <uses-permission android:name="android.permission.INTERNET" />
+    <uses-permission android:name="android.permission.CAMERA"/>
+    <uses-permission android:name="android.permission.READ_MEDIA_IMAGES" />
 </manifest>

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/app.routes.ts

@@ -14,7 +14,7 @@ export const routes: Routes = [
             },
             {
                 path: 'groups',
-                loadComponent: () => import('./pages/groups/groups.component').then(m => m.GroupsComponent)
+                loadComponent: () => import('./pages/publication/publication.component').then(m => m.PublicationComponent)
             },
             {
                 path: 'ranking',

src/app/components/challenge-card/challenge-card.component.html

@@ -3,11 +3,11 @@
     <div class="grid grid-cols-5 items-center">
 
         <h3 class="col-span-4 text-base font-semibold text-gray-900 m-0">
-            {{ data().label }}
+            {{ challenge().label }}
         </h3>
     </div>
 
-    <p class="text-[11px] text-gray-500 leading-relaxed">{{ data().libelle }}</p>
+    <p class="text-[11px] text-gray-500 leading-relaxed">{{ challenge().libelle }}</p>
 
     <div class="grid grid-cols-5 items-center">
         <span class="col-span-4 text-[11px] text-gray-500">
@@ -41,11 +41,11 @@
             <div class="mt-4 bg-white rounded-2xl shadow-sm p-4 space-y-3">
                 <div class="grid grid-cols-5 items-center">
                     <h3 class="col-span-4 text-base font-semibold text-gray-900 m-0">
-                        {{ data().label }}
+                        {{ challenge().label }}
                     </h3>
                 </div>
 
-                <p class="text-[11px] text-gray-500 leading-relaxed">{{ data().libelle }}</p>
+                <p class="text-[11px] text-gray-500 leading-relaxed">{{ challenge().libelle }}</p>
             </div>
 
             <app-tooltip title="Aucun malus si non réalisé"
@@ -55,7 +55,7 @@
                 <app-proof-form #proofForm></app-proof-form>
             </div>
 
-            <ion-button expand="block" (click)="sendProof(data().id)">Soumettre ma preuve</ion-button>
+            <ion-button expand="block" (click)="sendProof(challenge().id)">Soumettre ma preuve</ion-button>
 
         </ion-content>
     </ng-template>

src/app/components/challenge-card/challenge-card.component.ts

@@ -1,10 +1,15 @@
-import {Component, inject, input, signal, viewChild} from '@angular/core';
+import {Component, inject, input, viewChild} from '@angular/core';
 import {IonicModule, LoadingController, ToastController} from "@ionic/angular";
 import {GetRandomChallengeDto, RandomchallengesService} from "../../services/api";
 import {firstValueFrom} from "rxjs";
 import {TooltipComponent} from "../tooltip/tooltip.component";
 import {ProofFormComponent} from "../proof-form/proof-form.component";
-import {SignOnFormComponent} from "../sign-on-form/sign-on-form.component";
+import {addIcons} from "ionicons";
+import {checkmarkCircleOutline} from "ionicons/icons";
+
+addIcons({
+    "checkmark-circle": checkmarkCircleOutline,
+})
 
 @Component({
     selector: 'app-challenge-card',
@@ -21,8 +26,7 @@ export class ChallengeCardComponent {
     private toastCtrl = inject(ToastController);
     private loadCtrl = inject(LoadingController);
 
-    data = input.required<GetRandomChallengeDto>();
-
+    challenge = input.required<GetRandomChallengeDto>();
     proof = viewChild<ProofFormComponent>('proofForm');
 
     isModalOpen = false;
@@ -60,10 +64,10 @@ export class ChallengeCardComponent {
                 color: 'success'
             });
             await toast.present();
-        } catch {
+        } catch (e) {
             this.isModalOpen = false;
             const toast = await this.toastCtrl.create({
-                message: 'Tu as déjà déposé une preuve pour ce défi',
+                message: e.error ?? "Impossible de déposer une preuve",
                 duration: 2000,
                 color: 'danger'
             });

src/app/components/challenges-accomplished/challenges-accomplished.component.html

@@ -8,7 +8,6 @@
                         <p class="m-0 mt-1 text-xs text-gray-500">{{ challenge.challengeDescription }}</p>
                     </div>
                     <div class="text-right shrink-0">
-                        <p class="m-0 text-xs text-gray-500">{{ converterHours(challenge.challengeDuration) }}</p>
                         <p class="m-0 mt-1 text-xs text-gray-400">{{ challenge.challengeStartDate }}</p>
                     </div>
                 </div>

src/app/components/challenges-accomplished/challenges-accomplished.component.ts

@@ -12,28 +12,4 @@ import {GetUserChallengeDto} from "../../services/api";
 })
 export class ChallengesAccomplishedComponent {
     userChallenges = input.required<GetUserChallengeDto[]>();
-
-    converterHours(hours: number) {
-        const day = Math.floor(hours / 24);
-        const week = Math.floor(day / 7);
-        const month = Math.floor(week / 4);
-        const year = Math.floor(month / 12);
-
-        switch (true) {
-            case year > 0:
-                return `${year} an${year > 1 ? 's' : ''}`;
-
-            case month > 0:
-                return `${month} mois`;
-
-            case week > 0:
-                return `${week} semaine${week > 1 ? 's' : ''}`;
-
-            case day > 0:
-                return `${day} jour${day > 1 ? 's' : ''}`;
-
-            default:
-                return `${hours} heure${hours > 1 ? 's' : ''}`;
-        }
-    }
 }

src/app/components/friend-request/friend-request.component.html

@@ -1,5 +1,5 @@
-@if (friendsRequest().length > 0) {
-    <div class="rounded-xl px-5 m-3 bg-white overflow-auto font-mono border-1 border-gray-300">
+@if (friendsRequest().length) {
+    <div class="rounded-xl px-5 m-3 bg-white overflow-auto font-mono border border-gray-300">
         <ion-list>
             @for (request of friendsRequest(); track request.userId; let i = $index) {
                 @if (i == friendsRequest().length - 1) {
@@ -37,9 +37,15 @@
         </ion-list>
     </div>
 } @else {
-    <div class="flex justify-center items-center p-4">
-        <p class="text-center text-sm italic text-gray-500 font-serif">
-            Vous n'avez aucune demande d'ami
-        </p>
-    </div>
+    <ion-item lines="none" class="border border-stone-200 rounded-xl m-3" style="--background: #fafaf8;">
+        <div class="flex flex-col items-center w-full px-10 py-20 gap-3">
+            <div class="w-10 h-10 rounded-full bg-stone-100 border border-stone-200 flex items-center justify-center">
+                <ion-icon name="people-outline" style="color:#a8a090; font-size:20px;"></ion-icon>
+            </div>
+            <div class="text-center">
+                <p class="m-0 text-sm font-medium text-stone-400">Ajoutez vos amis</p>
+                <p class="m-0 mt-1 text-xs text-stone-300 leading-relaxed">Vos demandes d'amis apparaîtront ici</p>
+            </div>
+        </div>
+    </ion-item>
 }

src/app/components/friend-request/friend-request.component.ts

@@ -1,6 +1,6 @@
 import {Component, inject} from '@angular/core';
 import {IonicModule, LoadingController, ToastController} from "@ionic/angular";
-import {checkmarkCircleOutline, closeCircleOutline} from 'ionicons/icons';
+import {checkmarkCircleOutline, closeCircleOutline, peopleOutline} from 'ionicons/icons';
 import {addIcons} from "ionicons";
 import {PipeComponent} from "../pipe/pipe.component";
 import {FriendsService, GetFriendRequestDto} from "../../services/api";
@@ -9,7 +9,8 @@ import {FriendsStateService} from "../../services/friends-state";
 
 addIcons({
     'check': checkmarkCircleOutline,
-    'close': closeCircleOutline
+    'close': closeCircleOutline,
+    'people-outline': peopleOutline
 });
 
 @Component({

src/app/components/friends/friends-list.component.html

@@ -1,5 +1,5 @@
 @if (friends().length) {
-    <div class="rounded-xl px-5 m-3 bg-white  font-mono border-1 border-gray-300">
+    <div class="rounded-xl px-5 m-3 bg-white  font-mono border border-gray-300">
         <ion-list>
             @for (friend of friends(); track friend.friendId; let i = $index) {
                 @if (i == friends().length - 1) {
@@ -35,11 +35,17 @@
         </ion-list>
     </div>
 } @else {
-    <div class="flex justify-center items-center p-4">
-        <p class="text-center text-sm italic text-gray-500 font-serif">
-            C'est plus marrant à plusieurs, ajoute des amis !
-        </p>
-    </div>
+    <ion-item lines="none" class="border border-stone-200 rounded-xl m-3" style="--background: #fafaf8;">
+        <div class="flex flex-col items-center w-full px-10 py-20 gap-3">
+            <div class="w-10 h-10 rounded-full bg-stone-100 border border-stone-200 flex items-center justify-center">
+                <ion-icon name="people" style="color:#a8a090; font-size:20px;"></ion-icon>
+            </div>
+            <div class="text-center">
+                <p class="m-0 text-sm font-medium text-stone-400">Ajoutez vos amis</p>
+                <p class="m-0 mt-1 text-xs text-stone-300 leading-relaxed">Vos amis apparaîtront ici</p>
+            </div>
+        </div>
+    </ion-item>
 }
 
 <ion-modal [isOpen]="isModalOpen">

src/app/components/friends/friends-list.component.ts

@@ -1,6 +1,6 @@
-import {Component, inject, OnInit, signal} from '@angular/core';
+import {Component, inject, signal} from '@angular/core';
 import {IonicModule, LoadingController, ToastController} from "@ionic/angular";
-import {closeCircleOutline} from 'ionicons/icons';
+import {closeCircleOutline, peopleOutline} from 'ionicons/icons';
 import {addIcons} from "ionicons";
 import {FriendsService, GetUserDto, UsersService} from "../../services/api";
 import {firstValueFrom} from "rxjs";
@@ -9,6 +9,7 @@ import {GenericUserInfoComponent} from "../generic-user-info/generic-user-info.c
 
 addIcons({
     'close': closeCircleOutline,
+    'people': peopleOutline
 });
 
 @Component({

src/app/components/gallery/gallery.component.html

@@ -3,7 +3,7 @@
         <div class="bg-white rounded-lg p-2 shadow-sm border border-gray-200 overflow-scroll max-h-full">
             <div class="grid grid-cols-4 gap-3">
                 @for (p of proofs(); track p) {
-                    <img [src]="'data:image/jpeg;base64,' + p.proof"
+                    <img [src]="p.proof"
                          class="w-20 h-20 object-cover"
                          alt=""
                          (click)="openProof(p.proof)"
@@ -18,7 +18,7 @@
                 <ion-icon name="close-circle-outline"></ion-icon>
             </button>
 
-            <img [src]="'data:image/jpeg;base64,' + selectedProof()"
+            <img [src]="selectedProof()"
                  class="w-[90%] h-[90%] object-cover rounded-md mt-10"
                  alt=""
             />

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/group-info/group-info.component.ts

@@ -113,8 +113,8 @@ export class GroupInfoComponent implements OnInit {
         const oldGroup = this.group().id;
 
         try {
-           await firstValueFrom(this.groupsService.deleteGroupEndpoint(oldGroup));
-           this.idGroup.emit(oldGroup);
+            await firstValueFrom(this.groupsService.deleteGroupEndpoint(oldGroup));
+            this.idGroup.emit(oldGroup);
             const toast = await this.toastCtrl.create({
                 message: 'Groupe supprimé',
                 duration: 2000,

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

@@ -1,3 +1,8 @@
-<p>
-    message-form works!
-</p>
+<form [formGroup]="messageForm">
+    <ion-item lines="none" class="rounded-2xl border border-stone-200 mt-2">
+        <ion-input placeholder="Envoyer un message..." formControlName="libelle"></ion-input>
+        <ion-button style="--background: white" (click)="sendMessageOnGroup()">
+            <ion-icon name="send-outline" class="text-xl text-stone-400"></ion-icon>
+        </ion-button>
+    </ion-item>
+</form>

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

@@ -1,16 +1,66 @@
-import {Component, OnInit} from '@angular/core';
+import {Component, inject, input} from '@angular/core';
+import {IonicModule, LoadingController, ToastController} from "@ionic/angular";
+import {FormControl, FormGroup, ReactiveFormsModule, Validators} from "@angular/forms";
+import {addIcons} from "ionicons";
+import {sendOutline} from 'ionicons/icons';
+import {GetGroupDetailsDto, MessagesService} from "../../services/api";
+import {firstValueFrom} from "rxjs";
+
+addIcons({
+    "send-outline": sendOutline
+})
 
 @Component({
     selector: 'app-message-form',
     templateUrl: './message-form.component.html',
     styleUrls: ['./message-form.component.scss'],
+    imports: [
+        IonicModule,
+        ReactiveFormsModule
+    ]
 })
-export class MessageFormComponent implements OnInit {
+export class MessageFormComponent {
+    private messagesService = inject(MessagesService);
+    private loadCtrl = inject(LoadingController);
+    private toastCtrl = inject(ToastController);
 
-    constructor() {
+    groupId = input.required<GetGroupDetailsDto["id"]>();
+
+    messageForm: FormGroup = new FormGroup({
+        libelle: new FormControl<string>(null, [Validators.required]),
+    })
+
+    async sendMessageOnGroup() {
+        const loading = await this.loadCtrl.create({
+            message: 'Envoi...',
+            spinner: 'lines-sharp-small'
+        });
+        await loading.present();
+
+        if (this.messageForm.invalid) {
+            this.messageForm.reset();
+            const toast = await this.toastCtrl.create({
+                message: 'Message incorrect',
+                duration: 2000,
+                color: 'danger'
+            });
+            await toast.present();
+
+            return;
+        }
+
+        try {
+            await firstValueFrom(this.messagesService.sendMessageEndpoint(this.groupId(), this.messageForm.getRawValue()));
+            this.messageForm.reset();
+        } catch {
+            const toast = await this.toastCtrl.create({
+                message: 'Impossible d\'envoyer le messages.',
+                duration: 2000,
+                color: 'danger'
+            });
+            await toast.present();
+            this.messageForm.reset();
+        }
+        await loading.dismiss();
     }
-
-    ngOnInit() {
-    }
-
 }

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

@@ -1,3 +1,24 @@
-<p>
-    message works!
-</p>
+@if (messages().length) {
+    <div class="overflow-scroll h-11/12">
+        <app-messages-list [messages]="messages()"></app-messages-list>
+    </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>
+}
+
+<app-message-form [groupId]="groupId()"></app-message-form>

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

@@ -1,16 +1,60 @@
-import {Component, OnInit} from '@angular/core';
+import {Component, inject, input, OnDestroy, OnInit} from '@angular/core';
+import {GetGroupDetailsDto, MessagesService} from "../../services/api";
+import {firstValueFrom} from "rxjs";
+import {IonicModule, LoadingController, ToastController} from "@ionic/angular";
+import {addIcons} from "ionicons";
+import {chatbubbleEllipsesOutline, moonOutline} from 'ionicons/icons';
+import {ChatService} from "../../services/chat-service";
+import {MessagesListComponent} from "../messages-list/messages-list.component";
+import {MessageFormComponent} from "../message-form/message-form.component";
+
+addIcons({
+    "chatbubble-ellipses-outline": chatbubbleEllipsesOutline,
+    "moon-outline": moonOutline,
+})
 
 @Component({
     selector: 'app-message',
     templateUrl: './message.component.html',
     styleUrls: ['./message.component.scss'],
+    imports: [
+        IonicModule,
+        MessagesListComponent,
+        MessageFormComponent
+    ]
 })
-export class MessageComponent implements OnInit {
+export class MessageComponent implements OnInit, OnDestroy {
+    private messagesService = inject(MessagesService);
+    private loadCtrl = inject(LoadingController);
+    private toastCtrl = inject(ToastController);
+    private chatService = inject(ChatService);
 
-    constructor() {
+    messages = this.chatService.messages;
+    groupId = input.required<GetGroupDetailsDto["id"]>();
+
+    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.chatService.setMessages(messages);
+            await this.chatService.connect(this.groupId());
+        } catch {
+            const toast = await this.toastCtrl.create({
+                message: 'Impossible de charger les messages.',
+                duration: 2000,
+                color: 'danger'
+            });
+            await toast.present();
+        }
+        await loading.dismiss();
     }
 
-    ngOnInit() {
+    async ngOnDestroy() {
+        await this.chatService.disconnect();
     }
-
 }

src/app/components/messages-list/messages-list.component.html

@@ -0,0 +1,36 @@
+<div class="m-3">
+    <app-title-part textInfo="Début de la conversation"></app-title-part>
+</div>
+
+@for (message of messages(); track message.id) {
+    @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 max-w-xs">
+                    {{ message.libelle }}
+                </div>
+                <span class="text-[10px] mt-0.5 mr-1 mb-0.5">
+                  {{ 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 max-w-xs">
+                {{ 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 mb-0.5">
+                  {{ message.sendDate | date:'HH:mm' }}
+                </span>
+            </div>
+        </div>
+    }
+}

src/app/components/messages-list/messages-list.component.ts

@@ -0,0 +1,24 @@
+import {Component, inject, input} from '@angular/core';
+import {DatePipe} from "@angular/common";
+import {IonicModule} from "@ionic/angular";
+import {GetMessageDto} from "../../services/api";
+import {jwtDecode} from "jwt-decode";
+import {AuthManageService} from "../../services/auth-manage";
+import {TitlePartComponent} from "../title-part/title-part.component";
+
+@Component({
+    selector: 'app-messages-list',
+    templateUrl: './messages-list.component.html',
+    styleUrls: ['./messages-list.component.scss'],
+    imports: [
+        DatePipe,
+        IonicModule,
+        TitlePartComponent
+    ]
+})
+export class MessagesListComponent {
+    private authService = inject(AuthManageService);
+
+    messages = input.required<GetMessageDto[]>();
+    currentUser = Number(jwtDecode<any>(this.authService.getToken()).UserId);
+}

src/app/components/navbar/navbar.component.html

@@ -10,7 +10,7 @@
         </ion-tab-button>
 
         <ion-tab-button tab="groups" routerLink="/groups">
-            <ion-icon name="chatbubbles-outline"></ion-icon>
+            <ion-icon name="globe-outline"></ion-icon>
         </ion-tab-button>
 
         <ion-tab-button tab="ranking" routerLink="/ranking">

src/app/components/navbar/navbar.component.ts

@@ -1,12 +1,12 @@
 import {Component} from '@angular/core';
 import {IonicModule} from "@ionic/angular";
 import {addIcons} from 'ionicons';
-import {homeOutline, peopleOutline, chatbubblesOutline, statsChartOutline} from 'ionicons/icons';
+import {homeOutline, peopleOutline, globeOutline, statsChartOutline} from 'ionicons/icons';
 
 addIcons({
     'home-outline': homeOutline,
     'people-outline': peopleOutline,
-    'chatbubbles-outline': chatbubblesOutline,
+    'globe-outline': globeOutline,
     'stats-chart-outline': statsChartOutline
 });
 

src/app/components/post/post.component.html

@@ -0,0 +1,80 @@
+<ion-segment>
+    <ion-segment-button value="first" content-id="global">
+        <ion-label>Général</ion-label>
+    </ion-segment-button>
+    <ion-segment-button value="second" content-id="friends">
+        <ion-label>Amis</ion-label>
+    </ion-segment-button>
+</ion-segment>
+<ion-segment-view>
+    <ion-segment-content id="global">
+        @for (post of localPosts(); track post.id) {
+            <ion-item lines="full">
+                <div class="mt-2">
+                    <div class="flex items-center gap-2 p-3">
+                        <div class="w-8 h-8 rounded-full flex items-center justify-center text-xs bg-teal-100 text-teal-700 max-w-xs">
+                            {{ post.username.substring(0, 2) }}
+                        </div>
+                        <span class="text-lg font-mono ml-2">{{ post.username }}</span>
+                    </div>
+
+                    <div class="aspect-square overflow-hidden p-1">
+                        <img [src]="post.proof"
+                             alt=""
+                             class="w-full h-full object-cover"/>
+                    </div>
+
+                    <div class="px-3 py-3">
+                        <div class="flex items-center gap-2 mb-1">
+                            <button class="flex items-center p-0 bg-transparent border-none cursor-pointer"
+                                    (click)="likePost(post.id)">
+                                @if (post.isLiked) {
+                                    <ion-icon name="heart" class="text-red-700 text-2xl"></ion-icon>
+                                } @else {
+                                    <ion-icon name="heart-outline" class="text-gray-500 text-2xl"></ion-icon>
+                                }
+                            </button>
+                            <span class="text-xs text-gray-400">{{ post.likes }} Likes</span>
+                        </div>
+                        <p class="text-sm text-gray-500 leading-snug italic">{{ post.libelle }}</p>
+                    </div>
+                </div>
+            </ion-item>
+        }
+    </ion-segment-content>
+    <ion-segment-content id="friends">
+        @for (post of postsFriends(); track post.id) {
+            <ion-item lines="full">
+                <div class="mt-2">
+                    <div class="flex items-center gap-2 p-3">
+                        <div class="w-8 h-8 rounded-full flex items-center justify-center text-xs bg-teal-100 text-teal-700 max-w-xs">
+                            {{ post.username.substring(0, 2) }}
+                        </div>
+                        <span class="text-lg font-mono ml-2">{{ post.username }}</span>
+                    </div>
+
+                    <div class="aspect-square overflow-hidden p-1">
+                        <img [src]="post.proof"
+                             alt=""
+                             class="w-full h-full object-cover"/>
+                    </div>
+
+                    <div class="px-3 py-3">
+                        <div class="flex items-center gap-2 mb-1">
+                            <button class="flex items-center p-0 bg-transparent border-none cursor-pointer"
+                                    (click)="likePost(post.id)">
+                                @if (post.isLiked) {
+                                    <ion-icon name="heart" class="text-red-700 text-2xl"></ion-icon>
+                                } @else {
+                                    <ion-icon name="heart-outline" class="text-gray-500 text-2xl"></ion-icon>
+                                }
+                            </button>
+                            <span class="text-xs text-gray-400">{{ post.likes }} Likes</span>
+                        </div>
+                        <p class="text-sm text-gray-500 leading-snug italic">{{ post.libelle }}</p>
+                    </div>
+                </div>
+            </ion-item>
+        }
+    </ion-segment-content>
+</ion-segment-view>

src/app/components/post/post.component.ts

@@ -0,0 +1,82 @@
+import {Component, inject, input, OnInit, signal} from '@angular/core';
+import {FriendsService, GetFriendDto, GetPostDto, PostsService} from "../../services/api";
+import {firstValueFrom} from "rxjs";
+import {IonicModule, LoadingController, ToastController} from "@ionic/angular";
+import {heart, heartOutline} from 'ionicons/icons';
+import {addIcons} from "ionicons";
+
+addIcons({
+    "heart": heart,
+    "heartOutline": heartOutline,
+});
+
+@Component({
+    selector: 'app-post',
+    templateUrl: './post.component.html',
+    styleUrls: ['./post.component.scss'],
+    imports: [
+        IonicModule
+    ]
+})
+export class PostComponent implements OnInit {
+    private postsService = inject(PostsService);
+    private friendsService = inject(FriendsService);
+    private loadCtrl = inject(LoadingController);
+    private toastCtrl = inject(ToastController);
+
+    friends = signal<GetFriendDto[]>([]);
+
+    posts = input.required<GetPostDto[]>();
+    localPosts = signal<GetPostDto[]>([]);
+    postsFriends = signal<GetPostDto[]>([]);
+
+    async ngOnInit() {
+        const loading = await this.loadCtrl.create({
+            message: 'Chargement...',
+            spinner: 'lines-sharp-small'
+        });
+        await loading.present();
+
+        this.localPosts.set(this.posts());
+
+        try {
+            const friends = await firstValueFrom(this.friendsService.getAllFriendsEndpoint());
+            this.friends.set(friends);
+            this.postsFriends.set(this.localPosts().filter(post => this.friends().map(x => x.friendId).includes(post.userId)));
+        } catch {
+            const toast = await this.toastCtrl.create({
+                message: 'Erreur lors du chargement des amis.',
+                duration: 2000,
+                color: 'danger'
+            });
+            await toast.present();
+        }
+        await loading.dismiss();
+    }
+
+    async likePost(postId: number) {
+        this.localPosts.update(x => x.map(x => x.id != postId ? x : {
+            ...x,
+            likes: x.isLiked ? x.likes - 1 : x.likes + 1,
+            isLiked: !x.isLiked
+        }));
+
+        try {
+            await firstValueFrom(this.postsService.patchLikeEndpoint(postId));
+            this.postsFriends.set(this.localPosts());
+        } catch {
+            this.localPosts.update(x => x.map(x => x.id != postId ? x : {
+                ...x,
+                likes: x.isLiked ? x.likes + 1 : x.likes - 1,
+                isLiked: !x.isLiked
+            }));
+
+            const toast = await this.toastCtrl.create({
+                message: 'Impossible d\'aimer ce contenu',
+                duration: 2000,
+                color: 'danger'
+            });
+            await toast.present();
+        }
+    }
+}

src/app/components/profil-form/profil-form.component.ts

@@ -90,9 +90,9 @@ export class ProfilFormComponent implements OnInit {
 
             await loading2.dismiss();
             await toast.present();
-        } catch {
+        } catch (e) {
             const toast = await this.toastCtrl.create({
-                message: 'Modification impossible',
+                message: e.error ?? 'Modification impossible',
                 duration: 2000,
                 color: 'danger'
             });

src/app/pages/groups/groups.component.html

@@ -1,8 +0,0 @@
-<ion-header>
-    <ion-toolbar>
-        <ion-title class="font-mono">Mes groupes</ion-title>
-    </ion-toolbar>
-</ion-header>
-
-<ion-content style="--background: #f7f6f2;">
-</ion-content>

src/app/pages/groups/groups.component.ts

@@ -1,13 +0,0 @@
-import {Component} from '@angular/core';
-import {IonicModule} from "@ionic/angular";
-
-@Component({
-    selector: 'app-groups',
-    templateUrl: './groups.component.html',
-    styleUrls: ['./groups.component.scss'],
-    imports: [
-        IonicModule
-    ]
-})
-export class GroupsComponent {
-}

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

@@ -39,7 +39,7 @@
 <ion-content style="--background: #f7f6f2;">
     <div class="mt-4">
         <app-title-part textInfo="Défi bonus du jour"></app-title-part>
-        <app-challenge-card [data]="randomChallenge()"></app-challenge-card>
+        <app-challenge-card [challenge]="randomChallenge()"></app-challenge-card>
     </div>
 
     <div class="mt-4">
@@ -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

@@ -5,8 +5,7 @@ import {personOutline, addOutline, settingsOutline, informationCircleOutline} fr
 import {TitlePartComponent} from "../../components/title-part/title-part.component";
 import {ChallengeCardComponent} from "../../components/challenge-card/challenge-card.component";
 import {
-    AchievementsService, CreateGroupDto,
-    GetAchievementDto, GetGroupDetailsDto, GetGroupDto,
+    AchievementsService, GetAchievementDto, GetGroupDetailsDto, GetGroupDto,
     GetRandomChallengeDto,
     GetUserChallengeDto,
     GetUserDetailsDto, GroupsService,
@@ -28,6 +27,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 +59,7 @@ type View = 'menu' | 'profile' | 'password' | 'designation' | 'gallery' | 'group
         GroupsComponent,
         GroupFormComponent,
         GroupInfoComponent,
+        MessageComponent,
     ]
 })
 export class HomeComponent implements OnInit {
@@ -98,7 +99,7 @@ export class HomeComponent implements OnInit {
             this.groups.set(groups);
         } catch {
             const toast = await this.toastCtrl.create({
-                message: 'Impossible de générer un défi aléatoire',
+                message: 'Impossible de générer un défi',
                 duration: 2000,
                 color: 'danger'
             });

src/app/pages/login/login.component.ts

@@ -101,8 +101,9 @@ export class LoginComponent implements OnInit {
         try {
             const users = this.user().userForm.getRawValue();
             await firstValueFrom(this.usersService.createUserEndpoint(users));
+            await loading.dismiss();
             return true;
-        } catch (e) {
+        } catch {
             const toast = await this.toastCtrl.create({
                 message: 'Email ou mot de passe incorrect',
                 duration: 2000,

src/app/pages/publication/publication.component.html

@@ -0,0 +1,28 @@
+<ion-header>
+    <ion-toolbar>
+        <ion-title class="font-mono">Publications</ion-title>
+    </ion-toolbar>
+</ion-header>
+
+<ion-content style="--background: #f7f6f2;">
+    @if (posts().length) {
+        <app-post [posts]="posts()"></app-post>
+    } @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="planet" 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 vide par ici</p>
+                    <p class="m-0 text-xs text-stone-300 leading-relaxed">Les challengers dorment encore</p>
+                </div>
+            </div>
+        </ion-item>
+    }
+</ion-content>

src/app/pages/publication/publication.component.ts

@@ -0,0 +1,50 @@
+import {Component, inject, signal} from '@angular/core';
+import {IonicModule, LoadingController, ToastController} from "@ionic/angular";
+import {GetPostDto, PostsService} from "../../services/api";
+import {firstValueFrom} from "rxjs";
+import {PostComponent} from "../../components/post/post.component";
+import {planet, moonOutline} from 'ionicons/icons';
+import {addIcons} from "ionicons";
+
+addIcons({
+    "planet": planet,
+    "moon-outline": moonOutline,
+})
+
+@Component({
+    selector: 'app-publication',
+    templateUrl: './publication.component.html',
+    styleUrls: ['./publication.component.scss'],
+    imports: [
+        IonicModule,
+        PostComponent
+    ]
+})
+export class PublicationComponent {
+    private postsService = inject(PostsService);
+    private loadCtrl = inject(LoadingController);
+    private toastCtrl = inject(ToastController);
+
+    posts = signal<GetPostDto[]>([]);
+
+    async ionViewWillEnter() {
+        const loading = await this.loadCtrl.create({
+            message: 'Chargement...',
+            spinner: 'lines-sharp-small'
+        });
+        await loading.present();
+
+        try {
+            const posts = await firstValueFrom(this.postsService.getAllPostsEndpoint());
+            this.posts.set(posts);
+        } catch {
+            const toast = await this.toastCtrl.create({
+                message: 'Impossible de charger les publications.',
+                duration: 2000,
+                color: 'danger'
+            });
+            await toast.present();
+        }
+        await loading.dismiss();
+    }
+}

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...',

src/app/services/api/README.md

@@ -59,9 +59,9 @@ In your Angular project:
 
 ```typescript
 
-import {ApplicationConfig} from '@angular/core';
-import {provideHttpClient} from '@angular/common/http';
-import {provideApi} from '';
+import { ApplicationConfig } from '@angular/core';
+import { provideHttpClient } from '@angular/common/http';
+import { provideApi } from '';
 
 export const appConfig: ApplicationConfig = {
     providers: [
@@ -77,15 +77,15 @@ If you're still using `AppModule` and haven't [migrated](https://angular.dev/ref
 can still import an Angular module:
 
 ```typescript
-import {ApiModule} from '';
+import { ApiModule } from '';
 ```
 
 If different from the generated base path, during app bootstrap, you can provide the base path to your service.
 
 ```typescript
-import {ApplicationConfig} from '@angular/core';
-import {provideHttpClient} from '@angular/common/http';
-import {provideApi} from '';
+import { ApplicationConfig } from '@angular/core';
+import { provideHttpClient } from '@angular/common/http';
+import { provideApi } from '';
 
 export const appConfig: ApplicationConfig = {
     providers: [
@@ -98,9 +98,9 @@ export const appConfig: ApplicationConfig = {
 
 ```typescript
 // with a custom configuration
-import {ApplicationConfig} from '@angular/core';
-import {provideHttpClient} from '@angular/common/http';
-import {provideApi} from '';
+import { ApplicationConfig } from '@angular/core';
+import { provideHttpClient } from '@angular/common/http';
+import { provideApi } from '';
 
 export const appConfig: ApplicationConfig = {
     providers: [
@@ -117,9 +117,9 @@ export const appConfig: ApplicationConfig = {
 
 ```typescript
 // with factory building a custom configuration
-import {ApplicationConfig} from '@angular/core';
-import {provideHttpClient} from '@angular/common/http';
-import {provideApi, Configuration} from '';
+import { ApplicationConfig } from '@angular/core';
+import { provideHttpClient } from '@angular/common/http';
+import { provideApi, Configuration } from '';
 
 export const appConfig: ApplicationConfig = {
     providers: [
@@ -128,10 +128,10 @@ export const appConfig: ApplicationConfig = {
         {
             provide: Configuration,
             useFactory: (authService: AuthService) => new Configuration({
-                basePath: 'http://localhost:9999',
-                withCredentials: true,
-                username: authService.getUsername(),
-                password: authService.getPassword(),
+                    basePath: 'http://localhost:9999',
+                    withCredentials: true,
+                    username: authService.getUsername(),
+                    password: authService.getPassword(),
             }),
             deps: [AuthService],
             multi: false
@@ -147,10 +147,10 @@ you can create an alias name when importing the modules
 in order to avoid naming conflicts:
 
 ```typescript
-import {provideApi as provideUserApi} from 'my-user-api-path';
-import {provideApi as provideAdminApi} from 'my-admin-api-path';
-import {HttpClientModule} from '@angular/common/http';
-import {environment} from '../environments/environment';
+import { provideApi as provideUserApi } from 'my-user-api-path';
+import { provideApi as provideAdminApi } from 'my-admin-api-path';
+import { HttpClientModule } from '@angular/common/http';
+import { environment } from '../environments/environment';
 
 export const appConfig: ApplicationConfig = {
     providers: [

src/app/services/api/api/messages.service.ts

@@ -39,98 +39,6 @@ export class MessagesService extends BaseService {
         super(basePath, configuration);
     }
 
-    /**
-     * @endpoint delete /API/Messages/{id}/Groups/{groupId}
-     * @param id
-     * @param groupId
-     * @param observe set whether or not to return the data Observable as the body, response or events. defaults to returning the body.
-     * @param reportProgress flag to report request and response progress.
-     * @param options additional options
-     */
-    public deleteMessageEndpoint(id: number, groupId: number, observe?: 'body', reportProgress?: boolean, options?: {
-        httpHeaderAccept?: undefined,
-        context?: HttpContext,
-        transferCache?: boolean
-    }): Observable<any>;
-    public deleteMessageEndpoint(id: number, groupId: number, observe?: 'response', reportProgress?: boolean, options?: {
-        httpHeaderAccept?: undefined,
-        context?: HttpContext,
-        transferCache?: boolean
-    }): Observable<HttpResponse<any>>;
-    public deleteMessageEndpoint(id: number, groupId: number, observe?: 'events', reportProgress?: boolean, options?: {
-        httpHeaderAccept?: undefined,
-        context?: HttpContext,
-        transferCache?: boolean
-    }): Observable<HttpEvent<any>>;
-    public deleteMessageEndpoint(id: number, groupId: number, observe: any = 'body', reportProgress: boolean = false, options?: {
-        httpHeaderAccept?: undefined,
-        context?: HttpContext,
-        transferCache?: boolean
-    }): Observable<any> {
-        if (id === null || id === undefined) {
-            throw new Error('Required parameter id was null or undefined when calling deleteMessageEndpoint.');
-        }
-        if (groupId === null || groupId === undefined) {
-            throw new Error('Required parameter groupId was null or undefined when calling deleteMessageEndpoint.');
-        }
-
-        let localVarHeaders = this.defaultHeaders;
-
-        // authentication (JWTBearerAuth) required
-        localVarHeaders = this.configuration.addCredentialToHeaders('JWTBearerAuth', 'Authorization', localVarHeaders, 'Bearer ');
-
-        const localVarHttpHeaderAcceptSelected: string | undefined = options?.httpHeaderAccept ?? this.configuration.selectHeaderAccept([]);
-        if (localVarHttpHeaderAcceptSelected !== undefined) {
-            localVarHeaders = localVarHeaders.set('Accept', localVarHttpHeaderAcceptSelected);
-        }
-
-        const localVarHttpContext: HttpContext = options?.context ?? new HttpContext();
-
-        const localVarTransferCache: boolean = options?.transferCache ?? true;
-
-
-        let responseType_: 'text' | 'json' | 'blob' = 'json';
-        if (localVarHttpHeaderAcceptSelected) {
-            if (localVarHttpHeaderAcceptSelected.startsWith('text')) {
-                responseType_ = 'text';
-            } else if (this.configuration.isJsonMime(localVarHttpHeaderAcceptSelected)) {
-                responseType_ = 'json';
-            } else {
-                responseType_ = 'blob';
-            }
-        }
-
-        let localVarPath = `/API/Messages/${this.configuration.encodeParam({
-            name: "id",
-            value: id,
-            in: "path",
-            style: "simple",
-            explode: false,
-            dataType: "number",
-            dataFormat: "int32"
-        })}/Groups/${this.configuration.encodeParam({
-            name: "groupId",
-            value: groupId,
-            in: "path",
-            style: "simple",
-            explode: false,
-            dataType: "number",
-            dataFormat: "int32"
-        })}`;
-        const {basePath, withCredentials} = this.configuration;
-        return this.httpClient.request<any>('delete', `${basePath}${localVarPath}`,
-            {
-                context: localVarHttpContext,
-                responseType: <any>responseType_,
-                ...(withCredentials ? {withCredentials} : {}),
-                headers: localVarHeaders,
-                observe: observe,
-                ...(localVarTransferCache !== undefined ? {transferCache: localVarTransferCache} : {}),
-                reportProgress: reportProgress
-            }
-        );
-    }
-
     /**
      * @endpoint get /API/Messages/Groups/{groupId}
      * @param groupId

src/app/services/api/api/randomchallenges.service.ts

@@ -190,28 +190,27 @@ export class RandomchallengesService extends BaseService {
     /**
      * @endpoint patch /API/RandomChallenges/{randomChallengeId}/Proof
      * @param randomChallengeId
-     * @param libelle
      * @param proof
      * @param observe set whether or not to return the data Observable as the body, response or events. defaults to returning the body.
      * @param reportProgress flag to report request and response progress.
      * @param options additional options
      */
-    public patchProofEndpoint(randomChallengeId: number, libelle?: string, proof?: Blob, observe?: 'body', reportProgress?: boolean, options?: {
+    public patchProofEndpoint(randomChallengeId: number, proof?: Blob, observe?: 'body', reportProgress?: boolean, options?: {
         httpHeaderAccept?: undefined,
         context?: HttpContext,
         transferCache?: boolean
     }): Observable<any>;
-    public patchProofEndpoint(randomChallengeId: number, libelle?: string, proof?: Blob, observe?: 'response', reportProgress?: boolean, options?: {
+    public patchProofEndpoint(randomChallengeId: number, proof?: Blob, observe?: 'response', reportProgress?: boolean, options?: {
         httpHeaderAccept?: undefined,
         context?: HttpContext,
         transferCache?: boolean
     }): Observable<HttpResponse<any>>;
-    public patchProofEndpoint(randomChallengeId: number, libelle?: string, proof?: Blob, observe?: 'events', reportProgress?: boolean, options?: {
+    public patchProofEndpoint(randomChallengeId: number, proof?: Blob, observe?: 'events', reportProgress?: boolean, options?: {
         httpHeaderAccept?: undefined,
         context?: HttpContext,
         transferCache?: boolean
     }): Observable<HttpEvent<any>>;
-    public patchProofEndpoint(randomChallengeId: number, libelle?: string, proof?: Blob, observe: any = 'body', reportProgress: boolean = false, options?: {
+    public patchProofEndpoint(randomChallengeId: number, proof?: Blob, observe: any = 'body', reportProgress: boolean = false, options?: {
         httpHeaderAccept?: undefined,
         context?: HttpContext,
         transferCache?: boolean
@@ -253,9 +252,6 @@ export class RandomchallengesService extends BaseService {
             localVarFormParams = new HttpParams({encoder: this.encoder});
         }
 
-        if (libelle !== undefined) {
-            localVarFormParams = localVarFormParams.append('libelle', <any>libelle) as any || localVarFormParams;
-        }
         if (proof !== undefined) {
             localVarFormParams = localVarFormParams.append('proof', <any>proof) as any || localVarFormParams;
         }

src/app/services/api/model/create-message-dto.ts

@@ -11,6 +11,5 @@
 
 export interface CreateMessageDto {
     libelle: string;
-    sendDate: string;
 }
 

src/app/services/api/model/get-post-dto.ts

@@ -15,6 +15,7 @@ export interface GetPostDto {
     creationDate?: string;
     likes?: number;
     isLiked?: boolean;
+    proof?: string | null;
     userId?: number;
     username?: string | null;
 }

src/app/services/chat-service.ts

@@ -0,0 +1,46 @@
+import {Injectable, signal} from "@angular/core";
+import {GetMessageDto} from "./api";
+import * as signalR from '@microsoft/signalr';
+
+@Injectable({
+    providedIn: 'root'
+})
+
+export class ChatService {
+    private hubConnection!: signalR.HubConnection;
+
+    messages = signal<GetMessageDto[]>([]);
+
+    async connect(groupId: number) {
+        if (this.hubConnection) return;
+
+        this.hubConnection = new signalR.HubConnectionBuilder()
+            .withUrl(`http://localhost:5235/groupHub?groupId=${groupId}`)
+            .withAutomaticReconnect()
+            .build();
+
+        await this.hubConnection.start();
+
+        this.hubConnection.on(
+            'ReceiveMessage',
+            (message: GetMessageDto) => {
+
+                this.messages.update(messages => [
+                    ...messages,
+                    message
+                ]);
+            }
+        );
+    }
+
+    async disconnect() {
+        if (this.hubConnection) {
+            await this.hubConnection.stop();
+            this.hubConnection = undefined!;
+        }
+    }
+
+    setMessages(messages: GetMessageDto[]) {
+        this.messages.set(messages);
+    }
+}

src/app/services/friends-state.ts

@@ -1,6 +1,6 @@
 import {inject, Injectable, signal} from '@angular/core';
 import {FriendsService, GetFriendDto, GetFriendRequestDto} from "./api";
-import {LoadingController, ToastController} from "@ionic/angular";
+import {ToastController} from "@ionic/angular";
 import {firstValueFrom} from "rxjs";
 
 @Injectable({