refactor: use signals in chipped content component (#875)

* refactor: use signals in chipped content component

* refactor: use signals for internal state

src/app/resume-page/chipped-content/chipped-content.component.html

@@ -1,21 +1,21 @@
 <div class="chips">
-  @for (content of contents; track content; let i = $index) {
+  @for (content of contents(); track content) {
     <app-chip
-      [selected]="_isActive && _activeIndex === i"
-      (selectedChange)="onSelect(i)"
+      [selected]="isActive() && content === activeContent()"
+      (selectedChange)="select(content)"
     >
       {{ content.displayName }}
     </app-chip>
   }
 </div>
 <div
   class="content"
-  [@contentDisplayed]="_isActive"
+  [@contentDisplayed]="isActive()"
   (@contentDisplayed.done)="_scrollIntoView(contentElement)"
   #contentElement
 >
   <ng-container
-    [ngComponentOutlet]="contents[_activeIndex].component"
-    [ngComponentOutletInputs]="contents[_activeIndex].inputs"
+    [ngComponentOutlet]="activeContent().component"
+    [ngComponentOutletInputs]="activeContent().inputs"
   ></ng-container>
 </div>

src/app/resume-page/chipped-content/chipped-content.component.spec.ts

@@ -23,8 +23,6 @@ describe('ChippedContentComponent', () => {
 
   beforeEach(() => {
     ;[fixture, component] = makeSut()
-    component.contents = CONTENTS
-    fixture.detectChanges()
   })
 
   it('should create', () => {
@@ -210,6 +208,7 @@ function makeSut() {
       MockProvider(SCROLL_INTO_VIEW, jasmine.createSpy()),
     ],
   })
-  component.contents = CONTENTS
+  fixture.componentRef.setInput('contents', CONTENTS)
+  fixture.detectChanges()
   return [fixture, component] as const
 }

src/app/resume-page/chipped-content/chipped-content.component.ts

@@ -1,4 +1,4 @@
-import { Component, Inject, Input } from '@angular/core'
+import { Component, Inject, input, linkedSignal, signal } from '@angular/core'
 import { ChipComponent } from '../chip/chip.component'
 import { NgComponentOutlet } from '@angular/common'
 import { ChippedContent } from './chipped-content'
@@ -41,21 +41,22 @@ import { SCROLL_INTO_VIEW, ScrollIntoView } from '@/common/scroll-into-view'
   ],
 })
 export class ChippedContentComponent {
-  @Input() contents!: readonly ChippedContent[]
+  readonly contents = input.required<readonly ChippedContent[]>()
+  readonly activeContent = linkedSignal<ChippedContent>(
+    () => this.contents()[0],
+  )
+  readonly isActive = signal<boolean>(false)
 
   constructor(
     @Inject(SCROLL_INTO_VIEW) protected _scrollIntoView: ScrollIntoView,
   ) {}
 
-  protected _isActive = false
-  protected _activeIndex = 0
-
-  onSelect(index: number) {
-    if (this._activeIndex == index) {
-      this._isActive = !this._isActive
+  select(content: ChippedContent) {
+    if (this.activeContent() === content) {
+      this.isActive.update((isActive) => !isActive)
       return
     }
-    this._isActive = true
-    this._activeIndex = index
+    this.isActive.set(true)
+    this.activeContent.set(content)
   }
 }