Remove MainContainer as it is the same as Container

src/App.tsx

@@ -5,7 +5,6 @@ import { SVGSidebar } from './Components/SVGSidebar/SVGSidebar';
 import { AvailableContainer } from './Interfaces/AvailableContainer';
 import { Configuration } from './Interfaces/Configuration';
 import { Container } from './Components/SVG/Elements/Container';
-import { MainContainer } from './Components/SVG/Elements/MainContainer';
 import { SVG } from './Components/SVG/SVG';
 
 interface IAppProps {
@@ -15,7 +14,7 @@ interface IAppState {
   isSidebarOpen: boolean,
   isSVGSidebarOpen: boolean,
   configuration: Configuration,
-  MainContainer: MainContainer | null
+  MainContainer: Container | null
 }
 
 class App extends React.Component<IAppProps> {
@@ -40,11 +39,18 @@ class App extends React.Component<IAppProps> {
       this.setState(prevState => ({
         ...prevState,
         configuration,
-        MainContainer: new MainContainer(
+        MainContainer: new Container(
           {
+            id: 'main',
+            x: 0,
+            y: 0,
             width: configuration.MainContainer.Width,
             height: configuration.MainContainer.Height,
-            children: []
+            children: [],
+            style: {
+              fillOpacity: 0,
+              stroke: 'black'
+            } as React.CSSProperties
           }
         )
       }));
@@ -88,9 +94,13 @@ class App extends React.Component<IAppProps> {
       }
     });
 
-    const newMainContainer = new MainContainer({
+    const newMainContainer = new Container({
+      id: this.state.MainContainer.props.id,
+      x: this.state.MainContainer.props.x,
+      y: this.state.MainContainer.props.y,
       width: this.state.MainContainer.props.width,
       height: this.state.MainContainer.props.height,
+      style: this.state.MainContainer.props.style,
       children: this.state.MainContainer.props.children.concat([container])
     });
 
@@ -109,7 +119,7 @@ class App extends React.Component<IAppProps> {
           buttonOnClick={(type: string) => this.AddContainer(type)}
         />
         <button className='fixed z-10 top-4 left-4 text-lg bg-blue-200 hover:bg-blue-300 transition-all drop-shadow-md hover:drop-shadow-lg py-2 px-3 rounded-lg' onClick={() => this.ToggleSidebar()}>&#9776; Menu</button>
-        <SVGSidebar isOpen={this.state.isSVGSidebarOpen} onClick={() => this.ToggleSVGSidebar()}/>
+        <SVGSidebar MainContainer={this.state.MainContainer} isOpen={this.state.isSVGSidebarOpen} onClick={() => this.ToggleSVGSidebar()}/>
         <button className='fixed z-10 top-4 right-12 text-lg bg-slate-200 hover:bg-slate-300 transition-all drop-shadow-md hover:drop-shadow-lg py-2 px-3 rounded-lg' onClick={() => this.ToggleSVGSidebar()}>&#9776; Menu</button>
         <SVG>
           { this.state.MainContainer }

src/Components/SVG/Elements/MainContainer.tsx

@@ -1,30 +0,0 @@
-import * as React from 'react';
-import { Container } from './Container';
-
-interface IMainContainerProps {
-  children: Container[],
-  width: number,
-  height: number,
-}
-
-export class MainContainer extends React.Component<IMainContainerProps> {
-  public render() {
-    const style: React.CSSProperties = {
-      fillOpacity: 0,
-      stroke: 'black'
-    };
-
-    return (
-      <Container
-      id={'main'}
-      x={0}
-      y={0}
-      width={this.props.width}
-      height={this.props.height}
-      style={style}
-      >
-        { this.props.children }
-      </Container>
-    );
-  }
-}

src/Components/SVG/SVG.tsx

@@ -1,9 +1,9 @@
 import * as React from 'react';
-import { MainContainer } from './Elements/MainContainer';
 import { ReactSVGPanZoom, Tool, Value, TOOL_PAN } from 'react-svg-pan-zoom';
+import { Container } from './Elements/Container';
 
 interface ISVGProps {
-  children: MainContainer | MainContainer[] | null,
+  children: Container | Container[] | null,
 }
 
 interface ISVGState {

src/Components/SVGSidebar/SVGSidebar.tsx

@@ -1,11 +1,23 @@
 import * as React from 'react';
+import { Container } from '../SVG/Elements/Container';
 
 interface ISVGSidebarProps {
-  isOpen: boolean;
+  MainContainer: Container | null,
-  onClick: () => void;
+  isOpen: boolean,
+  onClick: () => void
 }
 
 export class SVGSidebar extends React.Component<ISVGSidebarProps> {
+  public iterateChilds(handleContainer: () => void): React.ReactNode {
+    if (!this.props.MainContainer) {
+      return undefined;
+    }
+
+    if (this.props.MainContainer) {
+
+    }
+  }
+
   public render() {
     const isOpenClasses = this.props.isOpen ? 'right-0' : '-right-64';
     return (