use store for show page

Author: maxime-urbanski

src/app/app.config.ts

@@ -3,17 +3,29 @@ import {provideRouter} from '@angular/router';
 import reducer from "./store/reducer/index";
 import {routes} from './app.routes';
 import {provideClientHydration} from '@angular/platform-browser';
-import {provideStore} from '@ngrx/store';
+import {ActionReducer, MetaReducer, provideStore} from '@ngrx/store';
 import {provideStoreDevtools} from '@ngrx/store-devtools';
 import {provideHttpClient, withFetch} from "@angular/common/http";
 import {listReducer} from "./store/reducer/list.reducer";
 
+function log(reducer: ActionReducer<any>): ActionReducer<any> {
+  return (state, action) => {
+    const currentState = reducer(state, action)
+    console.log('current state', currentState)
+    console.log('action =>', action)
+    return currentState
+  }
+}
+
+export const metaReducers: MetaReducer[] = [log]
+
+
 export const appConfig: ApplicationConfig = {
   providers: [
     provideRouter(routes),
     provideHttpClient(withFetch()),
     provideClientHydration(),
-    provideStore(reducer),
+    provideStore(reducer,{metaReducers}),
     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

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

@@ -1,6 +1,4 @@
 import {Component, EventEmitter, Input, Output} from '@angular/core';
-import {HeroService} from "../../../service/hero.service";
-import {Location} from "@angular/common";
 
 @Component({
   selector: 'app-delete',
@@ -11,11 +9,6 @@ import {Location} from "@angular/common";
 export class DeleteComponent {
   @Input() disabled!: boolean
   @Output() delete: EventEmitter<Function> = new EventEmitter<Function>()
-  constructor(
-    private heroService: HeroService,
-    private location: Location
-  ) {
-  }
 
   deleteAction () {
     return this.delete.emit()

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

@@ -1,18 +1,22 @@
 <form [formGroup]="formGroup" (ngSubmit)="handleSubmit()">
   @for (field of fields; track field.name) {
-    <div class="mb-3">
-      <label [for]="field.name">{{ field.name }}</label>
-      <input [id]="field.name"
-             [type]="field.type"
-             [formControlName]="field.name"
-             class="mt-1 w-full px-3 py-2 border rounded"
-      >
+    <div class="bg-white px-6 py-8">
+      <div class="mb-3">
+        <label [for]="field.name">{{ field.name }}</label>
+        <input [id]="field.name"
+               [type]="field.type"
+               [formControlName]="field.name"
+               class="mt-1 w-full px-3 py-2 border rounded"
+        >
+      </div>
     </div>
   }
-  <button
-    type="submit"
-    class="px-6 py-2 bg-green-500 text-white font-medium rounded shadow-md hover:bg-green-600"
-  >
-    Submit
-  </button>
+  <div class="bg-neutral-100 px-4 py-6 flex justify-between">
+    <button
+      type="submit"
+      class="px-6 py-2 bg-green-500 text-white font-medium rounded shadow-md hover:bg-green-600"
+    >
+      Submit
+    </button>
+  </div>
 </form>

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

@@ -1,26 +1,38 @@
-import {Component, EventEmitter, Input, OnInit, Output} from '@angular/core';
+import {
+  Component,
+  EventEmitter,
+  Input,
+  OnInit,
+  Output
+} from '@angular/core';
 import {FormControl, FormGroup, ReactiveFormsModule} from "@angular/forms";
+import {ApiUpdate} from "@interface/api";
+import {Observable} from "rxjs";
+import {AsyncPipe, NgIf} from "@angular/common";
 
 @Component({
   selector: 'app-form',
   standalone: true,
   imports: [
-    ReactiveFormsModule
+    ReactiveFormsModule,
+    AsyncPipe,
+    NgIf
   ],
   templateUrl: './form.component.html',
 })
 export class FormComponent implements OnInit {
   @Input() fields: Array<{ name: string; type: string }> = [];
   @Output() submit = new EventEmitter
+  @Input() itemToUpdate$!: Observable<ApiUpdate | undefined>;
   public formGroup: FormGroup = new FormGroup<any>({})
 
+
   ngOnInit() {
     this.formGroup = this.createFormGroup()
   }
 
   createFormGroup() {
     const group: { [key: string]: FormControl<string | null> } = {}
-
     this.fields.forEach(field => {
       group[field.name] = new FormControl('')
     })

src/app/components/common/header/header.component.spec.ts

@@ -1,5 +1,5 @@
 import { Component } from '@angular/core';
-import {MenuComponent} from "../../svg/menu/menu.component";
+import {MenuComponent} from "@components/svg/menu/menu.component";
 
 @Component({
   selector: 'app-header',

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

@@ -1,7 +1,6 @@
 import { Component } from '@angular/core';
-import {ListComponent} from "../../foo/list/list.component";
-import {ListSvgComponent} from "../../svg/list-svg/list-svg.component";
 import {RouterLink, RouterLinkActive} from "@angular/router";
+import {ListSvgComponent} from "@components/svg/list-svg/list-svg.component";
 
 @Component({
   selector: 'app-sidebar',

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

@@ -1,11 +1,11 @@
+import {AsyncPipe} from "@angular/common";
 import {Component, EventEmitter, Input, Output} from '@angular/core';
-import {RouterLink} from "@angular/router";
 import {FormsModule} from "@angular/forms";
-import {ShowSvgComponent} from "../../svg/show-svg/show-svg.component";
-import {EditSvgComponent} from "../../svg/edit-svg/edit-svg.component";
+import {RouterLink} from "@angular/router";
 import {Observable} from "rxjs";
-import {Hero} from "../../../interface/hero.model";
-import {AsyncPipe} from "@angular/common";
+import {ShowSvgComponent} from "@components/svg/show-svg/show-svg.component";
+import {EditSvgComponent} from "@components/svg/edit-svg/edit-svg.component";
+import {Hero} from "@interface/hero.model";
 
 @Component({
   selector: 'app-table',

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

@@ -1,4 +1,4 @@
-<div class="container mx-auto px-4 max-w-2xl mt-4">
+<div class=" w-full px-4 mt-4">
   <div class="flex items-center justify-between">
     <a [routerLink]="['/heroes']"
        class="text-blue-600 hover:text-blue-800">
@@ -9,6 +9,6 @@
     <div class="bg-blue-100 rounded py-4 px-4 text-blue-700 text-sm">Loading ...</div>
   } @else {
     <h1 class="text-3xl my-4">Create</h1>
-   <app-form [fields]="formType" (submit)="onSubmit($event)"/>
+    <app-form [fields]="formType" (submit)="onSubmit($event)"/>
   }
 </div>

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

@@ -1,10 +1,10 @@
+import {Location} from "@angular/common";
 import {Component, signal, WritableSignal} from '@angular/core';
-import {DeleteComponent} from "../../common/delete/delete.component";
-import {RouterLink} from "@angular/router";
-import {HeroService} from "../../../service/hero.service";
 import {FormsModule, ReactiveFormsModule} from "@angular/forms";
-import {Location} from "@angular/common";
-import {FormComponent} from "../../common/form/form.component";
+import {RouterLink} from "@angular/router";
+import {DeleteComponent} from "@components/common/delete/delete.component";
+import {FormComponent} from "@components/common/form/form.component";
+import {ApiService} from "@service/api.service";
 
 @Component({
   selector: 'app-create',
@@ -27,10 +27,11 @@ export class CreateComponent {
     }
   ]
 
-  constructor(private heroService: HeroService, private location: Location) {
+  constructor(private apiService: ApiService, private location: Location) {
   }
   onSubmit(data: any) {
-    return this.heroService
+    console.log('data ==>', data)
+    return this.apiService
       .add('/heroes',
         {
           ...data

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

@@ -5,30 +5,13 @@
       Back to list
     </a>
   </div>
-  @if (isLoading()) {
+  @if (isLoading$) {
     <div class="bg-blue-100 rounded py-4 px-4 text-blue-700 text-sm">Loading ...</div>
   } @else {
-    <h1 class="text-3xl my-4">Edit {{  item()?.name }} {{ item()?.["@id"] }}</h1>
-
-      <form (ngSubmit)="onSubmit($event)">
-        <div class="bg-white px-6 py-8">
-          <label for="name"> name</label>
-          <input id="name"
-                 class="mt-1 w-full px-3 py-2 border rounded"
-                 [ngModel]="item()?.name"
-                 (ngModelChange)="getItemId($event)"
-                 [ngModelOptions]="{standalone: true}"
-          >
-        </div>
-        <div class="bg-neutral-100 px-4 py-6 flex justify-between">
-          <button
-            type="submit"
-            class="px-6 py-2 bg-green-500 text-white font-medium rounded shadow-md hover:bg-green-600"
-          >
-            Submit
-          </button>
-          <app-delete (delete)="delete()"></app-delete>
-        </div>
-      </form>
+    <h1 *ngIf="item$ | async as item" class="text-3xl my-4">Edit {{ item["@id"] }} {{ item['name'] }}</h1>
+    <app-form [fields]="formType"
+              [itemToUpdate$]="item$"
+              (submit)="onSubmit($event)"
+    />
   }
 </div>

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

@@ -1,11 +1,20 @@
-import {Component, computed, OnInit, signal, WritableSignal} from '@angular/core';
-import {DeleteComponent} from "../../common/delete/delete.component";
-import {Router, RouterLink} from "@angular/router";
-import {HeroService} from "../../../service/hero.service";
+import {Observable} from "rxjs";
 import {CommonModule, Location} from "@angular/common";
-import {ApiShow} from "../../../interface/api";
+import {Component, OnInit} from '@angular/core';
 import {FormsModule, ReactiveFormsModule} from "@angular/forms";
-
+import {Router, RouterLink} from "@angular/router";
+import {select, Store} from "@ngrx/store";
+import {DeleteComponent} from "@components/common/delete/delete.component";
+import {FormComponent} from "@components/common/form/form.component";
+import {ApiUpdate} from "@interface/api";
+import {Update} from "@interface/update.model";
+import {ApiService} from "@service/api.service";
+import {isLoadingAction, UpdateActions} from "@store/action/foo.actions";
+import {
+  selectorUpdateError,
+  selectorUpdateItem,
+  selectorUpdateLoading
+} from "@store/selector/update.selectors";
 
 @Component({
   selector: 'app-edit',
@@ -16,35 +25,52 @@ import {FormsModule, ReactiveFormsModule} from "@angular/forms";
     RouterLink,
     FormsModule,
     ReactiveFormsModule,
+    FormComponent,
   ],
   templateUrl: './edit.component.html',
 })
 export class EditComponent implements OnInit {
-  public isLoading: WritableSignal<boolean> = signal(false)
-  public item: WritableSignal<ApiShow | null> = signal(null)
+  public isLoading$: Observable<Boolean | undefined> = this.store.pipe(select(selectorUpdateLoading))
+  public item$ = this.store.pipe(select(selectorUpdateItem));
+  public error$: Observable<String | undefined> = this.store.pipe(select(selectorUpdateError))
+  public formType: Array<{ name: string; type: string }> = [
+    {
+      name: 'name',
+      type: 'string',
+    }
+  ]
 
   constructor(
     private router: Router,
-    private heroService: HeroService,
-    private location: Location
+    private apiService: ApiService,
+    private location: Location,
+    private store: Store<{ update: Update }>
   ) {
   }
 
   ngOnInit() {
-    this.loadData()
+    this.fetchData()
   }
 
-  loadData() {
-    this.isLoading.set(true)
+  fetchData() {
     const splitUrl = this.router.url.split('/edit')[0]
-    this.heroService
+    this.apiService
       .getHero(splitUrl)
       .subscribe(item => {
-        this.item.set(item)
-        this.isLoading.set(false)
+        this.store.dispatch(UpdateActions({
+          isLoading: true,
+          // @ts-ignore
+          item
+        }))
+        this.store.dispatch(isLoadingAction({
+          isLoading: false
+        }))
       })
+
+    console.log(this.isLoading$.pipe(val => val))
   }
-  getItemId(event: any) {
+
+  /*getItemId(event: any) {
     this.item.update(update => {
       if (update) {
         return {
@@ -55,22 +81,15 @@ export class EditComponent implements OnInit {
         return update
       }
     })
-  }
+  }*/
 
-  onSubmit(event: any) {
-    return this.heroService.putHero(
-      this.item()?.["@id"],
-      this.item()
-    ).subscribe(() => {
-      this.location.back()
-    })
+  onSubmit(data: any) {
+    console.log('event ==>', data)
   }
 
-  delete() {
-    return this.heroService.delete(
-      this.item()?.["@id"]
-    ).subscribe(
-      () => this.location.back()
-    )
-  }
+  /* delete() {
+     return this.apiService.delete(this.item()?.["@id"]).subscribe(
+       () => this.location.back()
+     )
+   }*/
 }

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

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