Implement Category list

src/Components/Sidebar/Sidebar.tsx

@@ -1,10 +1,12 @@
 import * as React from 'react';
 import { IAvailableContainer } from '../../Interfaces/IAvailableContainer';
+import { ICategory } from '../../Interfaces/ICategory';
 import { TruncateString } from '../../utils/stringtools';
 import { Category } from '../Category/Category';
 
 interface ISidebarProps {
   componentOptions: IAvailableContainer[]
+  categories: ICategory[]
   isOpen: boolean
   buttonOnClick: (type: string) => void
 }
@@ -15,7 +17,12 @@ function HandleDragStart(event: React.DragEvent<HTMLButtonElement>): void {
 
 export function Sidebar(props: ISidebarProps): JSX.Element {
   const rootElements: Array<JSX.Element | undefined> = [];
-  const categories = new Map<string, JSX.Element[]>();
+  const categories = new Map<string, ICategory>();
+  const categoriesElements = new Map<string, JSX.Element[]>(props.categories.map(category => {
+    categories.set(category.Type, category);
+    return [category.Type, []];
+  }));
+
   // build the components
   props.componentOptions.forEach(componentOption => {
     if (componentOption.IsHidden === true) {
@@ -39,25 +46,27 @@ export function Sidebar(props: ISidebarProps): JSX.Element {
       return;
     }
 
-    if (categories.get(componentOption.Category) === undefined) {
-      categories.set(componentOption.Category, []);
-    }
-
-    const category = categories.get(componentOption.Category);
-
+    const category = categoriesElements.get(componentOption.Category);
     if (category === undefined) {
-      // should never go here
+      console.error(`[Category] Category does not exists in configuration.Categories: ${componentOption.Category}`);
       return;
     }
-
     category.push(componentButton);
   });
 
   // build the categories
-  categories.forEach((options, category) => {
+  categoriesElements.forEach((options, categoryName) => {
+    const category = categories.get(categoryName);
+
+    if (category === undefined) {
+      // should never go here
+      console.error(`[Category] Category does not exists in configuration.Categories: ${categoryName}`);
+      return;
+    }
+
     rootElements.unshift(
       <Category
-        key={category}
+        key={categoryName}
         category={category}
       >
         { options }