Implement container adding

src/App.tsx

@@ -4,6 +4,7 @@ import Sidebar from './Components/Sidebar/Sidebar';
 import { SVGSidebar } from './Components/SVGSidebar/SVGSidebar';
 import { AvailableContainer } from './Interfaces/AvailableContainer';
 import { Configuration } from './Interfaces/Configuration';
+import { Container } from './SVG/Elements/Container';
 import { MainContainer } from './SVG/Elements/MainContainer';
 import { SVG } from './SVG/SVG';
 
@@ -62,14 +63,29 @@ class App extends React.Component<IAppProps> {
     } as IAppState);
   }
 
-  public AddContainer(type: string) {
-    // const container = new Container({
-    //   x: 0,
-    //   y: 0,
-    //   width: 300,
-    //   height: this.state.configuration.MainContainer.Height,
-    //   children: []
-    // });
+  public AddContainer(type: string): void {
+    if (this.state.MainContainer === null ||
+      this.state.MainContainer === undefined) {
+      return;
+    }
+
+    const container = new Container({
+      x: 0,
+      y: 0,
+      width: 300,
+      height: this.state.configuration.MainContainer.Height,
+      children: []
+    });
+
+    const newMainContainer = new MainContainer({
+      width: this.state.MainContainer.props.width,
+      height: this.state.MainContainer.props.height,
+      children: this.state.MainContainer.props.children.concat([container])
+    });
+
+    this.setState({
+      MainContainer: newMainContainer
+    });
   }
 
   render() {

src/SVG/Elements/Container.tsx

@@ -11,12 +11,18 @@ interface IContainerProps {
 }
 
 export class Container extends React.Component<IContainerProps> {
-  public render(): React.ReactNode {
-    const containersElements = this.props.children.map(child => child.render());
+  public static ContainerCount = 0;
 
+  componentWillUnMount() {
+  }
+
+  public render(): React.ReactNode {
+    Container.ContainerCount++;
+    const containersElements = this.props.children.map(child => child.render());
     return (
       <g
         transform={`translate(${this.props.x}, ${this.props.y})`}
+        key={`container-${Container.ContainerCount}`}
       >
         <rect
           width={this.props.width}