replace menu decorators with switches to solve an issue where decorators were not loaded in time

Author: artlowel

src/app/+admin/admin-sidebar/admin-sidebar-section/admin-sidebar-section.component.ts

@@ -2,7 +2,6 @@ import { Component, Inject, Injector, OnInit } from '@angular/core';
 import { MenuSectionComponent } from '../../../shared/menu/menu-section/menu-section.component';
 import { MenuID } from '../../../shared/menu/initial-menus-state';
 import { MenuService } from '../../../shared/menu/menu.service';
-import { rendersSectionForMenu } from '../../../shared/menu/menu-section.decorator';
 import { LinkMenuItemModel } from '../../../shared/menu/menu-item/models/link.model';
 import { MenuSection } from '../../../shared/menu/menu.reducer';
 
@@ -15,7 +14,6 @@ import { MenuSection } from '../../../shared/menu/menu.reducer';
   styleUrls: ['./admin-sidebar-section.component.scss'],
 
 })
-@rendersSectionForMenu(MenuID.ADMIN, false)
 export class AdminSidebarSectionComponent extends MenuSectionComponent implements OnInit {
 
   /**

src/app/+admin/admin-sidebar/expandable-admin-sidebar-section/expandable-admin-sidebar-section.component.ts

@@ -8,7 +8,6 @@ import { MenuID } from '../../../shared/menu/initial-menus-state';
 import { MenuService } from '../../../shared/menu/menu.service';
 import { combineLatest as combineLatestObservable, Observable } from 'rxjs';
 import { map } from 'rxjs/operators';
-import { rendersSectionForMenu } from '../../../shared/menu/menu-section.decorator';
 
 /**
  * Represents a expandable section in the sidebar
@@ -20,7 +19,6 @@ import { rendersSectionForMenu } from '../../../shared/menu/menu-section.decorat
   animations: [rotate, slide, bgColor]
 })
 
-@rendersSectionForMenu(MenuID.ADMIN, true)
 export class ExpandableAdminSidebarSectionComponent extends AdminSidebarSectionComponent implements OnInit {
   /**
    * This section resides in the Admin Sidebar

src/app/navbar/expandable-navbar-section/expandable-navbar-section.component.ts

@@ -5,7 +5,6 @@ import { MenuID } from '../../shared/menu/initial-menus-state';
 import { slide } from '../../shared/animations/slide';
 import { first } from 'rxjs/operators';
 import { HostWindowService } from '../../shared/host-window.service';
-import { rendersSectionForMenu } from '../../shared/menu/menu-section.decorator';
 
 /**
  * Represents an expandable section in the navbar
@@ -16,7 +15,6 @@ import { rendersSectionForMenu } from '../../shared/menu/menu-section.decorator'
   styleUrls: ['./expandable-navbar-section.component.scss'],
   animations: [slide]
 })
-@rendersSectionForMenu(MenuID.PUBLIC, true)
 export class ExpandableNavbarSectionComponent extends NavbarSectionComponent implements OnInit {
   /**
    * This section resides in the Public Navbar

src/app/navbar/navbar-section/navbar-section.component.ts

@@ -2,7 +2,6 @@ import { Component, Inject, Injector, OnInit } from '@angular/core';
 import { MenuSectionComponent } from '../../shared/menu/menu-section/menu-section.component';
 import { MenuService } from '../../shared/menu/menu.service';
 import { MenuID } from '../../shared/menu/initial-menus-state';
-import { rendersSectionForMenu } from '../../shared/menu/menu-section.decorator';
 
 /**
  * Represents a non-expandable section in the navbar
@@ -12,7 +11,6 @@ import { rendersSectionForMenu } from '../../shared/menu/menu-section.decorator'
   templateUrl: './navbar-section.component.html',
   styleUrls: ['./navbar-section.component.scss']
 })
-@rendersSectionForMenu(MenuID.PUBLIC, false)
 export class NavbarSectionComponent extends MenuSectionComponent implements OnInit {
   /**
    * This section resides in the Public Navbar

src/app/shared/menu/menu-item.decorator.ts

@@ -1,26 +1,20 @@
 import { MenuItemType } from './initial-menus-state';
-
-const menuMenuItemComponentMap = new Map();
-
-/**
- * Decorator function to link a MenuItemType to a Component
- * @param {MenuItemType} type The MenuItemType of the MenuSection's model
- * @returns {(sectionComponent: GenericContructor) => void}
- */
-export function rendersMenuItemForType(type: MenuItemType) {
-  return function decorator(sectionComponent: any) {
-    if (!sectionComponent) {
-      return;
-    }
-    menuMenuItemComponentMap.set(type, sectionComponent);
-  };
-}
+import { LinkMenuItemComponent } from './menu-item/link-menu-item.component';
+import { OnClickMenuItemComponent } from './menu-item/onclick-menu-item.component';
+import { TextMenuItemComponent } from './menu-item/text-menu-item.component';
 
 /**
  * Retrieves the Component matching a given MenuItemType
  * @param {MenuItemType} type The given MenuItemType
  * @returns {GenericConstructor} The constructor of the Component that matches the MenuItemType
  */
 export function getComponentForMenuItemType(type: MenuItemType) {
-  return menuMenuItemComponentMap.get(type);
+  switch (type) {
+    case MenuItemType.LINK:
+      return LinkMenuItemComponent;
+    case MenuItemType.ONCLICK:
+      return OnClickMenuItemComponent;
+    case MenuItemType.TEXT:
+      return TextMenuItemComponent;
+  }
 }

src/app/shared/menu/menu-item/link-menu-item.component.ts

@@ -1,7 +1,5 @@
-import { Component, Inject, Input, OnInit } from '@angular/core';
+import { Component, Inject, OnInit } from '@angular/core';
 import { LinkMenuItemModel } from './models/link.model';
-import { MenuItemType } from '../initial-menus-state';
-import { rendersMenuItemForType } from '../menu-item.decorator';
 import { isNotEmpty } from '../../empty.util';
 import { environment } from '../../../../environments/environment';
 
@@ -12,7 +10,6 @@ import { environment } from '../../../../environments/environment';
   selector: 'ds-link-menu-item',
   templateUrl: './link-menu-item.component.html'
 })
