Use store for list page and ad import aliases

Author: maxime-urbanski

.gitignore

@@ -1,2 +1,3 @@
 .angular
 node_modules
+dist

package-lock.json

@@ -22,7 +22,7 @@
     "@angular/router": "^17.2.0",
     "@angular/ssr": "^17.2.2",
     "@ngrx/store": "^17.1.1",
-    "@ngrx/store-devtools": "^17.1.1",
+    "@ngrx/store-devtools": "^17.2.0",
     "express": "^4.18.2",
     "rxjs": "~7.8.0",
     "tslib": "^2.3.0",
@@ -46,4 +46,4 @@
     "tailwindcss": "^3.4.1",
     "typescript": "~5.3.2"
   }
-}
+}

package.json

@@ -6,15 +6,19 @@ import {provideClientHydration} from '@angular/platform-browser';
 import {provideStore} from '@ngrx/store';
 import {provideStoreDevtools} from '@ngrx/store-devtools';
 import {provideHttpClient, withFetch} from "@angular/common/http";
+import {listReducer} from "./store/reducer/list.reducer";
 
 export const appConfig: ApplicationConfig = {
   providers: [
     provideRouter(routes),
     provideHttpClient(withFetch()),
     provideClientHydration(),
-    provideStore(
-      reducer
-    ),
-    provideStoreDevtools()
+    provideStore(reducer),
+    provideStoreDevtools({
+      maxAge: 25, autoPause: true, // Pauses recording actions and state changes when the extension window is not open
+      trace: false, //  If set to true, will include stack trace for every dispatched action, so you can see it in trace tab jumping directly to that part of code
+      traceLimit: 75, // maximum stack trace frames to be stored (in case trace option was provided as true)
+      connectInZone: true // If set to true, the connection is established within the Angular zone
+    })
   ]
 };

src/app/app.config.ts

@@ -16,7 +16,7 @@
   </tr>
   </thead>
   <tbody>
