Migrate to ngrx state structure with actions, reducers, and selectors

Co-authored-by: renemadsen <[email protected]>

Author: Copilot

eform-client/src/app/plugins/modules/customers-pn/components/store/customers-state.service.ts

@@ -1,160 +1,121 @@
-import { Injectable } from '@angular/core';
-import { BehaviorSubject, Observable } from 'rxjs';
+import {Injectable} from '@angular/core';
+import {Observable, tap} from 'rxjs';
 import {
+  CommonPaginationState,
   OperationDataResult,
   PaginationModel,
   SortModel,
-  FiltrationStateModel,
-  CommonPaginationState,
 } from 'src/app/common/models';
-import { updateTableSort, getOffset } from 'src/app/common/helpers';
-import { map } from 'rxjs/operators';
-import { CustomersPnService } from '../../services';
-import { CustomersPnModel } from '../../models';
-
-export interface CustomersState {
-  pagination: CommonPaginationState;
-  filters: FiltrationStateModel;
-  total: number;
-}
-
-function createInitialState(): CustomersState {
-  return <CustomersState>{
-    pagination: {
-      pageSize: 10,
-      sort: 'Id',
-      isSortDsc: false,
-      offset: 0,
-    },
-    filters: {
-      nameFilter: '',
-    },
-    total: 0,
-  };
-}
-
-@Injectable({ providedIn: 'root' })
+import {updateTableSort, getOffset} from 'src/app/common/helpers';
+import {CustomersPnService} from '../../services';
+import {Store} from '@ngrx/store';
+import {
+  selectCustomersFilters,
+  selectCustomersPagination,
+  customersUpdateTotalCustomers,
+  customersUpdateFilters,
+  customersUpdatePagination,
+  CustomersFiltrationModel,
+  selectCustomersPaginationPageSize,
+  selectCustomersNameFilters,
+  selectCustomersTotal,
+} from '../../state';
+import {CustomersPnModel} from '../../models';
+import {map} from 'rxjs/operators';
+
+@Injectable({providedIn: 'root'})
 export class CustomersStateService {
-  private state$ = new BehaviorSubject<CustomersState>(createInitialState());
+  private selectCustomersFilters$ = this.store.select(selectCustomersFilters);
+  private selectCustomersPagination$ = this.store.select(selectCustomersPagination);
+  currentPagination: CommonPaginationState;
+  currentFilters: CustomersFiltrationModel;
 
   constructor(
-    private service: CustomersPnService
-  ) {}
-
-  private get state(): CustomersState {
-    return this.state$.value;
-  }
-
-  private updateState(update: Partial<CustomersState>) {
-    this.state$.next({ ...this.state, ...update });
+    private store: Store,
+    private service: CustomersPnService,
+  ) {
+    this.selectCustomersPagination$.subscribe(x => this.currentPagination = x);
+    this.selectCustomersFilters$.subscribe(x => this.currentFilters = x);
   }
 
   getAllCustomers(): Observable<OperationDataResult<CustomersPnModel>> {
     return this.service
       .getAllCustomers({
-        ...this.state.pagination,
-        ...this.state.filters,
-        sortColumnName: this.state.pagination.sort,
-        name: this.state.filters.nameFilter,
+        ...this.currentFilters,
+        ...this.currentPagination,
+        sortColumnName: this.currentPagination.sort,
+        name: this.currentFilters.nameFilter,
       })
       .pipe(
-        map((response) => {
+        tap((response) => {
           if (response && response.success && response.model) {
-            this.updateState({ total: response.model.total });
+            this.store.dispatch(customersUpdateTotalCustomers(response.model.total));
           }
-          return response;
         })
       );
   }
 
   updateNameFilter(nameFilter: string) {
-    this.updateState({
-      filters: {
-        ...this.state.filters,
-        nameFilter: nameFilter,
-      },
-      pagination: {
-        ...this.state.pagination,
-        offset: 0,
-      },
-    });
+    this.store.dispatch(customersUpdateFilters({nameFilter: nameFilter}));
+    this.store.dispatch(customersUpdatePagination({...this.currentPagination, offset: 0}));
   }
 
   updatePageSize(pageSize: number) {
-    this.updateState({
-      pagination: {
-        ...this.state.pagination,
-        pageSize: pageSize,
-      },
-    });
+    this.store.dispatch(customersUpdatePagination({...this.currentPagination, pageSize: pageSize}));
     this.checkOffset();
   }
 
   getPageSize(): Observable<number> {
-    return this.state$.pipe(map(state => state.pagination.pageSize));
+    return this.store.select(selectCustomersPaginationPageSize);
   }
 
   getSort(): Observable<SortModel> {
-    return this.state$.pipe(
-      map(state => new SortModel(state.pagination.sort, state.pagination.isSortDsc))
+    return this.selectCustomersPagination$.pipe(
+      map(pagination => new SortModel(pagination.sort, pagination.isSortDsc))
     );
   }
 
   getNameFilter(): Observable<string> {
-    return this.state$.pipe(map(state => state.filters.nameFilter));
+    return this.store.select(selectCustomersNameFilters);
   }
 
   changePage(offset: number) {
-    this.updateState({
-      pagination: {
-        ...this.state.pagination,
-        offset: offset,
-      },
-    });
+    this.store.dispatch(customersUpdatePagination({...this.currentPagination, offset: offset}));
   }
 
   onDelete() {
-    this.updateState({ total: this.state.total - 1 });
+    const currentTotal = this.currentPagination.total || 0;
+    this.store.dispatch(customersUpdateTotalCustomers(currentTotal - 1));
     this.checkOffset();
   }
 
   onSortTable(sort: string) {
     const localPageSettings = updateTableSort(
       sort,
-      this.state.pagination.sort,
-      this.state.pagination.isSortDsc
+      this.currentPagination.sort,
+      this.currentPagination.isSortDsc
     );
-    this.updateState({
-      pagination: {
-        ...this.state.pagination,
-        isSortDsc: localPageSettings.isSortDsc,
-        sort: localPageSettings.sort,
-      },
-    });
+    this.store.dispatch(customersUpdatePagination({...this.currentPagination, ...localPageSettings}));
   }
 
   checkOffset() {
+    const currentTotal = this.currentPagination.total || 0;
     const newOffset = getOffset(
-      this.state.pagination.pageSize,
-      this.state.pagination.offset,
-      this.state.total
+      this.currentPagination.pageSize,
+      this.currentPagination.offset,
+      currentTotal
     );
-    if (newOffset !== this.state.pagination.offset) {
-      this.updateState({
-        pagination: {
-          ...this.state.pagination,
-          offset: newOffset,
-        },
-      });
+    if (newOffset !== this.currentPagination.offset) {
+      this.store.dispatch(customersUpdatePagination({...this.currentPagination, offset: newOffset}));
     }
   }
 
   getPagination(): Observable<PaginationModel> {
-    return this.state$.pipe(
-      map(state => new PaginationModel(
-        state.total,
-        state.pagination.pageSize,
-        state.pagination.offset
+    return this.store.select(selectCustomersTotal).pipe(
+      map(total => new PaginationModel(
+        total,
+        this.currentPagination.pageSize,
+        this.currentPagination.offset
       ))
     );
   }

eform-client/src/app/plugins/modules/customers-pn/customers-pn.module.ts

@@ -4,6 +4,7 @@ import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { NgSelectModule } from '@ng-select/ng-select';
 import { TranslateModule } from '@ngx-translate/core';
 import { RouterModule } from '@angular/router';
+import { StoreModule } from '@ngrx/store';
 import { CustomerPnLayoutComponent } from './layouts';
 import {
   CustomersPnFieldsService,
@@ -22,6 +23,7 @@ import {
 } from './components';
 import { EformSharedModule } from 'src/app/common/modules/eform-shared/eform-shared.module';
 import { CustomersStateService } from './components/store';
+import { customersReducer } from './state';
 
 @NgModule({
   imports: [
@@ -34,6 +36,9 @@ import { CustomersStateService } from './components/store';
     NgSelectModule,
     EformSharedModule,
     RouterModule,
+    StoreModule.forFeature('customersPn', {
+      customersState: customersReducer,
+    }),
   ],
   declarations: [
     CustomerPnLayoutComponent,

eform-client/src/app/plugins/modules/customers-pn/state/customers-pn.state.ts

@@ -0,0 +1,7 @@
+import {
+  CustomersState,
+} from './';
+
+export interface CustomersPnState {
+  customersState: CustomersState;
+}

eform-client/src/app/plugins/modules/customers-pn/state/customers/customers.actions.ts

@@ -0,0 +1,18 @@
+import {createAction} from '@ngrx/store';
+import {CommonPaginationState} from 'src/app/common/models';
+import {CustomersFiltrationModel} from './';
+
+export const customersUpdateFilters = createAction(
+  '[Customers] Update Filters',
+  (payload: CustomersFiltrationModel) => ({payload})
+);
+
+export const customersUpdatePagination = createAction(
+  '[Customers] Update Pagination',
+  (payload: CommonPaginationState) => ({payload})
+);
+
+export const customersUpdateTotalCustomers = createAction(
+  '[Customers] Update Total Customers',
+  (payload: number) => ({payload})
+);

eform-client/src/app/plugins/modules/customers-pn/state/customers/customers.reducer.ts

@@ -0,0 +1,60 @@
+import {CommonPaginationState} from 'src/app/common/models';
+import {Action, createReducer, on} from '@ngrx/store';
+import {
+  customersUpdateFilters,
+  customersUpdatePagination,
+  customersUpdateTotalCustomers
+} from './customers.actions';
+
+export interface CustomersFiltrationModel {
+  nameFilter: string;
+}
+
+export interface CustomersState {
+  pagination: CommonPaginationState;
+  filters: CustomersFiltrationModel;
+  total: number;
+}
+
+export const customersInitialState: CustomersState = {
+  pagination: {
+    pageSize: 10,
+    sort: 'Id',
+    isSortDsc: false,
+    offset: 0,
+    pageIndex: 0,
+    total: 0,
+  },
+  filters: {
+    nameFilter: '',
+  },
+  total: 0,
+};
+
+export const _customersReducer = createReducer(
+  customersInitialState,
+  on(customersUpdateFilters, (state, {payload}) => ({
+    ...state,
+    filters: {
+      ...state.filters,
+      ...payload,
+    },
+  })),
+  on(customersUpdatePagination, (state, {payload}) => ({
+    ...state,
+    pagination: { ...state, ...payload, },
+  })),
+  on(customersUpdateTotalCustomers, (state, {payload}) => ({
+      ...state,
+      pagination: {
+        ...state.pagination,
+        total: payload,
+      },
+      total: payload,
+    }
+  )),
+);
+
+export function customersReducer(state: CustomersState | undefined, action: Action) {
+  return _customersReducer(state, action);
+}

eform-client/src/app/plugins/modules/customers-pn/state/customers/customers.selector.ts

@@ -0,0 +1,23 @@
+import {
+  CustomersPnState,
+} from '../';
+import {createSelector} from '@ngrx/store';
+
+const selectCustomersPn =
+  (state: {customersPn: CustomersPnState}) => state.customersPn;
+export const selectCustomers =
+    createSelector(selectCustomersPn, (state) => state.customersState);
+export const selectCustomersFilters =
+    createSelector(selectCustomers, (state) => state.filters);
+export const selectCustomersPagination =
+    createSelector(selectCustomers, (state) => state.pagination);
+export const selectCustomersPaginationSort =
+    createSelector(selectCustomers, (state) => state.pagination.sort);
+export const selectCustomersPaginationIsSortDsc =
+    createSelector(selectCustomers, (state) => state.pagination.isSortDsc ? 'desc' : 'asc');
+export const selectCustomersNameFilters =
+    createSelector(selectCustomers, (state) => state.filters.nameFilter);
+export const selectCustomersPaginationPageSize =
+    createSelector(selectCustomers, (state) => state.pagination.pageSize);
+export const selectCustomersTotal =
+    createSelector(selectCustomers, (state) => state.total);

eform-client/src/app/plugins/modules/customers-pn/state/customers/index.ts

@@ -0,0 +1,3 @@
+export * from './customers.actions';
+export * from './customers.reducer';
+export * from './customers.selector';

eform-client/src/app/plugins/modules/customers-pn/state/index.ts

@@ -0,0 +1,2 @@
+export * from './customers';
+export * from './customers-pn.state';