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());