diff --git a/apps/web/src/app/modules/board/reducers/boardPage.reducer.ts b/apps/web/src/app/modules/board/reducers/boardPage.reducer.ts index a462caa7..8128cf9f 100644 --- a/apps/web/src/app/modules/board/reducers/boardPage.reducer.ts +++ b/apps/web/src/app/modules/board/reducers/boardPage.reducer.ts @@ -518,6 +518,7 @@ export const boardPageFeature = createFeature({ selectUserHighlight, selectShowUserVotes, selectFocusId, + selectBoardUsers, }) => ({ isFocus: (id: string) => { return createSelector(selectFocusId, (focusId) => focusId.includes(id)); @@ -532,6 +533,16 @@ export const boardPageFeature = createFeature({ return id ? !!id : !!userVotes; }, ), + userHighlightInfo: createSelector( + selectUserHighlight, + selectShowUserVotes, + selectBoardUsers, + (userHighlight, userVotes, users) => { + return users.find( + (it) => it.id === userHighlight || it.id === userVotes, + ); + }, + ), selectMoveEnabled: createSelector( selectMoveEnabled, selectFollow, diff --git a/apps/web/src/app/shared/follow-user/follow-user.component.ts b/apps/web/src/app/shared/follow-user/follow-user.component.ts index 68eda7dd..effcd857 100644 --- a/apps/web/src/app/shared/follow-user/follow-user.component.ts +++ b/apps/web/src/app/shared/follow-user/follow-user.component.ts @@ -1,5 +1,4 @@ import { ChangeDetectionStrategy, Component, inject } from '@angular/core'; -import { CommonModule } from '@angular/common'; import { Store } from '@ngrx/store'; import { boardPageFeature } from '../../modules/board/reducers/boardPage.reducer'; import { map, switchMap } from 'rxjs'; @@ -7,17 +6,18 @@ import { filterNil } from '../../commons/operators/filter-nil'; import { BoardPageActions } from '../../modules/board/actions/board-page.actions'; import { MatButtonModule } from '@angular/material/button'; import { BoardFacade } from '../../services/board-facade.service'; +import { toSignal } from '@angular/core/rxjs-interop'; @Component({ selector: 'tapiz-follow-user', - imports: [CommonModule, MatButtonModule], + imports: [MatButtonModule], template: ` - @if (userToFollow$ | async) { + @if (userToFollow(); as user) { } `, @@ -28,7 +28,7 @@ export class FollowUserComponent { #store = inject(Store); #boardFacade = inject(BoardFacade); - userToFollow$ = this.#store.select(boardPageFeature.selectFollow).pipe( + #userToFollow$ = this.#store.select(boardPageFeature.selectFollow).pipe( switchMap((follow) => { return this.#boardFacade.getUsers().pipe( map((users) => { @@ -38,12 +38,14 @@ export class FollowUserComponent { }), ); + userToFollow = toSignal(this.#userToFollow$); + stopFollowingUser() { this.#store.dispatch(BoardPageActions.followUser({ id: '' })); } constructor() { - this.userToFollow$.pipe(filterNil()).subscribe((user) => { + this.#userToFollow$.pipe(filterNil()).subscribe((user) => { if (user.position && user.zoom) { this.#store.dispatch( BoardPageActions.setUserView({ diff --git a/apps/web/src/app/shared/stop-highlight/stop-highlight.ts b/apps/web/src/app/shared/stop-highlight/stop-highlight.ts index b251f156..2373b790 100644 --- a/apps/web/src/app/shared/stop-highlight/stop-highlight.ts +++ b/apps/web/src/app/shared/stop-highlight/stop-highlight.ts @@ -9,12 +9,12 @@ import { boardPageFeature } from '../../modules/board/reducers/boardPage.reducer selector: 'tapiz-stop-highlight', imports: [MatButtonModule], template: ` - @if (highlight()) { + @if (highlight(); as user) { } `, @@ -24,7 +24,7 @@ import { boardPageFeature } from '../../modules/board/reducers/boardPage.reducer export class StopHighlightComponent { #store = inject(Store); - highlight = this.#store.selectSignal(boardPageFeature.isUserHighlighActive); + highlight = this.#store.selectSignal(boardPageFeature.userHighlightInfo); stop() { this.#store.dispatch(BoardPageActions.stopHighlight());