refactor(home): replace component-store with signal store

libs/home/src/lib/home.component.html

@@ -43,8 +43,8 @@ <h1 class="logo-font">conduit</h1>
 
       <div class="col-md-3">
         <div class="sidebar">
-          @defer (when !!(tags$ | async)?.length) {
-            <cdt-tags-list (setListTag)="setListTag($event)" [tags]="(tags$ | async) ?? []"></cdt-tags-list>
+          @defer (when !!$tags().length) {
+            <cdt-tags-list (setListTag)="setListTag($event)" [tags]="$tags()"></cdt-tags-list>
           } @placeholder {
             loading...
           }

libs/home/src/lib/home.component.ts

@@ -3,8 +3,8 @@ import { ArticlesListStore, ListType, articlesListInitialState } from '@realworl
 import { AsyncPipe, NgClass } from '@angular/common';
 import { TagsListComponent } from './tags-list/tags-list.component';
 import { ArticleListComponent } from '@realworld/articles/feature-articles-list/src';
-import { HomeStoreService } from './home.store';
-import { provideComponentStore } from '@ngrx/component-store';
+import { HomeStore } from './home.store';
+
 import { AuthStore } from '@realworld/auth/data-access';
 
 @Component({
@@ -13,16 +13,16 @@ import { AuthStore } from '@realworld/auth/data-access';
   templateUrl: './home.component.html',
   styleUrls: ['./home.component.css'],
   imports: [AsyncPipe, NgClass, TagsListComponent, ArticleListComponent],
-  providers: [provideComponentStore(HomeStoreService)],
+  providers: [HomeStore],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class HomeComponent {
   private readonly articlesListStore = inject(ArticlesListStore);
   private readonly authStore = inject(AuthStore);
-  private readonly homeStore = inject(HomeStoreService);
+  private readonly homeStore = inject(HomeStore);
 
   $listConfig = this.articlesListStore.listConfig;
-  tags$ = this.homeStore.tags$;
+  $tags = this.homeStore.tags;
 
   readonly loadArticlesOnLogin = effect(() => {
     const isLoggedIn = this.authStore.loggedIn();

libs/home/src/lib/home.store.ts

@@ -1,42 +1,38 @@
-import { Injectable } from '@angular/core';
-import { ComponentStore, OnStateInit } from '@ngrx/component-store';
-import { pipe } from 'rxjs';
-import { switchMap } from 'rxjs/operators';
-import { HomeService } from './home.service';
+import { signalStore, withState, withMethods, patchState, withHooks } from '@ngrx/signals';
+import { rxMethod } from '@ngrx/signals/rxjs-interop';
+import { inject } from '@angular/core';
+import { pipe, switchMap } from 'rxjs';
 import { tapResponse } from '@ngrx/operators';
+import { HomeService } from './home.service';
 
 export interface HomeState {
   tags: string[];
 }
 
-@Injectable()
-export class HomeStoreService extends ComponentStore<HomeState> implements OnStateInit {
-  constructor(private readonly homeService: HomeService) {
-    super({ tags: [] });
-  }
-
-  ngrxOnStateInit() {
-    this.getTags();
-  }
-
-  // SELECTORS
-  tags$ = this.select((store) => store.tags);
-
-  // EFFECTS
-  readonly getTags = this.effect<void>(
-    pipe(
-      switchMap(() =>
-        this.homeService.getTags().pipe(
-          tapResponse(
-            (response) => {
-              this.patchState({ tags: response.tags });
-            },
-            (error) => {
-              console.error('error getting tags: ', error);
-            },
+export const HomeStore = signalStore(
+  { providedIn: 'root' },
+  withState<HomeState>({ tags: [] }),
+  withMethods((store, homeService = inject(HomeService)) => ({
+    getTags: rxMethod<void>(
+      pipe(
+        switchMap(() =>
+          homeService.getTags().pipe(
+            tapResponse(
+              (response) => {
+                patchState(store, { tags: response.tags });
+              },
+              (error) => {
+                console.error('error getting tags: ', error);
+              },
+            ),
           ),
         ),
       ),
     ),
-  );
-}
+  })),
+  withHooks({
+    onInit({ getTags }) {
+      getTags();
+    },
+  }),
+);

libs/home/src/lib/tags-list/tags-list.component.ts

@@ -7,6 +7,6 @@ import { Component, Input, Output, EventEmitter, ChangeDetectionStrategy, output
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class TagsListComponent {
-  tags = input([]);
+  tags = input<string[]>([]);
   setListTag = output<string>();
 }