From 45c94ab0f6eb6e7b66c107474038fed1a82cd100 Mon Sep 17 00:00:00 2001 From: dcaslin Date: Sat, 11 Apr 2026 12:18:14 -0400 Subject: [PATCH] Convert clan-state.service BehaviorSubjects to Angular signals Converted 17 BehaviorSubjects in ClanStateService to signals and updated 16 consumer components/templates. Replaced .next() with .set(), .getValue() with direct signal calls, removed async pipe from templates, and converted component subscriptions to effect(). Also converted local BehaviorSubjects in 4 child components to signals. Co-Authored-By: Claude Opus 4.6 --- docs/modernization-plan.md | 21 +-- package.json | 2 +- .../clan-badges/clan-badges.component.html | 2 +- .../clan-badges/clan-badges.component.ts | 4 +- .../clan-collection-search.component.html | 2 +- .../clan-collection-search.component.ts | 36 ++--- .../clan-collections.component.html | 2 +- .../clan-collections.component.ts | 4 +- .../clan/clan-info/clan-info.component.html | 10 +- src/app/clan/clan-info/clan-info.component.ts | 25 ++-- .../clan-lifetime.component.html | 10 +- .../clan-lifetime/clan-lifetime.component.ts | 28 ++-- .../clan-members/clan-members.component.html | 8 +- .../clan-milestones.component.html | 4 +- .../clan-milestones.component.ts | 21 ++- .../clan-settings.component.html | 2 +- .../clan-settings/clan-settings.component.ts | 4 +- src/app/clan/clan-state.service.ts | 127 +++++++++--------- .../clan-seals/clan-seals.component.html | 2 +- .../clan-seals/clan-seals.component.ts | 4 +- .../clan-triumph-search.component.html | 2 +- .../clan-triumph-search.component.ts | 28 ++-- .../clan-triumph-tracked.component.html | 2 +- .../clan-triumph-tracked.component.ts | 4 +- .../clan-triumphs.component.html | 2 +- .../clan-triumphs/clan-triumphs.component.ts | 4 +- src/app/clan/clan.component.html | 10 +- src/app/clan/clan.component.ts | 4 +- 28 files changed, 182 insertions(+), 192 deletions(-) diff --git a/docs/modernization-plan.md b/docs/modernization-plan.md index 1e71b6448..c14484630 100644 --- a/docs/modernization-plan.md +++ b/docs/modernization-plan.md @@ -108,14 +108,19 @@ Remaining: ## Phase 6: Further Signal Adoption -274 `BehaviorSubject` instances across 52 files. Some already converted to signals. - -Priority conversions: -- [ ] `gear-filter-state.service.ts` (45 BehaviorSubjects) -- [ ] `uber-list-state.service.ts` (28 BehaviorSubjects) -- [ ] `clan-state.service.ts` (18 BehaviorSubjects) -- [ ] Evaluate Angular 19 signal APIs (`resource()`, `linkedSignal()`) after Phase 2 -- [ ] Convert incrementally, one service per PR +Started at 177 `BehaviorSubject` instances across 52 files. + +Completed (PR #1): +- [x] `clan-state.service.ts` — converted 17 BehaviorSubjects to signals, updated 16 consumer components/templates + - Service: `.next()` → `.set()`, `.getValue()` → `()` + - Templates: removed `| async` pipe, use direct signal call `()` + - Components: replaced `.subscribe()` with `effect()`, converted local BehaviorSubjects to signals + +Remaining: +- [ ] `gear-filter-state.service.ts` (23 BehaviorSubjects) +- [ ] `uber-list-state.service.ts` (17 BehaviorSubjects) +- [ ] Evaluate Angular 19 signal APIs (`resource()`, `linkedSignal()`) +- [ ] Convert remaining services incrementally, one per PR **Done when:** BehaviorSubject count under 150. The three largest files are converted. diff --git a/package.json b/package.json index c8511d163..e3c573c31 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "d2-checklist", - "version": "30.1.0", + "version": "30.2.0", "manifest": "242999.26.03.25.2000-1-bnet.64463", "license": "MIT", "scripts": { diff --git a/src/app/clan/clan-collections/clan-badges/clan-badges.component.html b/src/app/clan/clan-collections/clan-badges/clan-badges.component.html index f8f96cba7..8458ff2f1 100644 --- a/src/app/clan/clan-collections/clan-badges/clan-badges.component.html +++ b/src/app/clan/clan-collections/clan-badges/clan-badges.component.html @@ -1,4 +1,4 @@ - +
diff --git a/src/app/clan/clan-collections/clan-badges/clan-badges.component.ts b/src/app/clan/clan-collections/clan-badges/clan-badges.component.ts index d52dc8c7d..1715091ad 100644 --- a/src/app/clan/clan-collections/clan-badges/clan-badges.component.ts +++ b/src/app/clan/clan-collections/clan-badges/clan-badges.component.ts @@ -3,7 +3,7 @@ import { MatDialog, MatDialogConfig } from '@angular/material/dialog'; import { ClanBadge, ClanStateService } from '@app/clan/clan-state.service'; import { ChildComponent } from '@app/shared/child.component'; import { ClanCollectionBadgeDialogComponent } from '../clan-collection-badge-dialog/clan-collection-badge-dialog.component'; -import { NgIf, NgFor, AsyncPipe } from '@angular/common'; +import { NgIf, NgFor } from '@angular/common'; import { MatButton } from '@angular/material/button'; @Component({ @@ -11,7 +11,7 @@ import { MatButton } from '@angular/material/button'; selector: 'd2c-clan-badges', templateUrl: './clan-badges.component.html', styleUrls: ['./clan-badges.component.scss'], - imports: [NgIf, NgFor, MatButton, AsyncPipe] + imports: [NgIf, NgFor, MatButton] }) export class ClanBadgesComponent extends ChildComponent { diff --git a/src/app/clan/clan-collections/clan-collection-search/clan-collection-search.component.html b/src/app/clan/clan-collections/clan-collection-search/clan-collection-search.component.html index 0a4dcd381..cf59beac8 100644 --- a/src/app/clan/clan-collections/clan-collection-search/clan-collection-search.component.html +++ b/src/app/clan/clan-collections/clan-collection-search/clan-collection-search.component.html @@ -1,4 +1,4 @@ -
+
Wildcard Search Collections diff --git a/src/app/clan/clan-collections/clan-collection-search/clan-collection-search.component.ts b/src/app/clan/clan-collections/clan-collection-search/clan-collection-search.component.ts index 6c8c849b6..ee56cdf9b 100644 --- a/src/app/clan/clan-collections/clan-collection-search/clan-collection-search.component.ts +++ b/src/app/clan/clan-collections/clan-collection-search/clan-collection-search.component.ts @@ -1,10 +1,10 @@ -import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core'; -import { ClanSearchableTriumph, ClanStateService } from '@app/clan/clan-state.service'; +import { ChangeDetectionStrategy, Component, effect, OnInit, signal } from '@angular/core'; +import { ClanSearchableCollection, ClanStateService } from '@app/clan/clan-state.service'; import { ChildComponent } from '@app/shared/child.component'; -import { BehaviorSubject, Subject } from 'rxjs'; -import { debounceTime, takeUntil } from 'rxjs/operators'; +import { Subject } from 'rxjs'; +import { debounceTime } from 'rxjs/operators'; import { takeUntilDestroyed } from '@angular/core/rxjs-interop'; -import { NgIf, NgFor, AsyncPipe } from '@angular/common'; +import { NgIf, NgFor } from '@angular/common'; import { MatFormField, MatLabel } from '@angular/material/form-field'; import { MatInput } from '@angular/material/input'; import { FormsModule } from '@angular/forms'; @@ -15,47 +15,47 @@ import { ClanCollectionItemComponent } from '../clan-collection-item/clan-collec selector: 'd2c-clan-collection-search', templateUrl: './clan-collection-search.component.html', styleUrls: ['./clan-collection-search.component.scss'], - imports: [NgIf, MatFormField, MatLabel, MatInput, FormsModule, NgFor, ClanCollectionItemComponent, AsyncPipe] + imports: [NgIf, MatFormField, MatLabel, MatInput, FormsModule, NgFor, ClanCollectionItemComponent] }) export class ClanCollectionSearchComponent extends ChildComponent implements OnInit { private collectionSearchSubject: Subject = new Subject(); public collectionFilterText: string | null = null; - public filteredCollection: BehaviorSubject = new BehaviorSubject([]); + public filteredCollection = signal([]); constructor(public state: ClanStateService) { super(); this.collectionFilterText = localStorage.getItem('collection-filter'); + effect(() => { + const _collections = this.state.searchableCollection(); + this.filterCollections(); + }); } ngOnInit() { - this.state.searchableTriumphs.pipe( - takeUntilDestroyed(this.destroyRef)).subscribe(p => { - this.filterTriumphs(); - }); this.collectionSearchSubject.pipe( takeUntilDestroyed(this.destroyRef), debounceTime(50)) .subscribe(() => { const saveMe = this.collectionFilterText == null ? null : this.collectionFilterText.toLowerCase(); localStorage.setItem('collection-filter', saveMe!); - this.filterTriumphs(); + this.filterCollections(); }); } collectionSearchChange() { this.collectionSearchSubject.next(); } - private filterTriumphs() { - const searchableCollection = this.state.searchableCollection.getValue(); + private filterCollections() { + const searchableCollection = this.state.searchableCollection(); if (this.collectionFilterText == null || this.collectionFilterText.trim().length == 0) { - this.filteredCollection.next([]); + this.filteredCollection.set([]); return; } if (searchableCollection == null) { - this.filteredCollection.next([]); + this.filteredCollection.set([]); return; } - const temp = []; + const temp: ClanSearchableCollection[] = []; const filterText = this.collectionFilterText.toLowerCase(); for (const t of searchableCollection) { if (temp.length > 20) { break; } @@ -63,7 +63,7 @@ export class ClanCollectionSearchComponent extends ChildComponent implements OnI temp.push(t); } } - this.filteredCollection.next(temp as any); + this.filteredCollection.set(temp); } } diff --git a/src/app/clan/clan-collections/clan-collections.component.html b/src/app/clan/clan-collections/clan-collections.component.html index c016d23cf..b832dc369 100644 --- a/src/app/clan/clan-collections/clan-collections.component.html +++ b/src/app/clan/clan-collections/clan-collections.component.html @@ -7,7 +7,7 @@ - + diff --git a/src/app/clan/clan-collections/clan-collections.component.ts b/src/app/clan/clan-collections/clan-collections.component.ts index b6790c2e9..af6b3aa19 100644 --- a/src/app/clan/clan-collections/clan-collections.component.ts +++ b/src/app/clan/clan-collections/clan-collections.component.ts @@ -5,14 +5,14 @@ import { ClanStateService } from '../clan-state.service'; import { MatTabNav, MatTabLink, MatTabNavPanel } from '@angular/material/tabs'; import { RouterLink, RouterLinkActive, RouterOutlet } from '@angular/router'; import { FaIconComponent } from '@fortawesome/angular-fontawesome'; -import { NgIf, AsyncPipe } from '@angular/common'; +import { NgIf } from '@angular/common'; @Component({ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'd2c-clan-collections', templateUrl: './clan-collections.component.html', styleUrls: ['./clan-collections.component.scss'], - imports: [MatTabNav, MatTabLink, RouterLink, RouterLinkActive, FaIconComponent, MatTabNavPanel, NgIf, RouterOutlet, AsyncPipe] + imports: [MatTabNav, MatTabLink, RouterLink, RouterLinkActive, FaIconComponent, MatTabNavPanel, NgIf, RouterOutlet] }) export class ClanCollectionsComponent extends ChildComponent { diff --git a/src/app/clan/clan-info/clan-info.component.html b/src/app/clan/clan-info/clan-info.component.html index eb8181b04..2378b942c 100644 --- a/src/app/clan/clan-info/clan-info.component.html +++ b/src/app/clan/clan-info/clan-info.component.html @@ -1,11 +1,11 @@ -
+

Progress

-
+
{{clanMs.name}} @@ -20,8 +20,8 @@

Progress

-
@@ -70,7 +70,7 @@

Membership Status

- + {{member.destinyUserInfo.displayName}} {{member.destinyUserInfo.platformName}} diff --git a/src/app/clan/clan-info/clan-info.component.ts b/src/app/clan/clan-info/clan-info.component.ts index 160499fe1..87b5fdae8 100644 --- a/src/app/clan/clan-info/clan-info.component.ts +++ b/src/app/clan/clan-info/clan-info.component.ts @@ -1,12 +1,9 @@ -import { ChangeDetectionStrategy, Component } from '@angular/core'; +import { ChangeDetectionStrategy, Component, effect, signal } from '@angular/core'; import { IconService } from '@app/service/icon.service'; import { BungieGroupMember, Sort } from '@app/service/model'; import { ChildComponent } from '@app/shared/child.component'; -import { BehaviorSubject } from 'rxjs'; -import { takeUntil } from 'rxjs/operators'; import { ClanStateService } from '../clan-state.service'; -import { takeUntilDestroyed } from '@angular/core/rxjs-interop'; -import { NgIf, NgFor, AsyncPipe, DecimalPipe, DatePipe } from '@angular/common'; +import { NgIf, NgFor, DecimalPipe, DatePipe } from '@angular/common'; import { FaIconComponent } from '@fortawesome/angular-fontawesome'; import { MatButton } from '@angular/material/button'; import { RouterLink } from '@angular/router'; @@ -18,7 +15,7 @@ import { AgoHumanizedPipe, DateFormatPipe } from '../../shared/pipe/timing.pipe' selector: 'd2c-clan-info', templateUrl: './clan-info.component.html', styleUrls: ['./clan-info.component.scss'], - imports: [NgIf, NgFor, FaIconComponent, MatButton, RouterLink, MatTooltip, AgoHumanizedPipe, DateFormatPipe, AsyncPipe, DecimalPipe, DatePipe] + imports: [NgIf, NgFor, FaIconComponent, MatButton, RouterLink, MatTooltip, AgoHumanizedPipe, DateFormatPipe, DecimalPipe, DatePipe] }) export class ClanInfoComponent extends ChildComponent { sort: Sort = { @@ -26,7 +23,7 @@ export class ClanInfoComponent extends ChildComponent { ascending: true }; - public members: BehaviorSubject = new BehaviorSubject([]); + public members = signal([]); private static sortMembers(members: BungieGroupMember[], sort: Sort) { const modifier = sort.ascending ? 1 : -1; @@ -74,24 +71,22 @@ export class ClanInfoComponent extends ChildComponent { this.sort.ascending = true; this.sort.name = field; } - this.applySort(this.members.getValue()); - + this.applySort(this.members().slice(0)); } private applySort(m: BungieGroupMember[]) { ClanInfoComponent.sortMembers(m, this.sort); - this.members.next(m); + this.members.set(m); } constructor(public iconService: IconService, public state: ClanStateService) { super(); - this.state.rawMembers.pipe( - takeUntilDestroyed(this.destroyRef)) - .subscribe((rawMembers) => { - this.applySort(rawMembers.slice(0)); - }); + effect(() => { + const rawMembers = this.state.rawMembers(); + this.applySort(rawMembers.slice(0)); + }); } } diff --git a/src/app/clan/clan-lifetime/clan-lifetime.component.html b/src/app/clan/clan-lifetime/clan-lifetime.component.html index bf5fc77b6..021098a5f 100644 --- a/src/app/clan/clan-lifetime/clan-lifetime.component.html +++ b/src/app/clan/clan-lifetime/clan-lifetime.component.html @@ -1,8 +1,8 @@ - -

Loading lifetime data for clan members. {{msg}} - {{cnt}} / {{(state.sortedMembers|async)!.length}} + +

Loading lifetime data for clan members. {{msg}} + {{cnt}} / {{state.sortedMembers()!.length}}

- +