Implement history form

src/App.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { Children } from 'react';
 import './App.scss';
 import Sidebar from './Components/Sidebar/Sidebar';
 import { ElementsSidebar } from './Components/ElementsSidebar/ElementsSidebar';
@@ -6,6 +6,7 @@ import { AvailableContainer } from './Interfaces/AvailableContainer';
 import { Configuration } from './Interfaces/Configuration';
 import { Container } from './Components/SVG/Elements/Container';
 import { SVG } from './Components/SVG/SVG';
+import { History } from './Components/History/History';
 
 interface IAppProps {
 }
@@ -255,6 +256,12 @@ class App extends React.Component<IAppProps> {
     } as IAppState);
   }
 
+  public jumpTo(move: number): void {
+    this.setState({
+      historyCurrentStep: move
+    } as IAppState);
+  }
+
   /**
    * Render the application
    * @returns {JSX.Element} Rendered JSX element
@@ -282,6 +289,7 @@ class App extends React.Component<IAppProps> {
         <SVG selected={current.SelectedContainer}>
           { current.MainContainer }
         </SVG>
+        <History history={this.state.history} jumpTo={(move) => { this.jumpTo(move); }} />
       </div>
     );
   }

src/Components/History/History.tsx

@@ -0,0 +1,29 @@
+import * as React from 'react';
+import { IHistoryState } from '../../App';
+
+interface IHistoryProps {
+  history: IHistoryState[],
+  jumpTo: (move: number) => void
+}
+
+export class History extends React.Component<IHistoryProps> {
+  public render() {
+    const states = this.props.history.map((step, move) => {
+      const desc = move
+        ? `Go back at turn n°${move}`
+        : 'Go back at the beginning';
+
+      return (
+        <li key={move}>
+          <button onClick={() => this.props.jumpTo(move)}>{desc}</button>
+        </li>
+      );
+    });
+
+    return (
+      <div>
+        { states }
+      </div>
+    );
+  }
+}