Implement Category

src/Components/Sidebar/Sidebar.tsx

@@ -1,6 +1,8 @@
+import { ChevronRightIcon } from '@heroicons/react/outline';
 import * as React from 'react';
 import { IAvailableContainer } from '../../Interfaces/IAvailableContainer';
 import { TruncateString } from '../../utils/stringtools';
+import { Category } from '../Category/Category';
 
 interface ISidebarProps {
   componentOptions: IAvailableContainer[]
@@ -13,10 +15,16 @@ function HandleDragStart(event: React.DragEvent<HTMLButtonElement>): void {
 }
 
 export function Sidebar(props: ISidebarProps): JSX.Element {
-  const listElements = props.componentOptions.map(componentOption =>
-    componentOption.IsHidden !== true &&
-    <button type="button"
-      className='justify-center transition-all sidebar-component'
+  const rootElements: Array<JSX.Element | undefined> = [];
+  const categories = new Map<string, JSX.Element[]>();
+  // build the components
+  props.componentOptions.forEach(componentOption => {
+    if (componentOption.IsHidden === true) {
+      return;
+    }
+
+    const componentButton = (<button type="button"
+      className='w-full justify-center h-16 transition-all sidebar-component'
       key={componentOption.Type}
       id={componentOption.Type}
       title={componentOption.Type}
@@ -25,8 +33,33 @@ export function Sidebar(props: ISidebarProps): JSX.Element {
       onDragStart={(event) => HandleDragStart(event)}
     >
       {TruncateString(componentOption.Type, 25)}
-    </button>
-  );
+    </button>);
+    if (componentOption.Category === null || componentOption.Category === undefined) {
+      rootElements.push(componentButton);
+      return;
+    }
+
+    if (categories.get(componentOption.Category) === undefined) {
+      categories.set(componentOption.Category, []);
+    }
+
+    const category = categories.get(componentOption.Category);
+
+    if (category === undefined) {
+      // should never go here
+      return;
+    }
+
+    category.push(componentButton);
+  });
+
+  // build the categories
+  categories.forEach((options, category) => {
+    rootElements.unshift(
+      <Category category={category}>
+        { options }
+      </Category>);
+  });
 
   const isOpenClasses = props.isOpen ? 'left-16' : '-left-64';
   return (
@@ -38,7 +71,7 @@ export function Sidebar(props: ISidebarProps): JSX.Element {
       </div>
       <div className='grid grid-cols-1 md:grid-cols-1 gap-2
          m-2 md:text-xs font-bold'>
-        {listElements}
+        {rootElements}
       </div>
     </div>
   );