refactor(core): change parameter type of addReplaceableComponent action

#2404

npm/ng-packs/packages/core/src/lib/actions/replaceable-components.actions.ts

@@ -2,5 +2,5 @@ import { ReplaceableComponents } from '../models/replaceable-components';
 
 export class AddReplaceableComponent {
   static readonly type = '[ReplaceableComponents] Add';
-  constructor(public payload: ReplaceableComponents.Data | ReplaceableComponents.Data[]) {}
+  constructor(public payload: ReplaceableComponents.ReplaceableComponent) {}
 }

npm/ng-packs/packages/core/src/lib/core.module.ts

@@ -83,7 +83,11 @@ import { ReplaceableComponentsState } from './states/replaceable-components.stat
     ReplaceableRouteContainerComponent,
   ],
   providers: [LocalizationPipe],
-  entryComponents: [RouterOutletComponent, DynamicLayoutComponent],
+  entryComponents: [
+    RouterOutletComponent,
+    DynamicLayoutComponent,
+    ReplaceableRouteContainerComponent,
+  ],
 })
 export class CoreModule {
   static forRoot(options = {} as ABP.Root): ModuleWithProviders {

npm/ng-packs/packages/core/src/lib/models/replaceable-components.ts

@@ -2,10 +2,10 @@ import { Type } from '@angular/core';
 
 export namespace ReplaceableComponents {
   export interface State {
-    replaceableComponents: Data[];
+    replaceableComponents: ReplaceableComponent[];
   }
 
-  export interface Data {
+  export interface ReplaceableComponent {
     component: Type<any>;
     key: string;
   }

npm/ng-packs/packages/core/src/lib/states/replaceable-components.state.ts

@@ -11,15 +11,15 @@ export class ReplaceableComponentsState {
   @Selector()
   static getAll({
     replaceableComponents,
-  }: ReplaceableComponents.State): ReplaceableComponents.Data[] {
+  }: ReplaceableComponents.State): ReplaceableComponents.ReplaceableComponent[] {
     return replaceableComponents || [];
   }
 
-  static getOne(key: string) {
+  static getComponent(key: string) {
     const selector = createSelector(
       [ReplaceableComponentsState],
-      ({ replaceableComponents }: ReplaceableComponents.State) => {
-        return snq(() => replaceableComponents.find(component => component.key === key));
+      (state: ReplaceableComponents.State): ReplaceableComponents.ReplaceableComponent => {
+        return snq(() => state.replaceableComponents.find(component => component.key === key));
       },
     );
 
@@ -31,14 +31,20 @@ export class ReplaceableComponentsState {
     { getState, patchState }: StateContext<ReplaceableComponents.State>,
     { payload }: AddReplaceableComponent,
   ) {
-    if (!Array.isArray(payload)) {
-      payload = [payload];
-    }
+    let { replaceableComponents } = getState();
+
+    if (replaceableComponents && replaceableComponents.length) {
+      const index = replaceableComponents.findIndex(component => component.key === payload.key);
 
-    const { replaceableComponents } = getState();
+      if (index > -1) {
+        replaceableComponents[index] = payload;
+      }
+    } else {
+      replaceableComponents = [...replaceableComponents, payload];
+    }
 
     patchState({
-      replaceableComponents: [...replaceableComponents, ...payload],
+      replaceableComponents,
     });
   }
 }

npm/ng-packs/packages/identity/src/lib/identity-routing.module.ts

@@ -24,7 +24,7 @@ const routes: Routes = [
         data: {
           requiredPolicy: 'AbpIdentity.Roles',
           component: {
-            key: 'AbpIdentity.Roles',
+            key: 'Identity.RolesComponent',
             default: RolesComponent,
           } as ABP.ComponentData<RolesComponent>,
         },
@@ -35,7 +35,7 @@ const routes: Routes = [
         data: {
           requiredPolicy: 'AbpIdentity.Users',
           component: {
-            key: 'AbpIdentity.Roles',
+            key: 'Identity.UsersComponent',
             default: UsersComponent,
           } as ABP.ComponentData<UsersComponent>,
         },