diff --git a/src/Components/Sidebar/Sidebar.tsx b/src/Components/Sidebar/Sidebar.tsx index ac2f7a4..ec2bab1 100644 --- a/src/Components/Sidebar/Sidebar.tsx +++ b/src/Components/Sidebar/Sidebar.tsx @@ -15,12 +15,18 @@ function HandleDragStart(event: React.DragEvent): void { event.dataTransfer.setData('type', (event.target as HTMLButtonElement).id); } +interface CategoryWrapper { + category: ICategory + children: JSX.Element[] +} + export function Sidebar(props: ISidebarProps): JSX.Element { const rootElements: Array = []; - const categories = new Map(); - const categoriesElements = new Map(props.categories.map(category => { - categories.set(category.Type, category); - return [category.Type, []]; + const categories = new Map(props.categories.map(category => { + return [category.Type, { + category, + children: [] + }]; })); // build the components @@ -46,30 +52,22 @@ export function Sidebar(props: ISidebarProps): JSX.Element { return; } - const category = categoriesElements.get(componentOption.Category); + const category = categories.get(componentOption.Category); if (category === undefined) { console.error(`[Category] Category does not exists in configuration.Categories: ${componentOption.Category}`); return; } - category.push(componentButton); + category.children.push(componentButton); }); // build the categories - 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; - } - + categories.forEach((categoryWrapper, categoryName) => { rootElements.unshift( - { options } + { categoryWrapper.children } ); });