From 3e76ac62b6f70283d8fbbfa8f7e007bb5fd39eed Mon Sep 17 00:00:00 2001 From: Marcel Date: Thu, 16 Feb 2023 15:15:52 +0100 Subject: [PATCH 01/13] favorite Routes working --- src/app/components/routes/route/route.component.ts | 9 +++++---- src/app/components/routes/routes.component.spec.ts | 2 +- src/app/services/member.service.ts | 1 - 3 files changed, 6 insertions(+), 6 deletions(-) diff --git a/src/app/components/routes/route/route.component.ts b/src/app/components/routes/route/route.component.ts index bc60a7b..28c16f6 100644 --- a/src/app/components/routes/route/route.component.ts +++ b/src/app/components/routes/route/route.component.ts @@ -37,11 +37,12 @@ export class RouteComponent implements OnInit { if (!this.containsFavorite && this.route !== undefined) { this.currentMember?.favouriteRoutes?.push(this.route); } else if (this.containsFavorite && this.route !== undefined) { - const indexOfFav = this.currentMember?.favouriteRoutes?.indexOf( - this.route + const indexOfFav = this.currentMember?.favouriteRoutes?.findIndex( + (route) => route.id === this.route?.id ); - if (indexOfFav) - this.currentMember?.favouriteRoutes?.splice(indexOfFav); + if (indexOfFav !== undefined && indexOfFav > -1) { + this.currentMember?.favouriteRoutes?.splice(indexOfFav, 1); + } } const member = this.currentMember; diff --git a/src/app/components/routes/routes.component.spec.ts b/src/app/components/routes/routes.component.spec.ts index 767780b..cad5faf 100644 --- a/src/app/components/routes/routes.component.spec.ts +++ b/src/app/components/routes/routes.component.spec.ts @@ -20,4 +20,4 @@ describe('RoutesComponent', () => { it('should create', () => { expect(component).toBeTruthy(); }); -}); +}; diff --git a/src/app/services/member.service.ts b/src/app/services/member.service.ts index 7e402c2..28eb7f3 100644 --- a/src/app/services/member.service.ts +++ b/src/app/services/member.service.ts @@ -25,7 +25,6 @@ export class MemberService { } public updateMember(member: Member, memberId: number | undefined): Observable { - console.log(member, memberId) return this.http.put(`${this.apiServerUrl}/member/${memberId}`, member); } -- GitLab From 6ebd5a552bd4f956dc4533900320340159d0aca7 Mon Sep 17 00:00:00 2001 From: Marcel Date: Thu, 16 Feb 2023 15:31:37 +0100 Subject: [PATCH 02/13] optimized toggleFavoriteRoute --- src/app/components/routes/route/route.component.ts | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/src/app/components/routes/route/route.component.ts b/src/app/components/routes/route/route.component.ts index 28c16f6..3768983 100644 --- a/src/app/components/routes/route/route.component.ts +++ b/src/app/components/routes/route/route.component.ts @@ -34,14 +34,15 @@ export class RouteComponent implements OnInit { } toggleFavoriteRoute() { + const favRoutes = this.currentMember?.favouriteRoutes; if (!this.containsFavorite && this.route !== undefined) { - this.currentMember?.favouriteRoutes?.push(this.route); + favRoutes?.push(this.route); } else if (this.containsFavorite && this.route !== undefined) { - const indexOfFav = this.currentMember?.favouriteRoutes?.findIndex( + const indexOfFav = favRoutes?.findIndex( (route) => route.id === this.route?.id ); if (indexOfFav !== undefined && indexOfFav > -1) { - this.currentMember?.favouriteRoutes?.splice(indexOfFav, 1); + favRoutes?.splice(indexOfFav, 1); } } -- GitLab From 9da8c1dc4a506e7d3ef5522a76c639a141a6ea68 Mon Sep 17 00:00:00 2001 From: Marcel Date: Thu, 16 Feb 2023 15:54:59 +0100 Subject: [PATCH 03/13] changed route.scss favorite button on hover --- .../components/routes/route/route.component.scss | 11 +---------- src/app/components/routes/routes.component.ts | 13 +++++++------ 2 files changed, 8 insertions(+), 16 deletions(-) diff --git a/src/app/components/routes/route/route.component.scss b/src/app/components/routes/route/route.component.scss index a8a9484..b9b50fd 100644 --- a/src/app/components/routes/route/route.component.scss +++ b/src/app/components/routes/route/route.component.scss @@ -10,10 +10,6 @@ color: #444444; } -.route:first-of-type { - margin-top: 0; -} - mat-icon { cursor: pointer; } @@ -22,7 +18,6 @@ mat-icon { display: flex; justify-content: flex-start; align-items: center; - cursor: pointer; font-size: 1.5rem; min-width: 320px; color: rgba(0, 0, 0, 0.6); @@ -56,11 +51,7 @@ mat-icon { height: 100%; margin-left: 3px; color: darkgrey; - transition: color .3s ease, transform .3s; - - &:hover{ - color: #fe2c54 !important; - } + } } diff --git a/src/app/components/routes/routes.component.ts b/src/app/components/routes/routes.component.ts index 2c73ec5..799aab5 100644 --- a/src/app/components/routes/routes.component.ts +++ b/src/app/components/routes/routes.component.ts @@ -22,12 +22,7 @@ export class RoutesComponent implements OnInit, OnDestroy { constructor(private store: Store, delete$: Actions) { // JSON.parse creates a copy of the original object - that avoids errors later - this.store - .select(getCurrentMember) - .pipe(takeUntil(this.onDestroy$)) - .subscribe( - (data) => (this.currentMember = JSON.parse(JSON.stringify(data))) - ); + delete$ .pipe(ofType(RouteActions.removeRouteSuccess), takeUntil(this.onDestroy$)) @@ -38,6 +33,12 @@ export class RoutesComponent implements OnInit, OnDestroy { ngOnInit(): void { this.store.dispatch(loadRoutes()); + this.store + .select(getCurrentMember) + .pipe(takeUntil(this.onDestroy$)) + .subscribe( + (data) => (this.currentMember = JSON.parse(JSON.stringify(data))) + ); } ngOnDestroy(): void { -- GitLab From 16351cf5a88591e987a7d05de572cd69b9986a08 Mon Sep 17 00:00:00 2001 From: Marcel Date: Thu, 16 Feb 2023 16:42:12 +0100 Subject: [PATCH 04/13] Fiex bug currentUser not shown favRoutes immediately --- .../routes/route/route.component.ts | 8 +++-- .../components/routes/routes.component.html | 31 +++++++++++-------- src/app/components/routes/routes.component.ts | 22 ++++++++----- 3 files changed, 38 insertions(+), 23 deletions(-) diff --git a/src/app/components/routes/route/route.component.ts b/src/app/components/routes/route/route.component.ts index 3768983..c0f4eb6 100644 --- a/src/app/components/routes/route/route.component.ts +++ b/src/app/components/routes/route/route.component.ts @@ -1,4 +1,4 @@ -import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core'; +import { Component, EventEmitter, Input, OnChanges, OnInit, Output } from '@angular/core'; import { Router } from '@angular/router'; import { Route } from '../../../models/route'; import { Store } from '@ngrx/store'; @@ -13,7 +13,7 @@ import { Subject } from 'rxjs'; templateUrl: './route.component.html', styleUrls: ['./route.component.scss'], }) -export class RouteComponent implements OnInit { +export class RouteComponent implements OnInit, OnChanges { @Input() route: Route | undefined; @Input() currentMember: Member | undefined; @Output() refreshParentRoutes = new EventEmitter(); @@ -22,7 +22,9 @@ export class RouteComponent implements OnInit { constructor(private router: Router, private store: Store) {} - ngOnInit(): void { + ngOnInit(): void {} + + ngOnChanges(): void { this.containsFavorite = !!this.currentMember?.favouriteRoutes?.filter( (fav) => fav.id === this.route?.id ).length; diff --git a/src/app/components/routes/routes.component.html b/src/app/components/routes/routes.component.html index 4d58bb5..063d574 100644 --- a/src/app/components/routes/routes.component.html +++ b/src/app/components/routes/routes.component.html @@ -1,13 +1,18 @@ - - - - > - - +
+ +
+
+ + + > + + +
+ diff --git a/src/app/components/routes/routes.component.ts b/src/app/components/routes/routes.component.ts index 799aab5..c1a35dc 100644 --- a/src/app/components/routes/routes.component.ts +++ b/src/app/components/routes/routes.component.ts @@ -5,10 +5,11 @@ import { Observable, Subject, takeUntil } from 'rxjs'; import { AppState } from '../../store/model/app-state-model'; import { loadRoutes } from '../../store/actions/routes.actions'; import { getAllRoutes } from '../../store/selectors/routes.selectors'; -import { getCurrentMember } from '../../store/selectors/members.selectors'; +import { getAllMembers, getCurrentMember } from '../../store/selectors/members.selectors'; import { Member } from '../../models/member'; import { Actions, ofType } from '@ngrx/effects'; import * as RouteActions from '../../store/actions/routes.actions'; +import { updateCurrentMember } from 'src/app/store/actions/members.actions'; @Component({ selector: 'app-routes', @@ -17,6 +18,7 @@ import * as RouteActions from '../../store/actions/routes.actions'; }) export class RoutesComponent implements OnInit, OnDestroy { routes$: Observable = this.store.select(getAllRoutes); + currentMember: Member | undefined; onDestroy$ = new Subject(); @@ -33,12 +35,14 @@ export class RoutesComponent implements OnInit, OnDestroy { ngOnInit(): void { this.store.dispatch(loadRoutes()); - this.store - .select(getCurrentMember) - .pipe(takeUntil(this.onDestroy$)) - .subscribe( - (data) => (this.currentMember = JSON.parse(JSON.stringify(data))) - ); + + + this.store + .select(getCurrentMember) + .pipe(takeUntil(this.onDestroy$)) + .subscribe( + (data) => (this.currentMember = JSON.parse(JSON.stringify(data))) + ); } ngOnDestroy(): void { @@ -46,6 +50,10 @@ export class RoutesComponent implements OnInit, OnDestroy { this.onDestroy$.complete(); } + onSelectEvent(id: number) { + this.store.dispatch(updateCurrentMember({ id })); + } + refreshRoutesComponent() { this.ngOnInit(); } -- GitLab From d91a63d1b5e4d9793af17d1f1a7333c50439c6c5 Mon Sep 17 00:00:00 2001 From: Marcel Date: Fri, 17 Feb 2023 11:24:26 +0100 Subject: [PATCH 05/13] Whole app is working properly --- .../add-member-form.component.html | 1 + .../member-details.component.ts | 24 ++----------- .../member-table/member-table.component.ts | 1 + src/app/store/actions/members.actions.ts | 9 +++-- src/app/store/effects/members.effects.ts | 35 ++++++++++--------- src/app/store/reducers/members.reducer.ts | 19 ++++++---- 6 files changed, 43 insertions(+), 46 deletions(-) diff --git a/src/app/components/members/member-table/add-member-form/add-member-form.component.html b/src/app/components/members/member-table/add-member-form/add-member-form.component.html index 9ecba0d..692c930 100644 --- a/src/app/components/members/member-table/add-member-form/add-member-form.component.html +++ b/src/app/components/members/member-table/add-member-form/add-member-form.component.html @@ -15,6 +15,7 @@ placeholder="Firstname" formControlName="firstName" /> +
diff --git a/src/app/components/members/member-table/member-details/member-details.component.ts b/src/app/components/members/member-table/member-details/member-details.component.ts index 94f577a..1a02f09 100644 --- a/src/app/components/members/member-table/member-details/member-details.component.ts +++ b/src/app/components/members/member-table/member-details/member-details.component.ts @@ -6,8 +6,6 @@ import { AppState } from '../../../../store/model/app-state-model'; import { Store } from '@ngrx/store'; import { getMember } from '../../../../store/selectors/members.selectors'; import { Subject, Subscription, takeUntil } from 'rxjs'; -import { Actions, ofType } from '@ngrx/effects'; -import * as MemberActions from '../../../../store/actions/members.actions'; @Component({ selector: 'app-member-details', @@ -22,26 +20,8 @@ export class MemberDetailsComponent implements OnInit, OnDestroy { constructor( private activatedRoute: ActivatedRoute, - private store: Store, - private updates$: Actions - ) { - updates$ - .pipe( - ofType(MemberActions.loadMembersSuccess), - takeUntil(this.onDestroy$) - ) - .subscribe(() => { - this.store - .select(getMember) - .pipe(takeUntil(this.onDestroy$)) - .subscribe((member) => { - this.member = member; - }); - this.subscription = this.activatedRoute.params.subscribe((params) => - this.getMemberById(parseInt(params['id'])) - ); - }); - } + private store: Store + ) {} ngOnInit(): void { this.subscription = this.activatedRoute.params.subscribe((params) => diff --git a/src/app/components/members/member-table/member-table.component.ts b/src/app/components/members/member-table/member-table.component.ts index 9031928..2c069a8 100644 --- a/src/app/components/members/member-table/member-table.component.ts +++ b/src/app/components/members/member-table/member-table.component.ts @@ -37,6 +37,7 @@ export class MemberTableComponent implements OnInit, OnDestroy { constructor(private dialog: MatDialog, private store: Store) {} ngOnInit(): void { + this.store.dispatch(loadMembers()); this.store.select(getAllMembers) .pipe(takeUntil(this.onDestroy$)) .subscribe((data) => { diff --git a/src/app/store/actions/members.actions.ts b/src/app/store/actions/members.actions.ts index 524a4ee..4416850 100644 --- a/src/app/store/actions/members.actions.ts +++ b/src/app/store/actions/members.actions.ts @@ -21,7 +21,7 @@ export const loadMember = createAction( export const loadMemberSuccess = createAction( '[Member] Load Member Success', - props<{ payload: Member }>() + props<{ member: Member }>() ); export const loadMemberFail = createAction( @@ -62,7 +62,7 @@ export const removeMemberFailure = createAction( // add route export const updateMember = createAction( - '[Member] Update Route', + '[Member] Update Member', props<{ member: Member }>() ); @@ -83,3 +83,8 @@ export const updateCurrentMember = createAction( '[Member] Update Current Member', props<{ id: number }>() ); + +// export const updateCurrentMemberSuccess = createAction( +// '[Member] Update Current Member Success', +// props<{ currentMember: Member }>() +// ); diff --git a/src/app/store/effects/members.effects.ts b/src/app/store/effects/members.effects.ts index 71972b3..0e7ecf2 100644 --- a/src/app/store/effects/members.effects.ts +++ b/src/app/store/effects/members.effects.ts @@ -1,7 +1,13 @@ import { Injectable } from '@angular/core'; import { Actions, createEffect, ofType } from '@ngrx/effects'; import { of, switchMap, tap } from 'rxjs'; -import { map, catchError, mergeMap, exhaustMap, concatMap } from 'rxjs/operators'; +import { + map, + catchError, + mergeMap, + exhaustMap, + concatMap, +} from 'rxjs/operators'; import * as MembersActions from '../actions/members.actions'; import { MemberService } from '../../services/member.service'; import { AppState } from '../model/app-state-model'; @@ -9,8 +15,6 @@ import { Store } from '@ngrx/store'; @Injectable() export class MembersEffects { - - loadMembers$ = createEffect(() => this.actions$.pipe( ofType(MembersActions.loadMembers), @@ -47,17 +51,6 @@ export class MembersEffects { ) ); - reloadOnAddMemberSuccess$ = createEffect( - () => - this.actions$.pipe( - ofType(MembersActions.addMemberSuccess), - tap(() => { - this.loadMembers$; - }) - ), - {dispatch: false} - ) - updateMember$ = createEffect(() => this.actions$.pipe( ofType(MembersActions.updateMember), @@ -71,9 +64,19 @@ export class MembersEffects { ) ); + // reloadOnAddMemberSuccess$ = createEffect( + // () => + // this.actions$.pipe( + // ofType(MembersActions.addMemberSuccess), + // tap(() => { + // this.loadMembers$; + // }) + // ), + // {dispatch: false} + // ) + constructor( private actions$: Actions, - private memberService: MemberService, - private store: Store + private memberService: MemberService ) {} } diff --git a/src/app/store/reducers/members.reducer.ts b/src/app/store/reducers/members.reducer.ts index 0702022..c9642bd 100644 --- a/src/app/store/reducers/members.reducer.ts +++ b/src/app/store/reducers/members.reducer.ts @@ -51,10 +51,10 @@ export const membersReducer = createReducer( loading: true, }; }), - on(MemberActions.loadMemberSuccess, (state, { payload }): MembersState => { + on(MemberActions.loadMemberSuccess, (state, { member }): MembersState => { return { ...state, - members: [...state.members, payload], + members: [...state.members, member], loading: false, }; }), @@ -64,7 +64,7 @@ export const membersReducer = createReducer( return { ...state, - loading: true, + loading: false, }; }), @@ -112,7 +112,7 @@ export const membersReducer = createReducer( on(MemberActions.getCurrentMember, (state): MembersState => { return { ...state, - // loading:true, + loading:true, }; }), @@ -121,9 +121,16 @@ export const membersReducer = createReducer( ...state, currentMember: state.members.find((member) => member.id === id), - // loading: false, + loading: true, }; - }) + }), + // on(MemberActions.updateCurrentMemberSuccess, (state, action): MembersState => { + // return { + // ...state, + // currentMember: action.currentMember, + // loading: false, + // }; + // }), ); export function reducer(state: MembersState, action: Action) { -- GitLab From bdb5e33db4423c84db737414a9c94ea736d3ac59 Mon Sep 17 00:00:00 2001 From: Marcel Date: Mon, 20 Feb 2023 17:54:33 +0100 Subject: [PATCH 06/13] FavRoutesSelector and changed route and routes component --- .../components/header/header.component.html | 2 +- src/app/components/header/header.component.ts | 4 +- .../member-details.component.ts | 4 +- .../member-table/member-table.component.ts | 6 +- .../routes/route/route.component.html | 2 +- .../routes/route/route.component.ts | 79 ++++++++++++------- .../components/routes/routes.component.html | 8 +- src/app/components/routes/routes.component.ts | 46 ++++------- src/app/models/favoriteRoute.ts | 8 ++ src/app/store/actions/members.actions.ts | 13 +++ src/app/store/effects/members.effects.ts | 12 +-- src/app/store/effects/routes.effects.ts | 2 +- src/app/store/reducers/members.reducer.ts | 17 +++- src/app/store/selectors/members.selectors.ts | 39 +++++++-- 14 files changed, 146 insertions(+), 96 deletions(-) create mode 100644 src/app/models/favoriteRoute.ts diff --git a/src/app/components/header/header.component.html b/src/app/components/header/header.component.html index 63ad0ca..938234a 100644 --- a/src/app/components/header/header.component.html +++ b/src/app/components/header/header.component.html @@ -4,7 +4,7 @@ menu - +
diff --git a/src/app/components/header/header.component.ts b/src/app/components/header/header.component.ts index 52b1083..e13ed1e 100644 --- a/src/app/components/header/header.component.ts +++ b/src/app/components/header/header.component.ts @@ -11,7 +11,7 @@ import { updateCurrentMember, } from '../../store/actions/members.actions'; import { Store } from '@ngrx/store'; -import { getAllMembers } from '../../store/selectors/members.selectors'; +import { selectAllMembers } from '../../store/selectors/members.selectors'; import { Subject, takeUntil } from 'rxjs'; @Component({ @@ -29,7 +29,7 @@ export class HeaderComponent implements OnInit, OnDestroy { ngOnInit(): void { this.store.dispatch(loadMembers()); this.store - .select(getAllMembers) + .select(selectAllMembers) .pipe(takeUntil(this.onDestroy$)) .subscribe((data: Member[]) => { this.members = data; diff --git a/src/app/components/members/member-table/member-details/member-details.component.ts b/src/app/components/members/member-table/member-details/member-details.component.ts index 1a02f09..f033453 100644 --- a/src/app/components/members/member-table/member-details/member-details.component.ts +++ b/src/app/components/members/member-table/member-details/member-details.component.ts @@ -4,7 +4,7 @@ import { Member } from '../../../../models/member'; import { loadMember } from '../../../../store/actions/members.actions'; import { AppState } from '../../../../store/model/app-state-model'; import { Store } from '@ngrx/store'; -import { getMember } from '../../../../store/selectors/members.selectors'; +import { selectMember } from '../../../../store/selectors/members.selectors'; import { Subject, Subscription, takeUntil } from 'rxjs'; @Component({ @@ -29,7 +29,7 @@ export class MemberDetailsComponent implements OnInit, OnDestroy { ); this.store - .select(getMember) + .select(selectMember) .pipe(takeUntil(this.onDestroy$)) .subscribe((member) => { this.member = member; diff --git a/src/app/components/members/member-table/member-table.component.ts b/src/app/components/members/member-table/member-table.component.ts index 2c069a8..a4b5a38 100644 --- a/src/app/components/members/member-table/member-table.component.ts +++ b/src/app/components/members/member-table/member-table.component.ts @@ -7,7 +7,7 @@ import { MatDialog } from '@angular/material/dialog'; import { AddMemberFormComponent } from './add-member-form/add-member-form.component'; import { AppState } from '../../../store/model/app-state-model'; import { Store } from '@ngrx/store'; -import { getAllMembers } from '../../../store/selectors/members.selectors'; +import { selectAllMembers } from '../../../store/selectors/members.selectors'; import { loadMembers, removeMember, @@ -37,8 +37,8 @@ export class MemberTableComponent implements OnInit, OnDestroy { constructor(private dialog: MatDialog, private store: Store) {} ngOnInit(): void { - this.store.dispatch(loadMembers()); - this.store.select(getAllMembers) + + this.store.select(selectAllMembers) .pipe(takeUntil(this.onDestroy$)) .subscribe((data) => { this.dataSource = new MatTableDataSource(data); diff --git a/src/app/components/routes/route/route.component.html b/src/app/components/routes/route/route.component.html index ebd6ad4..45eac15 100644 --- a/src/app/components/routes/route/route.component.html +++ b/src/app/components/routes/route/route.component.html @@ -1,7 +1,7 @@ reorder - favorite + favorite {{ route?.name }} diff --git a/src/app/components/routes/route/route.component.ts b/src/app/components/routes/route/route.component.ts index 4e3e006..f058d69 100644 --- a/src/app/components/routes/route/route.component.ts +++ b/src/app/components/routes/route/route.component.ts @@ -1,19 +1,14 @@ -import { - Component, - EventEmitter, - Input, - OnChanges, - OnInit, - Output, -} from '@angular/core'; -import { Router } from '@angular/router'; +import { Component, Input, OnChanges, OnInit } from '@angular/core'; + import { Route } from '../../../models/route'; import { Store } from '@ngrx/store'; import { AppState } from '../../../store/model/app-state-model'; import { removeRoute } from '../../../store/actions/routes.actions'; -import { Member } from '../../../models/member'; -import { Subject } from 'rxjs'; -import { selectCurrentMemberFavorites, selectFavoriteRouteIds } from 'src/app/store/selectors/members.selectors'; + +import { + addMemberFavorite, + removeMemberFavorite, +} from 'src/app/store/actions/members.actions'; @Component({ selector: 'app-route', @@ -22,44 +17,43 @@ import { selectCurrentMemberFavorites, selectFavoriteRouteIds } from 'src/app/st }) export class RouteComponent implements OnInit, OnChanges { @Input() route: Route | undefined; - // @Input() currentMember: Member | undefined; - - // containsFavorite: boolean = false; - // favorites$ = this.store.select(selectCurrentMemberFavorites); - @Input() favorites: Route[] | undefined | null= []; + @Input() favorites: Route[] | undefined | null = []; isFavorite: boolean = false; - onDestroy$ = new Subject(); - - constructor(private router: Router, private store: Store) { - } + constructor(private store: Store) {} - ngOnInit(): void { - - } + ngOnInit(): void {} ngOnChanges(): void { - this.isFavorite = this.checkIfFavorite(); -} + this.isFavorite = this.checkFavorite(); + } - //TODO Don't need const here - deleteRoute(route: Route): void { + //EventEmitter und in ParentComponent löschen + onDeleteRoute(route: Route): void { const id = route.id !== undefined ? route.id : 0; this.store.dispatch(removeRoute({ id })); } - checkIfFavorite(): boolean { - if(this.favorites && this.route) { - for(let favorite of this.favorites) { - if(favorite.id === this.route.id) { - return true + checkFavorite(): boolean { + if (this.favorites && this.route) { + for (let favorite of this.favorites) { + if (favorite.id === this.route.id) { + return true; } } } return false; } - toggleFavoriteRoute() {} + toggleFavoriteRoute(favoriteRoute: Route) { + if (!this.isFavorite) { + this.store.dispatch(addMemberFavorite({ favoriteRoute })); + console.log(favoriteRoute); + } else { + this.store.dispatch(removeMemberFavorite({ favoriteRoute })); + console.log(favoriteRoute); + } + } // const favRoutes = this.currentMember?.favouriteRoutes; // if (!this.containsFavorite && this.route !== undefined) { diff --git a/src/app/components/routes/routes.component.ts b/src/app/components/routes/routes.component.ts index 63f15b9..1aaed87 100644 --- a/src/app/components/routes/routes.component.ts +++ b/src/app/components/routes/routes.component.ts @@ -1,12 +1,12 @@ -import { Component, OnChanges, OnDestroy, OnInit, Output, SimpleChanges } from '@angular/core'; +import { Component, OnDestroy, OnInit, Output } from '@angular/core'; import { Route } from '../../models/route'; import { Store } from '@ngrx/store'; -import { Observable, Subject, takeUntil } from 'rxjs'; +import { Subject } from 'rxjs'; import { AppState } from '../../store/model/app-state-model'; import { loadRoutes } from '../../store/actions/routes.actions'; import { getAllRoutes } from '../../store/selectors/routes.selectors'; -import { Actions, ofType } from '@ngrx/effects'; -import * as RouteActions from '../../store/actions/routes.actions'; + + import { selectCurrentMemberFavorites } from 'src/app/store/selectors/members.selectors'; @Component({ @@ -14,29 +14,17 @@ import { selectCurrentMemberFavorites } from 'src/app/store/selectors/members.se templateUrl: './routes.component.html', styleUrls: ['./routes.component.scss'], }) -export class RoutesComponent implements OnInit, OnDestroy, OnChanges { - @Output() routes$: Observable = this.store.select(getAllRoutes); +export class RoutesComponent implements OnInit, OnDestroy { + @Output() routes$ = this.store.select(getAllRoutes); @Output() favorites$ = this.store.select(selectCurrentMemberFavorites); onDestroy$ = new Subject(); - constructor(private store: Store, delete$: Actions) { + constructor(private store: Store) { this.store.dispatch(loadRoutes()); - // delete$ - // .pipe(ofType(RouteActions.removeRouteSuccess), takeUntil(this.onDestroy$)) - // .subscribe(() => { - // this.store.dispatch(loadRoutes()); - // }); - } - ngOnChanges(){ - } - ngOnInit(): void { - - } + ngOnInit(): void {} ngOnDestroy(): void { - this.onDestroy$.next(); - this.onDestroy$.complete(); } } diff --git a/src/app/routes/route/route-detail-page/route-detail-page.component.scss b/src/app/routes/route/route-detail-page/route-detail-page.component.scss deleted file mode 100644 index df22293..0000000 --- a/src/app/routes/route/route-detail-page/route-detail-page.component.scss +++ /dev/null @@ -1,50 +0,0 @@ -h2 { - font-size: 1.3rem; - width: 60%; - margin: 30px auto; - display: flex; - justify-content: center; - color: darkred; -} - -mat-divider { - width: 30%; - display: flex; - margin: 0px auto 20px auto; - background-color: darkred; -} -.example-card { - max-width: 500px; - margin: 20px auto; - padding: 20px; - - button { - font-size: 1.2rem; - width: 100px; - height: 40px; - cursor: pointer; - } - - mat-card-title { - font-size: 2rem; - margin-bottom: 40px; - } - - mat-divider { - width: 95%; - background-color: darkgrey; - margin-left: 10px; - margin-top: -10px; - } - - mat-card-subtitle { - font-size: 1.4rem; - margin-top: 50px; - margin-bottom: 30px; - } - - p { - margin-bottom: 30px; - font-size: 1.2rem; - } -} diff --git a/src/app/store/actions/members.actions.ts b/src/app/store/actions/members.actions.ts index 6a35e5a..00a08fe 100644 --- a/src/app/store/actions/members.actions.ts +++ b/src/app/store/actions/members.actions.ts @@ -77,19 +77,26 @@ export const updateMemberFailure = createAction( props<{ error: string }>() ); -export const addFavoriteRoute = createAction( +export const addMemberFavorite = createAction( '[Member] Add Favorite Route', - props<{ route: Route }>() + props<{ favoriteRoute: Route }>() ); -export const removeFavoriteRoute = createAction( - '[Member] Remove Favorite Route', - props<{ route: Route }>() +export const addMemberFavoriteSuccess = createAction( + '[Member] Add Favorite Route Success', + props<{ favoriteRoute: Route }>() ); +export const removeMemberFavorite = createAction( + '[Member] Remove Favorite Route', + props<{ favoriteRoute: Route }>() +); +export const removeMemberFavoriteSuccess = createAction( + '[Member] Remove Favorite Route', + props<{ favoriteRoute: Route }>() +); -// load specific route export const getCurrentMember = createAction('[Member] Load Current Member'); export const updateCurrentMember = createAction( diff --git a/src/app/store/effects/members.effects.ts b/src/app/store/effects/members.effects.ts index de94018..6a7a476 100644 --- a/src/app/store/effects/members.effects.ts +++ b/src/app/store/effects/members.effects.ts @@ -1,17 +1,9 @@ import { Injectable } from '@angular/core'; import { Actions, createEffect, ofType } from '@ngrx/effects'; -import { of, switchMap, tap } from 'rxjs'; -import { - map, - catchError, - mergeMap, - exhaustMap, - concatMap, -} from 'rxjs/operators'; +import { of } from 'rxjs'; +import { map, catchError, mergeMap, concatMap, withLatestFrom } from 'rxjs/operators'; import * as MembersActions from '../actions/members.actions'; import { MemberService } from '../../services/member.service'; -import { AppState } from '../model/app-state-model'; -import { Store } from '@ngrx/store'; @Injectable() export class MembersEffects { @@ -64,8 +56,25 @@ export class MembersEffects { ) ); + // updateMemberFavorite$ = createEffect(() => + // this.actions$.pipe( + // ofType(MembersActions.addMemberFavorite), + // concatMap(({favoriteRoute}) => + // of(favoriteRoute).pipe(withLatestFrom(this.store.select.selectCurrentMember))) + // ), + // map(([]))) - + // addMemberFavorite$ = createEffect(() => + // this.actions$.pipe( + // ofType(MembersActions.addFavoriteRoute), + // concatMap(({ favoriteRoute }) => { + // return this.memberService.updateMember(favoriteRoute).pipe( + // mapTo(MembersActions.addFavoriteRoute({ favoriteRoute })), + // catchError(() => of(removeFavoriteRoute({ favoriteRoute }))) + // ); + // }) + // ) + // ); constructor( private actions$: Actions, diff --git a/src/app/store/reducers/members.reducer.ts b/src/app/store/reducers/members.reducer.ts index 7df4752..3e53b74 100644 --- a/src/app/store/reducers/members.reducer.ts +++ b/src/app/store/reducers/members.reducer.ts @@ -66,7 +66,6 @@ export const membersReducer = createReducer( on(MemberActions.addMember, (state): MembersState => { return { ...state, - loading: false, }; }), @@ -111,21 +110,38 @@ export const membersReducer = createReducer( }; }), - on(MemberActions.addFavoriteRoute, (state, {route}): MembersState => { - const favorites = state.favorites.filter(favorite => favorite.id !== route.id).concat(route); - return { ...state, favorites }; - }), - - on(MemberActions.removeFavoriteRoute, (state, {route}): MembersState => { - const favorites = state.favorites.filter(favorite => favorite.id !== route.id); - return { ...state, favorites }; - }), + on( + MemberActions.addMemberFavorite, + (state, { favoriteRoute }): MembersState => { + if (state.currentMember?.favouriteRoutes) { + const favorites = state.currentMember.favouriteRoutes + .filter((favorite) => favorite.id !== favoriteRoute.id) + .concat(favoriteRoute); + return { ...state, favorites }; + } + return { ...state }; + } + ), + + on( + MemberActions.removeMemberFavorite, + (state, { favoriteRoute }): MembersState => { + if (state.currentMember?.favouriteRoutes) { + const favorites = state.currentMember.favouriteRoutes.filter( + (favorite) => favorite.id !== favoriteRoute.id + ); + return { ...state, favorites }; + } + return { ...state }; + } + + ), //Get Current member on(MemberActions.getCurrentMember, (state): MembersState => { return { ...state, - loading:true, + loading: true, }; }), @@ -136,7 +152,7 @@ export const membersReducer = createReducer( loading: true, }; - }), + }) // on(MemberActions.updateCurrentMemberSuccess, (state, action): MembersState => { // return { // ...state, diff --git a/src/app/store/reducers/routes.reducer.ts b/src/app/store/reducers/routes.reducer.ts index 411f9d0..80c76ed 100644 --- a/src/app/store/reducers/routes.reducer.ts +++ b/src/app/store/reducers/routes.reducer.ts @@ -48,45 +48,25 @@ export const routesReducer = createReducer( loading: false, }; }), - //add route - on(RouteActions.addRoute, (state, { route }): RoutesState => { + + on(RouteActions.addRoute, (state): RoutesState => { return { ...state, loading: true, }; }), - on(RouteActions.addRouteSuccess, (state, action): RoutesState => { + on(RouteActions.addRouteSuccess, (state, {route}): RoutesState => { return { ...state, - routes: [...state.routes, action.route], + routes: [...state.routes, route], loading: false, }; }), - on(RouteActions.addRouteFail, (state, action): RoutesState => { + on(RouteActions.addRouteFail, (state, {error}): RoutesState => { return { ...state, loading: false, - error: action.error, - }; - }), - on(RouteActions.addRoute, (state, { route }): RoutesState => { - return { - ...state, - loading: true, - }; - }), - on(RouteActions.addRouteSuccess, (state, action): RoutesState => { - return { - ...state, - routes: [...state.routes, action.route], - loading: false, - }; - }), - on(RouteActions.addRouteFail, (state, action): RoutesState => { - return { - ...state, - loading: false, - error: action.error, + error: error, }; }), // remove route diff --git a/src/app/store/selectors/members.selectors.ts b/src/app/store/selectors/members.selectors.ts index 8735d54..3403620 100644 --- a/src/app/store/selectors/members.selectors.ts +++ b/src/app/store/selectors/members.selectors.ts @@ -1,7 +1,6 @@ import { createFeatureSelector, createSelector} from '@ngrx/store'; import { MembersState } from '../reducers/members.reducer'; -import { FavoriteRoute } from 'src/app/models/favoriteRoute'; -import { removeFavoriteRoute } from '../actions/members.actions'; + export const MEMBER_STATE = 'members'; -- GitLab From 4a24a635f022cd37dac9100bb2dbac3cd828ec75 Mon Sep 17 00:00:00 2001 From: Marcel Date: Wed, 22 Feb 2023 15:00:06 +0100 Subject: [PATCH 09/13] removed @Output and onDestroy$ in routes component --- .../routes/route/route.component.ts | 24 ++++++++----------- src/app/components/routes/routes.component.ts | 5 ++-- src/app/store/effects/members.effects.ts | 15 ++++++------ 3 files changed, 20 insertions(+), 24 deletions(-) diff --git a/src/app/components/routes/route/route.component.ts b/src/app/components/routes/route/route.component.ts index f058d69..cb8da24 100644 --- a/src/app/components/routes/route/route.component.ts +++ b/src/app/components/routes/route/route.component.ts @@ -5,11 +5,6 @@ import { Store } from '@ngrx/store'; import { AppState } from '../../../store/model/app-state-model'; import { removeRoute } from '../../../store/actions/routes.actions'; -import { - addMemberFavorite, - removeMemberFavorite, -} from 'src/app/store/actions/members.actions'; - @Component({ selector: 'app-route', templateUrl: './route.component.html', @@ -46,14 +41,15 @@ export class RouteComponent implements OnInit, OnChanges { } toggleFavoriteRoute(favoriteRoute: Route) { - if (!this.isFavorite) { - this.store.dispatch(addMemberFavorite({ favoriteRoute })); - console.log(favoriteRoute); - } else { - this.store.dispatch(removeMemberFavorite({ favoriteRoute })); - console.log(favoriteRoute); - } - } + // if (!this.isFavorite) { + // this.store.dispatch(addMemberFavorite({ favoriteRoute })); + // console.log(favoriteRoute); + // } else { + // this.store.dispatch(removeMemberFavorite({ favoriteRoute })); + // console.log(favoriteRoute); + // } + // } + // const favRoutes = this.currentMember?.favouriteRoutes; // if (!this.containsFavorite && this.route !== undefined) { @@ -65,7 +61,7 @@ export class RouteComponent implements OnInit, OnChanges { // if (indexOfFav !== undefined && indexOfFav > -1) { // favRoutes?.splice(indexOfFav, 1); // } -} +}} // const member = this.currentMember; // if (member) { diff --git a/src/app/components/routes/routes.component.ts b/src/app/components/routes/routes.component.ts index 1aaed87..d4ab9b1 100644 --- a/src/app/components/routes/routes.component.ts +++ b/src/app/components/routes/routes.component.ts @@ -15,9 +15,8 @@ import { selectCurrentMemberFavorites } from 'src/app/store/selectors/members.se styleUrls: ['./routes.component.scss'], }) export class RoutesComponent implements OnInit, OnDestroy { - @Output() routes$ = this.store.select(getAllRoutes); - @Output() favorites$ = this.store.select(selectCurrentMemberFavorites); - onDestroy$ = new Subject(); + routes$ = this.store.select(getAllRoutes); + favorites$ = this.store.select(selectCurrentMemberFavorites); constructor(private store: Store) { this.store.dispatch(loadRoutes()); diff --git a/src/app/store/effects/members.effects.ts b/src/app/store/effects/members.effects.ts index 6a7a476..1ee1b78 100644 --- a/src/app/store/effects/members.effects.ts +++ b/src/app/store/effects/members.effects.ts @@ -56,13 +56,14 @@ export class MembersEffects { ) ); - // updateMemberFavorite$ = createEffect(() => - // this.actions$.pipe( - // ofType(MembersActions.addMemberFavorite), - // concatMap(({favoriteRoute}) => - // of(favoriteRoute).pipe(withLatestFrom(this.store.select.selectCurrentMember))) - // ), - // map(([]))) + // updateMemberFavorite$ = createEffect(() => + // this.actions$.pipe( + // ofType(MembersActions.addMemberFavorite), + // map(({favoriteRoute}) => + // of(favoriteRoute).pipe(withLatestFrom(this.store.select.selectCurrentMember))) + // ), + // map(([]))) + // addMemberFavorite$ = createEffect(() => // this.actions$.pipe( -- GitLab From 65c2eb6a69d175da152471e3513dbab4135dfaf8 Mon Sep 17 00:00:00 2001 From: Marcel Date: Wed, 22 Feb 2023 15:08:10 +0100 Subject: [PATCH 10/13] removed imports in routes component --- src/app/components/routes/routes.component.ts | 8 ++------ 1 file changed, 2 insertions(+), 6 deletions(-) diff --git a/src/app/components/routes/routes.component.ts b/src/app/components/routes/routes.component.ts index d4ab9b1..4ef63a7 100644 --- a/src/app/components/routes/routes.component.ts +++ b/src/app/components/routes/routes.component.ts @@ -1,12 +1,9 @@ -import { Component, OnDestroy, OnInit, Output } from '@angular/core'; -import { Route } from '../../models/route'; +import { Component, OnDestroy, OnInit } from '@angular/core'; import { Store } from '@ngrx/store'; -import { Subject } from 'rxjs'; import { AppState } from '../../store/model/app-state-model'; import { loadRoutes } from '../../store/actions/routes.actions'; import { getAllRoutes } from '../../store/selectors/routes.selectors'; - import { selectCurrentMemberFavorites } from 'src/app/store/selectors/members.selectors'; @Component({ @@ -24,6 +21,5 @@ export class RoutesComponent implements OnInit, OnDestroy { ngOnInit(): void {} - ngOnDestroy(): void { - } + ngOnDestroy(): void {} } -- GitLab From dd74d08f0514da3bc4cd6d930733ca622ec7c433 Mon Sep 17 00:00:00 2001 From: Marcel Date: Wed, 22 Feb 2023 15:10:26 +0100 Subject: [PATCH 11/13] uncommented togglefavorite in route component --- .../components/routes/route/route.component.ts | 17 +++++++++-------- 1 file changed, 9 insertions(+), 8 deletions(-) diff --git a/src/app/components/routes/route/route.component.ts b/src/app/components/routes/route/route.component.ts index cb8da24..515c6e5 100644 --- a/src/app/components/routes/route/route.component.ts +++ b/src/app/components/routes/route/route.component.ts @@ -4,6 +4,7 @@ import { Route } from '../../../models/route'; import { Store } from '@ngrx/store'; import { AppState } from '../../../store/model/app-state-model'; import { removeRoute } from '../../../store/actions/routes.actions'; +import { addMemberFavorite, removeMemberFavorite } from 'src/app/store/actions/members.actions'; @Component({ selector: 'app-route', @@ -41,14 +42,14 @@ export class RouteComponent implements OnInit, OnChanges { } toggleFavoriteRoute(favoriteRoute: Route) { - // if (!this.isFavorite) { - // this.store.dispatch(addMemberFavorite({ favoriteRoute })); - // console.log(favoriteRoute); - // } else { - // this.store.dispatch(removeMemberFavorite({ favoriteRoute })); - // console.log(favoriteRoute); - // } - // } + if (!this.isFavorite) { + this.store.dispatch(addMemberFavorite({ favoriteRoute })); + console.log(favoriteRoute); + } else { + this.store.dispatch(removeMemberFavorite({ favoriteRoute })); + console.log(favoriteRoute); + } + } // const favRoutes = this.currentMember?.favouriteRoutes; -- GitLab From 52999c26ac5c1971bc7cbb2f4f915f830145e934 Mon Sep 17 00:00:00 2001 From: Marcel Date: Wed, 22 Feb 2023 15:11:03 +0100 Subject: [PATCH 12/13] changed togglefavorite --- src/app/components/routes/route/route.component.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/app/components/routes/route/route.component.ts b/src/app/components/routes/route/route.component.ts index 515c6e5..fca247c 100644 --- a/src/app/components/routes/route/route.component.ts +++ b/src/app/components/routes/route/route.component.ts @@ -62,7 +62,7 @@ export class RouteComponent implements OnInit, OnChanges { // if (indexOfFav !== undefined && indexOfFav > -1) { // favRoutes?.splice(indexOfFav, 1); // } -}} +} // const member = this.currentMember; // if (member) { -- GitLab From 7e6e2643477e58e09e2b0c4256d7d99a6c43c3ca Mon Sep 17 00:00:00 2001 From: Felix Jian Date: Wed, 22 Feb 2023 18:28:06 +0100 Subject: [PATCH 13/13] update favorite routes via effect. --- .../add-member-form.component.ts | 11 ++-- .../routes/route/route.component.ts | 36 ++++------- .../components/routes/routes.component.html | 2 +- src/app/components/routes/routes.component.ts | 4 +- src/app/models/member.ts | 8 +-- src/app/store/actions/members.actions.ts | 8 +-- src/app/store/effects/members.effects.ts | 60 +++++++++++-------- 7 files changed, 63 insertions(+), 66 deletions(-) diff --git a/src/app/components/members/member-table/add-member-form/add-member-form.component.ts b/src/app/components/members/member-table/add-member-form/add-member-form.component.ts index 6fad4ea..4450012 100644 --- a/src/app/components/members/member-table/add-member-form/add-member-form.component.ts +++ b/src/app/components/members/member-table/add-member-form/add-member-form.component.ts @@ -67,13 +67,14 @@ export class AddMemberFormComponent implements OnInit { onSubmit() { if (this.addMemberForm.valid) { const member: Member = { - firstName: this.addMemberForm.get('firstName')?.value, - lastName: this.addMemberForm.get('lastName')?.value, + firstName: this.addMemberForm.get('firstName')?.value as string || "", + lastName: this.addMemberForm.get('lastName')?.value as string || "", addressDto: { - street: this.addMemberForm.get('addressDto.street')?.value, - houseNumber: this.addMemberForm.get('addressDto.houseNumber')?.value, - postCode: this.addMemberForm.get('addressDto.postCode')?.value, + street: this.addMemberForm.get('addressDto.street')?.value as string || "", + houseNumber: this.addMemberForm.get('addressDto.houseNumber')?.value as number || 0, + postCode: this.addMemberForm.get('addressDto.postCode')?.value as string || "", }, + favouriteRoutes: [], }; this.store.dispatch(addMember({ member })); diff --git a/src/app/components/routes/route/route.component.ts b/src/app/components/routes/route/route.component.ts index fca247c..fd218c4 100644 --- a/src/app/components/routes/route/route.component.ts +++ b/src/app/components/routes/route/route.component.ts @@ -5,6 +5,7 @@ import { Store } from '@ngrx/store'; import { AppState } from '../../../store/model/app-state-model'; import { removeRoute } from '../../../store/actions/routes.actions'; import { addMemberFavorite, removeMemberFavorite } from 'src/app/store/actions/members.actions'; +import { Member } from 'src/app/models/member'; @Component({ selector: 'app-route', @@ -13,7 +14,7 @@ import { addMemberFavorite, removeMemberFavorite } from 'src/app/store/actions/m }) export class RouteComponent implements OnInit, OnChanges { @Input() route: Route | undefined; - @Input() favorites: Route[] | undefined | null = []; + @Input() member: Member | undefined; isFavorite: boolean = false; constructor(private store: Store) {} @@ -24,15 +25,14 @@ export class RouteComponent implements OnInit, OnChanges { this.isFavorite = this.checkFavorite(); } - //EventEmitter und in ParentComponent löschen onDeleteRoute(route: Route): void { const id = route.id !== undefined ? route.id : 0; this.store.dispatch(removeRoute({ id })); } checkFavorite(): boolean { - if (this.favorites && this.route) { - for (let favorite of this.favorites) { + if (this.member?.favouriteRoutes && this.route) { + for (let favorite of this.member.favouriteRoutes) { if (favorite.id === this.route.id) { return true; } @@ -42,30 +42,16 @@ export class RouteComponent implements OnInit, OnChanges { } toggleFavoriteRoute(favoriteRoute: Route) { + if (!this.member || !this.member.id) { + // TODO: handle this case in some way. If id is undefined, member was not saved yet. + return + } + if (!this.isFavorite) { - this.store.dispatch(addMemberFavorite({ favoriteRoute })); - console.log(favoriteRoute); + this.store.dispatch(addMemberFavorite({ member: this.member, favoriteRoute })); } else { - this.store.dispatch(removeMemberFavorite({ favoriteRoute })); - console.log(favoriteRoute); + this.store.dispatch(removeMemberFavorite({ member: this.member, favoriteRoute })); } } - - // const favRoutes = this.currentMember?.favouriteRoutes; - // if (!this.containsFavorite && this.route !== undefined) { - // favRoutes?.push(this.route); - // } else if (this.containsFavorite && this.route !== undefined) { - // const indexOfFav = favRoutes?.findIndex( - // (route) => route.id === this.route?.id - // ); - // if (indexOfFav !== undefined && indexOfFav > -1) { - // favRoutes?.splice(indexOfFav, 1); - // } } - -// const member = this.currentMember; -// if (member) { -// this.store.dispatch(updateMember({ member })); -// } -// } diff --git a/src/app/components/routes/routes.component.html b/src/app/components/routes/routes.component.html index 3df666e..a55d0a7 100644 --- a/src/app/components/routes/routes.component.html +++ b/src/app/components/routes/routes.component.html @@ -6,7 +6,7 @@
- +
diff --git a/src/app/components/routes/routes.component.ts b/src/app/components/routes/routes.component.ts index 4ef63a7..d3dd761 100644 --- a/src/app/components/routes/routes.component.ts +++ b/src/app/components/routes/routes.component.ts @@ -4,7 +4,7 @@ import { AppState } from '../../store/model/app-state-model'; import { loadRoutes } from '../../store/actions/routes.actions'; import { getAllRoutes } from '../../store/selectors/routes.selectors'; -import { selectCurrentMemberFavorites } from 'src/app/store/selectors/members.selectors'; +import { selectCurrentMember } from 'src/app/store/selectors/members.selectors'; @Component({ selector: 'app-routes', @@ -13,7 +13,7 @@ import { selectCurrentMemberFavorites } from 'src/app/store/selectors/members.se }) export class RoutesComponent implements OnInit, OnDestroy { routes$ = this.store.select(getAllRoutes); - favorites$ = this.store.select(selectCurrentMemberFavorites); + member$ = this.store.select(selectCurrentMember); constructor(private store: Store) { this.store.dispatch(loadRoutes()); diff --git a/src/app/models/member.ts b/src/app/models/member.ts index 1e96dfe..d67b081 100644 --- a/src/app/models/member.ts +++ b/src/app/models/member.ts @@ -3,8 +3,8 @@ import {Route} from "./route"; export interface Member { id?: number; - firstName?: string; - lastName?: string; - addressDto?: Address; - favouriteRoutes?: Route[]; + firstName: string; + lastName: string; + addressDto: Address; + favouriteRoutes: Route[]; } diff --git a/src/app/store/actions/members.actions.ts b/src/app/store/actions/members.actions.ts index 00a08fe..5b74aaa 100644 --- a/src/app/store/actions/members.actions.ts +++ b/src/app/store/actions/members.actions.ts @@ -79,22 +79,22 @@ export const updateMemberFailure = createAction( export const addMemberFavorite = createAction( '[Member] Add Favorite Route', - props<{ favoriteRoute: Route }>() + props<{ member: Member, favoriteRoute: Route }>() ); export const addMemberFavoriteSuccess = createAction( '[Member] Add Favorite Route Success', - props<{ favoriteRoute: Route }>() + props<{ member: Member }>() ); export const removeMemberFavorite = createAction( '[Member] Remove Favorite Route', - props<{ favoriteRoute: Route }>() + props<{ member: Member, favoriteRoute: Route }>() ); export const removeMemberFavoriteSuccess = createAction( '[Member] Remove Favorite Route', - props<{ favoriteRoute: Route }>() + props<{ member: Member }>() ); export const getCurrentMember = createAction('[Member] Load Current Member'); diff --git a/src/app/store/effects/members.effects.ts b/src/app/store/effects/members.effects.ts index 1ee1b78..d45863c 100644 --- a/src/app/store/effects/members.effects.ts +++ b/src/app/store/effects/members.effects.ts @@ -27,8 +27,8 @@ export class MembersEffects { ), map( (id) => MembersActions.removeMemberSuccess({ id }), - catchError((error) => of(MembersActions.removeMemberFailure(error))) - ) + ), + catchError((error) => of(MembersActions.removeMemberFailure(error))) ) ); @@ -38,8 +38,8 @@ export class MembersEffects { concatMap((data) => this.memberService.addMember(data.member)), map( (member) => MembersActions.addMemberSuccess({ member }), - catchError((error) => of(MembersActions.addMemberFailure(error))) - ) + ), + catchError((error) => of(MembersActions.addMemberFailure(error))) ) ); @@ -51,31 +51,41 @@ export class MembersEffects { ), map( (member) => MembersActions.updateMemberSuccess({ member }), - catchError((error) => of(MembersActions.updateMemberFailure(error))) - ) + ), + catchError((error) => of(MembersActions.updateMemberFailure(error))) ) ); - // updateMemberFavorite$ = createEffect(() => - // this.actions$.pipe( - // ofType(MembersActions.addMemberFavorite), - // map(({favoriteRoute}) => - // of(favoriteRoute).pipe(withLatestFrom(this.store.select.selectCurrentMember))) - // ), - // map(([]))) - + addMemberFavorite$ = createEffect(() => + this.actions$.pipe( + ofType(MembersActions.addMemberFavorite), + map(({ member, favoriteRoute }) => + MembersActions.updateMember({ + member: { + // TODO: clone address dto? + ...member, + favouriteRoutes: [ ...member.favouriteRoutes, favoriteRoute ] + } + }) + ), + ) + ); - // addMemberFavorite$ = createEffect(() => - // this.actions$.pipe( - // ofType(MembersActions.addFavoriteRoute), - // concatMap(({ favoriteRoute }) => { - // return this.memberService.updateMember(favoriteRoute).pipe( - // mapTo(MembersActions.addFavoriteRoute({ favoriteRoute })), - // catchError(() => of(removeFavoriteRoute({ favoriteRoute }))) - // ); - // }) - // ) - // ); + removeMemberFavorite$ = createEffect(() => + this.actions$.pipe( + ofType(MembersActions.removeMemberFavorite), + map(({ member, favoriteRoute }) => { + return MembersActions.updateMember({ + member: { + // TODO: clone address dto? + ...member, + favouriteRoutes: member.favouriteRoutes.filter(x => x.id !== favoriteRoute.id) + } + }) + } + ), + ) + ); constructor( private actions$: Actions, -- GitLab