feat: show user highlight & follow name

juanfran · Feb 20, 2025 · 264ec57 · 264ec57
1 parent d0ddcb8
commit 264ec57
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 9 deletions.
diff --git 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
@@ -1,23 +1,23 @@
 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';
 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) {
       <button
         (click)="stopFollowingUser()"
         mat-raised-button
         color="primary">
-        Stop following user
+        Stop following {{ user.name }}
       </button>
     }
   `,
@@ -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
@@ -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) {
       <button
         (click)="stop()"
         mat-raised-button
         color="primary">
-        Stop highlight user
+        Stop highlight {{ user.name }}
       </button>
     }
   `,
@@ -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());