From 964d9a0e578cd8d010445e6fe107f8ab7c3f5c21 Mon Sep 17 00:00:00 2001
From: Siklos <siklos@tuta.io>
Date: Thu, 4 Aug 2022 11:17:59 +0200
Subject: [PATCH] Implement history form

---
 src/App.tsx                        | 10 +++++++++-
 src/Components/History/History.tsx | 29 +++++++++++++++++++++++++++++
 2 files changed, 38 insertions(+), 1 deletion(-)
 create mode 100644 src/Components/History/History.tsx

diff --git a/src/App.tsx b/src/App.tsx
index 875dfa0..ac29d48 100644
--- a/src/App.tsx
+++ b/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>
     );
   }
diff --git a/src/Components/History/History.tsx b/src/Components/History/History.tsx
new file mode 100644
index 0000000..6f6d49e
--- /dev/null
+++ b/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>
+    );
+  }
+}