-@rendersMenuItemForType(MenuItemType.LINK)
 export class LinkMenuItemComponent implements OnInit {
   item: LinkMenuItemModel;
   hasLink: boolean;

src/app/shared/menu/menu-item/onclick-menu-item.component.ts

@@ -1,6 +1,4 @@
 import { Component, Inject } from '@angular/core';
-import { MenuItemType } from '../initial-menus-state';
-import { rendersMenuItemForType } from '../menu-item.decorator';
 import { OnClickMenuItemModel } from './models/onclick.model';
 
 /**
@@ -11,7 +9,6 @@ import { OnClickMenuItemModel } from './models/onclick.model';
   styleUrls: ['./onclick-menu-item.component.scss'],
   templateUrl: './onclick-menu-item.component.html'
 })
-@rendersMenuItemForType(MenuItemType.ONCLICK)
 export class OnClickMenuItemComponent {
   item: OnClickMenuItemModel;
   constructor(@Inject('itemModelProvider') item: OnClickMenuItemModel) {

src/app/shared/menu/menu-item/text-menu-item.component.ts

@@ -1,7 +1,5 @@
-import { Component, Inject, Input } from '@angular/core';
+import { Component, Inject } from '@angular/core';
 import { TextMenuItemModel } from './models/text.model';
-import { MenuItemType } from '../initial-menus-state';
-import { rendersMenuItemForType } from '../menu-item.decorator';
 
 /**
  * Component that renders a menu section of type TEXT
@@ -10,7 +8,6 @@ import { rendersMenuItemForType } from '../menu-item.decorator';
   selector: 'ds-text-menu-item',
   templateUrl: './text-menu-item.component.html',
 })
-@rendersMenuItemForType(MenuItemType.TEXT)
 export class TextMenuItemComponent {
   item: TextMenuItemModel;
   constructor(@Inject('itemModelProvider') item: TextMenuItemModel) {

src/app/shared/menu/menu-section.decorator.ts

@@ -1,24 +1,8 @@
 import { MenuID } from './initial-menus-state';
-
-const menuComponentMap = new Map();
-
-/**
- * Decorator function to render a MenuSection for a menu
- * @param {MenuID} menuID The ID of the Menu in which the section is rendered
- * @param {boolean} expandable True when the section should be expandable, false when if should not
- * @returns {(menuSectionWrapperComponent: GenericConstructor) => void}
- */
-export function rendersSectionForMenu(menuID: MenuID, expandable: boolean) {
-  return function decorator(menuSectionWrapperComponent: any) {
-    if (!menuSectionWrapperComponent) {
-      return;
-    }
-    if (!menuComponentMap.get(menuID)) {
-      menuComponentMap.set(menuID, new Map());
-    }
-    menuComponentMap.get(menuID).set(expandable, menuSectionWrapperComponent);
-  };
-}
+import { NavbarSectionComponent } from '../../navbar/navbar-section/navbar-section.component';
+import { ExpandableNavbarSectionComponent } from '../../navbar/expandable-navbar-section/expandable-navbar-section.component';
+import { ExpandableAdminSidebarSectionComponent } from '../../+admin/admin-sidebar/expandable-admin-sidebar-section/expandable-admin-sidebar-section.component';
+import { AdminSidebarSectionComponent } from '../../+admin/admin-sidebar/admin-sidebar-section/admin-sidebar-section.component';
 
 /**
  * Retrieves the component matching the given MenuID and whether or not it should be expandable
@@ -27,5 +11,13 @@ export function rendersSectionForMenu(menuID: MenuID, expandable: boolean) {
  * @returns {GenericConstructor} The constructor of the matching Component
  */
 export function getComponentForMenu(menuID: MenuID, expandable: boolean) {
-  return menuComponentMap.get(menuID).get(expandable);
+  if (menuID === MenuID.PUBLIC && expandable === true) {
+    return ExpandableNavbarSectionComponent;
+  } else if (menuID === MenuID.PUBLIC && expandable === false) {
+    return NavbarSectionComponent;
+  } else if (menuID === MenuID.ADMIN && expandable === true) {
+    return ExpandableAdminSidebarSectionComponent;
+  } else if (menuID === MenuID.ADMIN && expandable === false) {
+    return AdminSidebarSectionComponent;
+  }
 }