-    @for (item of items; track item) {
+    @for (item of items | async; track item) {
       <tr>
         <td class="w-2">
           <input type="checkbox"

src/app/components/common/table/table.component.html

@@ -1,25 +1,26 @@
 import {Component, EventEmitter, Input, Output} from '@angular/core';
 import {RouterLink} from "@angular/router";
-import {Hero} from "../../../interface/hero.model";
 import {FormsModule} from "@angular/forms";
-import {ShowComponent} from "../../svg/show/show.component";
 import {ShowSvgComponent} from "../../svg/show-svg/show-svg.component";
 import {EditSvgComponent} from "../../svg/edit-svg/edit-svg.component";
+import {Observable} from "rxjs";
+import {Hero} from "../../../interface/hero.model";
+import {AsyncPipe} from "@angular/common";
 
 @Component({
   selector: 'app-table',
   standalone: true,
   imports: [
     RouterLink,
     FormsModule,
-    ShowComponent,
     ShowSvgComponent,
-    EditSvgComponent
+    EditSvgComponent,
+    AsyncPipe
   ],
   templateUrl: './table.component.html',
 })
 export class TableComponent {
-  @Input() items!: Hero[];
+  @Input() items!: Observable<Hero[]| undefined>;
   @Input() bulk!: Array<string>;
   @Output() addToBulkList = new EventEmitter<string>()
   @Output() selectedAll = new EventEmitter<Function>()

src/app/components/common/table/table.component.ts

@@ -14,10 +14,10 @@ <h1 class="text-3xl mb-2">Heroes List</h1>
       </app-delete>
     </div>
   </div>
-  @if (isLoading()) {
+  @if (isLoading$ | async) {
     <div class="bg-blue-100 rounded py-4 px-4 text-blue-700 text-sm">Loading ...</div>
   } @else {
-    <app-table [items]="heroes()"
+    <app-table [items]="list$"
                [bulk]="bulk()"
                (addToBulkList)="addToBulk($event)"
                (selectedAll)="selectedAll()"

src/app/components/foo/list/list.component.html

@@ -1,12 +1,15 @@
-import {Component, computed, OnInit, Output, signal, WritableSignal} from '@angular/core';
+import {Component, OnInit, signal, WritableSignal} from '@angular/core';
 import {RouterLink} from "@angular/router";
 import {AsyncPipe, Location, NgFor, NgIf} from "@angular/common";
-import {TableComponent} from "../../common/table/table.component";
-import {HeroService} from "../../../service/hero.service";
-import {Hero} from "../../../interface/hero.model";
-import {DeleteComponent} from "../../common/delete/delete.component";
-import {log} from "node:util";
-import {Validators} from "@angular/forms";
+import {Store} from "@ngrx/store";
+import {Observable} from "rxjs";
+import {DeleteComponent} from "@components/common/delete/delete.component";
+import {TableComponent} from "@components/common/table/table.component";
+import {Hero} from "@interface/hero.model";
+import {List} from "@interface/list.model";
+import {HeroService} from "@service/hero.service";
+import {isLoadingAction, ListActions} from "@store/action/foo.actions";
+import {selectorListError, selectorListItems, selectorListLoading} from "@store/selector/list.selectors";
 
 @Component({
   selector: 'app-list',
@@ -22,43 +25,54 @@ import {Validators} from "@angular/forms";
   templateUrl: './list.component.html',
 })
 export class ListComponent implements OnInit {
-  public heroes: WritableSignal<Hero[] | []> = signal([])
-  public isLoading = signal(false)
-  public error = signal(undefined)
+  public isLoading$: Observable<Boolean | undefined> = this.store.select(selectorListLoading);
+  public list$: Observable<Hero[] | undefined> = this.store.select(selectorListItems);
+  public listState$ = this.store.select('list')
+  public error$: Observable<String | undefined> = this.store.select(selectorListError);
   public bulk: WritableSignal<Array<string>> = signal([])
 
   constructor(
+    private store: Store<{ list: List }>,
     private heroService: HeroService,
     private location: Location
   ) {
+
   }
 
   ngOnInit() {
-    this.isLoading.set(true)
     this.heroService
       .getHeroes('/heroes')
       .subscribe(
         (items) => {
-          this.heroes.set(items['hydra:member'])
-          this.isLoading.set(false)
+          this.store.dispatch(isLoadingAction({isLoading: true}))
+          this.store.dispatch(ListActions({
+            items: items['hydra:member']
+          }))
+          this.store.dispatch(isLoadingAction({isLoading: false}))
         }
       )
   }
 
   addToBulk(id: string) {
     if (this.isInBulkList(id)) {
-      const bulkFilter = this.bulk().filter(element => element !== id)
+      const bulkFilter =
+        this.bulk()
+          .filter(element => element !== id)
       return this.bulk.set(bulkFilter)
     }
 
     this.bulk.update(uri => [...uri, id])
   }
 
-  selectedAll() {
+  async selectedAll() {
     if (!this.bulk().length) {
-      this.heroes().forEach(hero => {
-        this.bulk().push(<string>hero["@id"])
-      })
+      await this.list$
+        .forEach(item =>
+          item?.forEach(i =>
+            this.bulk().push(<string>i["@id"]
+            )
+          )
+        )
     } else {
       this.bulk.set([])
     }

src/app/components/foo/list/list.component.ts

@@ -5,7 +5,6 @@ import { Component } from '@angular/core';
   standalone: true,
   imports: [],
   templateUrl: './edit-svg.component.svg',
-  styleUrl: './edit-svg.component.css'
 })
 export class EditSvgComponent {
 

src/app/components/svg/edit-svg/edit-svg.component.ts

@@ -5,7 +5,6 @@ import { Component } from '@angular/core';
   standalone: true,
   imports: [],
   templateUrl: './list-svg.component.svg',
-  styleUrl: './list-svg.component.css'
 })
 export class ListSvgComponent {
 

src/app/components/svg/list-svg/list-svg.component.css

@@ -5,7 +5,6 @@ import { Component } from '@angular/core';
   standalone: true,
   imports: [],
   templateUrl: './show-svg.component.svg',
-  styleUrl: './show-svg.component.css'
 })
 export class ShowSvgComponent {
 

src/app/components/svg/list-svg/list-svg.component.spec.ts

@@ -1,7 +1,7 @@
 import {Hero} from "./hero.model";
 
 export interface List {
-  isLoading?: Boolean | undefined | null,
+  isLoading?: Boolean,
   items?: Hero[],
   error?: string,
 }

src/app/components/svg/list-svg/list-svg.component.ts

@@ -1,16 +1,23 @@
 import {createAction, props} from "@ngrx/store";
 import {Hero} from "../../interface/hero.model";
+import {List} from "../../interface/list.model";
+import {Show} from "../../interface/show.model";
+import {Update} from "../../interface/update.model";
 
 export const ListActions = createAction(
-  '[FETCH] List', props<{ items?: Array<Hero>, isLoading?: Boolean, error?: string }>()
+  '[FETCH] List', props<List>()
+)
+
+export const isLoadingAction = createAction(
+  'IS LOADING', props<{ isLoading: boolean }>()
 )
 
 export const showActions = createAction(
-  '[FETCH] Show', props<{ items?: Array<Hero>, isLoading?: Boolean, error?: string }>()
+  '[FETCH] Show', props<Show>()
 )
 
 export const UpdateActions = createAction(
-  '[API] Update', props<{ item?: Hero, isLoading?: Boolean, error?: string }>()
+  '[API] Update', props<Update>()
 )
 
 export const DeleteActions = createAction(

src/app/components/svg/show-svg/show-svg.component.svg

@@ -1,9 +1,9 @@
-import {heroesReducer} from "./heroes.reducer";
 import {showReducer} from "./show.reducer";
 import {updateReducer} from "./update.reducer";
+import {listReducer} from "./list.reducer";
 
 export default {
-  heroes: heroesReducer,
   show: showReducer,
-  delete: updateReducer
+  delete: updateReducer,
+  list: listReducer
 }

src/app/components/svg/show-svg/show-svg.component.ts

@@ -2,7 +2,6 @@ import {createReducer, on} from "@ngrx/store";
 import * as FooAction from '../action/foo.actions'
 import {List} from "../../interface/list.model";
 
-
 export const initialStateList: List = {
   isLoading: false,
   items: [],
@@ -16,5 +15,9 @@ export const listReducer = createReducer(
     isLoading,
     items,
     error
+  })),
+  on(FooAction.isLoadingAction, (state, {isLoading}) => ({
+    ...state,
+    isLoading
   }))
 )

src/app/interface/list.model.ts

@@ -4,7 +4,7 @@ import {HeroesActions} from "../action/heroes.actions";
 
 export const initialStateShow: Show = {
   isLoading: false,
-  item: undefined,
+  item: {},
   error: ''
 }
 

src/app/store/action/foo.actions.ts

@@ -22,7 +22,14 @@
     "lib": [
       "ES2022",
       "dom"
-    ]
+    ],
+    "baseUrl": "./src",
+    "paths": {
+      "@components/*" : ["app/components/*"],
+      "@interface/*" : ["app/interface/*"],
+      "@service/*" : ["app/service/*"],
+      "@store/*" : ["app/store/*"],
+    }
   },
   "angularCompilerOptions": {
     "enableI18nLegacyMessageIdFormat": false,