Added posts and possibility to like post

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

@@ -1,10 +1,9 @@
-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";
 
 @Component({
     selector: 'app-challenge-card',
@@ -60,10 +59,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/post/post.component.html

@@ -0,0 +1,32 @@
+@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]="'data:image/jpeg;base64,' + 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>
+}

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
+        }));
+
+        const loading = await this.loadCtrl.create({
+            message: 'Chargement...',
+            spinner: 'lines-sharp-small'
+        });
+        await loading.present();
+
+        try {
+            await firstValueFrom(this.postsService.patchLikeEndpoint(postId));
+        } catch {
+            const toast = await this.toastCtrl.create({
+                message: 'Impossible d\'aimer ce contenu',
+                duration: 2000,
+                color: 'danger'
+            });
+            await toast.present();
+        }
+        await loading.dismiss();
+    }
+}

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

@@ -5,4 +5,24 @@
 </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

@@ -1,13 +1,50 @@
-import {Component} from '@angular/core';
-import {IonicModule} from "@ionic/angular";
+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
+        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/services/api/api/messages.service.ts

@@ -39,67 +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

@@ -150,16 +150,15 @@ 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?: {httpHeaderAccept?: undefined, context?: HttpContext, transferCache?: boolean}): Observable<any>;
-    public patchProofEndpoint(randomChallengeId: number, libelle?: string, 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?: {httpHeaderAccept?: undefined, context?: HttpContext, transferCache?: boolean}): Observable<HttpEvent<any>>;
-    public patchProofEndpoint(randomChallengeId: number, libelle?: string, proof?: Blob, observe: any = 'body', reportProgress: boolean = false, options?: {httpHeaderAccept?: undefined, context?: HttpContext, transferCache?: boolean}): Observable<any> {
+    public patchProofEndpoint(randomChallengeId: number, proof?: Blob, observe?: 'body', reportProgress?: boolean, options?: {httpHeaderAccept?: undefined, context?: HttpContext, transferCache?: boolean}): Observable<any>;
+    public patchProofEndpoint(randomChallengeId: number, proof?: Blob, observe?: 'response', reportProgress?: boolean, options?: {httpHeaderAccept?: undefined, context?: HttpContext, transferCache?: boolean}): Observable<HttpResponse<any>>;
+    public patchProofEndpoint(randomChallengeId: number, proof?: Blob, observe?: 'events', reportProgress?: boolean, options?: {httpHeaderAccept?: undefined, context?: HttpContext, transferCache?: boolean}): Observable<HttpEvent<any>>;
+    public patchProofEndpoint(randomChallengeId: number, proof?: Blob, observe: any = 'body', reportProgress: boolean = false, options?: {httpHeaderAccept?: undefined, context?: HttpContext, transferCache?: boolean}): Observable<any> {
         if (randomChallengeId === null || randomChallengeId === undefined) {
             throw new Error('Required parameter randomChallengeId was null or undefined when calling patchProofEndpoint.');
         }
@@ -198,9 +197,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/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;
 }