107685: menu-component re-render section on store update

Author: Atmire-Kristof

src/app/shared/menu/menu.component.ts

@@ -6,7 +6,6 @@ import { GenericConstructor } from '../../core/shared/generic-constructor';
 import { hasValue, isNotEmptyOperator } from '../empty.util';
 import { MenuSectionComponent } from './menu-section/menu-section.component';
 import { getComponentForMenu } from './menu-section.decorator';
-import { compareArraysUsingIds } from '../../item-page/simple/item-types/shared/item-relationships-utils';
 import { MenuSection } from './menu-section.model';
 import { MenuID } from './menu-id.model';
 import { ActivatedRoute } from '@angular/router';
@@ -86,7 +85,7 @@ export class MenuComponent implements OnInit, OnDestroy {
     this.menuCollapsed = this.menuService.isMenuCollapsed(this.menuID);
     this.menuPreviewCollapsed = this.menuService.isMenuPreviewCollapsed(this.menuID);
     this.menuVisible = this.menuService.isMenuVisible(this.menuID);
-    this.sections = this.menuService.getMenuTopSections(this.menuID).pipe(distinctUntilChanged(compareArraysUsingIds()));
+    this.sections = this.menuService.getMenuTopSections(this.menuID);
 
     this.subs.push(
       this.sections.pipe(

src/app/shared/menu/menu.service.ts

@@ -2,7 +2,7 @@ import { Injectable } from '@angular/core';
 import { createSelector, MemoizedSelector, select, Store } from '@ngrx/store';
 import { AppState, keySelector } from '../../app.reducer';
 import { combineLatest as observableCombineLatest, Observable } from 'rxjs';
-import { map, switchMap } from 'rxjs/operators';
+import { distinctUntilChanged, map, switchMap } from 'rxjs/operators';
 import {
   ActivateMenuSectionAction,
   AddMenuSectionAction,
@@ -22,6 +22,7 @@ import { MenuState } from './menu-state.model';
 import { MenuSections } from './menu-sections.model';
 import { MenuSection } from './menu-section.model';
 import { MenuID } from './menu-id.model';
+import { compareArraysUsingIds } from '../../item-page/simple/item-types/shared/item-relationships-utils';
 
 export function menuKeySelector<T>(key: string, selector): MemoizedSelector<MenuState, T> {
   return createSelector(selector, (state) => {
@@ -76,8 +77,10 @@ export class MenuService {
     return this.store.pipe(
       select(menuByIDSelector(menuID)),
       select(menuSectionStateSelector),
-      map((sections: MenuSections) => {
-          return Object.values(sections)
+      map((sections: MenuSections) => Object.values(sections)),
+      distinctUntilChanged(compareArraysUsingIds()),
+      map((sections: MenuSection[]) => {
+          return sections
             .filter((section: MenuSection) => hasNoValue(section.parentID))
             .filter((section: MenuSection) => !mustBeVisible || section.visible);
         }