Feature/issue 24/association card

package.json

@@ -42,6 +42,7 @@
     "primeng": "^19.0.6",
     "rxjs": "~7.8.0",
     "tslib": "^2.3.0",
+    "uuid": "^11.1.0",
     "zone.js": "~0.15.0"
   },
   "devDependencies": {

src/app/app.config.ts

@@ -8,14 +8,15 @@ import { provideHttpClient } from '@angular/common/http';
 import { providePrimeNG } from 'primeng/config';
 import { activitiesReducer } from './features/activity/store/activities.reducers';
 import { myPreset } from './mytheme';
+import { associationsReducer } from './features/association/store/association.reducers';
 
 export const appConfig: ApplicationConfig = {
   providers: [
     provideZoneChangeDetection({ eventCoalescing: true }),
     provideRouter(routes),
     provideHttpClient(),
     provideAnimationsAsync(),
-    provideStore({ activities: activitiesReducer }),
+    provideStore({ activities: activitiesReducer, associations: associationsReducer }),
     provideStoreDevtools({ maxAge: 25 }),
     providePrimeNG({
       theme: {

src/app/app.routes.ts

@@ -1,9 +1,14 @@
 import { Routes } from '@angular/router';
 import { ActivitiesHomeComponent } from './features/activity/pages/activities-home/activities-home.component';
+import { ActivityDetailsComponent } from './features/activity/pages/activity-details/activity-details.component';
 
 export const routes: Routes = [
   {
     path: '',
     component: ActivitiesHomeComponent,
   },
+  {
+    path: 'activity/:id',
+    component: ActivityDetailsComponent,
+  },
 ];

src/app/features/activity/components/activity-card/activity-card.component.html

@@ -1,4 +1,4 @@
-<div class="card">
+<div class="card" [routerLink]="['/activity', activity.id]">
   <img class="activity-image" [src]="apiUrl + activity.image[0]" [alt]="activity.title" />
   <div class="description-card">
     <div class="header-description">

src/app/features/activity/components/activity-card/activity-card.component.ts

@@ -1,14 +1,15 @@
 import { Component, Input } from '@angular/core';
 import { Activity } from '../../models/activity.model';
+import { RouterLink } from '@angular/router';
 import { InscriptionBadgeComponent } from '../inscription-badge/inscription-badge.component';
 import { FavoriteHeartComponent } from '../favorite-heart/favorite-heart.component';
 import { environment } from 'src/environments/environment.development';
-import { TruncatePipe } from '../../../../common/Pipes/TruncateString.pipe';
+import { TruncatePipe } from '../../../../common/pipes/TruncateString.pipe';
 import { DatePipe } from '@angular/common';
 
 @Component({
   selector: 'app-activity-card',
-  imports: [InscriptionBadgeComponent, FavoriteHeartComponent, TruncatePipe, DatePipe],
+  imports: [InscriptionBadgeComponent, FavoriteHeartComponent, TruncatePipe, DatePipe, RouterLink],
   templateUrl: './activity-card.component.html',
   styleUrl: './activity-card.component.scss',
   standalone: true,

src/app/features/activity/models/activity.model.ts

@@ -6,7 +6,8 @@ export type Localisation = {
   latitude: number;
 };
 
-export type Association = {
+export type AssociationActiviy = {
+  id: string;
   name: string;
   isFollow: boolean;
   logo: string;
@@ -23,7 +24,8 @@ export class Activity {
   title: string = '';
   description: string = '';
   image: string[] = [];
-  association: Association = {
+  association: AssociationActiviy = {
+    id: '',
     name: '',
     logo: '',
     isFollow: false,
@@ -49,6 +51,7 @@ export class Activity {
     this.description = data.description || '';
     this.image = data.image || [];
     this.association = data.association || {
+      id: '',
       name: '',
       logo: '',
       isFollow: false,

src/app/features/activity/pages/activity-details/activity-details.component.html

@@ -0,0 +1,6 @@
+<div class="activity-details-page">
+  <div class="activity"></div>
+  <div class="association">
+    <app-association-card [activityId]="activityId"></app-association-card>
+  </div>
+</div>

src/app/features/activity/pages/activity-details/activity-details.component.scss

@@ -0,0 +1,14 @@
+.activity-details-page {
+  display: flex;
+  height: 80vh;
+
+  .activity {
+    width: 50%;
+    border: 1px solid black;
+  }
+
+  .association {
+    width: 50%;
+    border: 1px solid black;
+  }
+}

src/app/features/activity/pages/activity-details/activity-details.component.ts

@@ -0,0 +1,20 @@
+import { Component, inject, OnInit } from '@angular/core';
+import { AssociationCardComponent } from '../../../association/components/association-card/association-card.component';
+import { ActivatedRoute, ParamMap } from '@angular/router';
+
+@Component({
+  selector: 'app-activity-details',
+  imports: [AssociationCardComponent],
+  templateUrl: './activity-details.component.html',
+  styleUrl: './activity-details.component.scss',
+})
+export class ActivityDetailsComponent implements OnInit {
+  route: ActivatedRoute = inject(ActivatedRoute);
+  activityId!: string;
+
+  ngOnInit(): void {
+    this.route.paramMap.subscribe((params: ParamMap) => {
+      this.activityId = String(params.get('id'));
+    });
+  }
+}

src/app/features/activity/store/activities.selector.ts

@@ -1,4 +1,10 @@
-import { createFeatureSelector } from '@ngrx/store';
+import { createFeatureSelector, createSelector, MemoizedSelector } from '@ngrx/store';
 import { Activity } from '../models/activity.model';
+import { UUIDTypes } from 'uuid';
 
-export const selectActivities = createFeatureSelector<Activity[]>('activities');
+export const selectActivitiesState = createFeatureSelector<Activity[]>('activities');
+
+export const selectActivities = createSelector(selectActivitiesState, activities => activities);
+
+export const selectActivityById = (activityId: UUIDTypes): MemoizedSelector<object, Activity | null> =>
+  createSelector(selectActivitiesState, activities => (activities || []).find(item => item.id === activityId) || null);

src/app/features/association/components/association-card/association-card.component.html

@@ -0,0 +1,7 @@
+<p>association-card works!</p>
+
+<div>
+  @if (association$ | async; as association) {
+    <p>{{ association.description }}</p>
+  }
+</div>

src/app/features/association/components/association-card/association-card.component.ts

@@ -0,0 +1,24 @@
+import { ChangeDetectionStrategy, Component, inject, Input, OnInit } from '@angular/core';
+import { AssociationFacadeService } from '../../services/association-facade.service';
+import { Observable } from 'rxjs';
+import { Association } from '../../model/association.model';
+import { AsyncPipe } from '@angular/common';
+
+@Component({
+  selector: 'app-association-card',
+  imports: [AsyncPipe],
+  templateUrl: './association-card.component.html',
+  styleUrl: './association-card.component.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class AssociationCardComponent implements OnInit {
+  @Input() activityId!: string;
+
+  associationFacadeService: AssociationFacadeService = inject(AssociationFacadeService);
+
+  association$!: Observable<Association | null>;
+
+  ngOnInit(): void {
+    this.association$ = this.associationFacadeService.getAssociationCard(this.activityId);
+  }
+}

src/app/features/association/model/association.model.ts

@@ -0,0 +1,32 @@
+import { UUIDTypes } from 'uuid';
+
+export type Statistic = {
+  value: number;
+  description: string;
+};
+
+export class Association {
+  id: UUIDTypes;
+  description: string;
+  founder: string;
+  LocalDate: Date;
+  name: string;
+  associationProfileImageURL: string;
+  associationLogoImage: string;
+  siteURL: string;
+  statistics: Statistic[];
+  isFollow: boolean;
+
+  constructor(data: Partial<Association>) {
+    this.id = data.id || '';
+    this.description = data.description || '';
+    this.founder = data.founder || '';
+    this.LocalDate = data.LocalDate || new Date();
+    this.name = data.name || '';
+    this.associationProfileImageURL = data.associationProfileImageURL || '';
+    this.associationLogoImage = data.associationLogoImage || '';
+    this.siteURL = data.siteURL || '';
+    this.statistics = data.statistics || [{ value: 0, description: '' }];
+    this.isFollow = data.isFollow || false;
+  }
+}

src/app/features/association/services/association-api.service.ts

@@ -0,0 +1,19 @@
+import { HttpClient } from '@angular/common/http';
+import { inject, Injectable } from '@angular/core';
+import { Observable } from 'rxjs';
+import { UUIDTypes } from 'uuid';
+import { Association } from '../model/association.model';
+import { environment } from 'src/environments/environment.development';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class AssociationApiService {
+  _http: HttpClient = inject(HttpClient);
+
+  private _apiUrl = environment.apiUrl;
+
+  getAssociationCard(id: UUIDTypes): Observable<Association> {
+    return this._http.get<Association>(`${this._apiUrl}/association/${id}`);
+  }
+}

src/app/features/association/services/association-facade.service.ts

@@ -0,0 +1,92 @@
+import { inject, Injectable } from '@angular/core';
+import { Store } from '@ngrx/store';
+import { AssociationApiService } from './association-api.service';
+import { filter, Observable, of, switchMap, take, tap } from 'rxjs';
+import { setAssociations } from '../store/association.actions';
+import { Association } from '../model/association.model';
+import { selectAssociation } from '../store/association.selector';
+import { selectActivityById } from '../../activity/store/activities.selector';
+import { ActivityFacadeService } from '../../activity/services/activity-facade.service';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class AssociationFacadeService {
+  store: Store = inject(Store);
+  activityFacadeService: ActivityFacadeService = inject(ActivityFacadeService);
+  associationApiService: AssociationApiService = inject(AssociationApiService);
+
+  getAssociationCard(activityId: string): Observable<Association | null> {
+    // get activity selected from store
+    return this.store.select(selectActivityById(activityId)).pipe(
+      switchMap(activity => {
+        if (activity) {
+          // get association selected from store
+          return this._getAssociation(activity.association.id);
+        }
+
+        // if no activity found try to fetch it from API (i.e : page has been refreshed)
+        this.activityFacadeService.getAllActivities();
+
+        // then get activity before getting association
+        return this.store.select(selectActivityById(activityId)).pipe(
+          filter(activity => !!activity), // to prevent initial empty store on init to stop the flow
+          take(1), // stop to listen once store is filled with an activity
+          switchMap(activity => this._getAssociation(activity!.association.id))
+        );
+      })
+    );
+  }
+
+  private _getAssociation(associationId: string): Observable<Association | null> {
+    return this.store.select(selectAssociation(associationId)).pipe(
+      switchMap(association => {
+        if (association) {
+          return of(association);
+        }
+        // If not found in store, fetch from API
+        return this.associationApiService.getAssociationCard(associationId).pipe(
+          tap((fetchedAssociation: Association) => {
+            this.store.dispatch(setAssociations({ association: fetchedAssociation }));
+          })
+        );
+      })
+    );
+  }
+  // getAssociationCard(activityId: string): Observable<Association | null> {
+  //   // get activity selected from store
+  //   const activity$: Observable<Activity | null> = this.store.select(selectActivityById(activityId));
+  //   // if no activity found try to fetch it from API (i.e : page has been refreshed)
+
+  //   return activity$.pipe(
+  //     switchMap(activity => {
+  //       if (!activity) {
+  //         console.log('coucou maman 2 ');
+  //         this.activityFacadeService.getAllActivities();
+  //         activity = this.store.select(selectActivityById(activityId));
+  //       }
+  //       if (!activity) {
+  //         return of(null);
+  //       }
+  //       // get associationId from activity
+  //       const associationId = activity.association.id;
+
+  //       // get association selected from store
+  //       return this.store.select(selectAssociation(associationId)).pipe(
+  //         switchMap(association => {
+  //           if (association) {
+  //             return of(association);
+  //           }
+  //           // if not found in store, request it from API
+  //           return this.associationApiService.getAssociationCard(associationId).pipe(
+  //             // update store with API response
+  //             tap((fetchedAssociation: Association) => {
+  //               this.store.dispatch(setAssociations({ association: fetchedAssociation }));
+  //             })
+  //           );
+  //         })
+  //       );
+  //     })
+  //   );
+  // }
+}

src/app/features/association/store/association.actions.ts

@@ -0,0 +1,6 @@
+import { createAction, props } from '@ngrx/store';
+import { Association } from '../model/association.model';
+
+export const setAssociations = createAction('[associations] setAssociations', props<{ association: Association }>());
+
+export const selectAssociation = createAction('[associations] getAssociation', props<{ associationId: string }>());