Implement history

src/App.tsx

@@ -10,13 +10,18 @@ import { SVG } from './Components/SVG/SVG';
 interface IAppProps {
 }
 
+export interface IHistoryState {
+  MainContainer: Container | null,
+  SelectedContainer: Container | null,
+  TypeCounters: Record<string, number>
+}
+
 interface IAppState {
   isSidebarOpen: boolean,
   isSVGSidebarOpen: boolean,
   configuration: Configuration,
-  MainContainer: Container | null,
+  history: Array<IHistoryState>,
-  SelectedContainer: Container | null
+  historyCurrentStep: 0
-  Counters: Record<string, number>
 }
 
 class App extends React.Component<IAppProps> {
@@ -32,11 +37,19 @@ class App extends React.Component<IAppProps> {
         AvailableSymbols: [],
         MainContainer: {} as AvailableContainer
       },
+      history: [
+        {
           MainContainer: null,
           SelectedContainer: null,
-      Counters: {}
+          TypeCounters: {}
-    };
         }
+      ],
+      historyCurrentStep: 0
+    } as IAppState;
+  }
+
+  public getCurrentHistory = (): IHistoryState[] => this.state.history.slice(0, this.state.historyCurrentStep + 1);
+  public getCurrentHistoryState = (): IHistoryState => this.state.history[this.state.historyCurrentStep];
 
   componentDidMount() {
     // Fetch the configuration from the API
@@ -58,14 +71,25 @@ class App extends React.Component<IAppProps> {
         }
       );
 
+      const history = this.getCurrentHistory();
+      const current = history[history.length - 1];
+
       // Save the configuration and the new MainContainer
       // and default the selected container to it
       this.setState(prevState => ({
         ...prevState,
         configuration,
+        history: history.concat(
+          [
+            {
               MainContainer,
-        SelectedContainer: MainContainer
+              SelectedContainer: MainContainer,
-      }));
+              TypeCounters: current.TypeCounters
+            }
+          ]
+        ),
+        historyCurrentStep: history.length
+      } as IAppState));
     });
   }
 
@@ -92,9 +116,16 @@ class App extends React.Component<IAppProps> {
    * @param container Selected container
    */
   public SelectContainer(container: Container) {
+    const history = this.getCurrentHistory();
+    const current = history[history.length - 1];
     this.setState({
+      history: history.concat([{
+        MainContainer: current.MainContainer,
+        TypeCounters: current.TypeCounters,
         SelectedContainer: container
-    } as IAppProps);
+      }]),
+      historyCurrentStep: history.length
+    } as IAppState);
   }
 
   /**
@@ -104,43 +135,55 @@ class App extends React.Component<IAppProps> {
    * @returns void
    */
   public OnPropertyChange(key: string, value: string | number): void {
-    if (this.state.SelectedContainer === null ||
+    const history = this.getCurrentHistory();
-      this.state.SelectedContainer === undefined) {
+    const current = history[history.length - 1];
+
+    if (current.SelectedContainer === null ||
+      current.SelectedContainer === undefined) {
       throw new Error('Property was changed before selecting a Container');
     }
 
-    if (this.state.MainContainer === null ||
+    if (current.MainContainer === null ||
-      this.state.MainContainer === undefined) {
+      current.MainContainer === undefined) {
       throw new Error('Property was changed before the main container was added');
     }
 
     const pair = {} as Record<string, string | number>;
     pair[key] = value;
-    const properties = Object.assign(this.state.SelectedContainer.props.properties, pair);
+    const properties = Object.assign(current.SelectedContainer.props.properties, pair);
     const props = {
-      ...this.state.SelectedContainer.props,
+      ...current.SelectedContainer.props,
       properties
     };
 
     const newSelectedContainer = new Container(props);
 
-    const parent = this.state.SelectedContainer.props.parent;
+    const parent = current.SelectedContainer.props.parent;
     if (parent === null) {
       this.setState({
+        history: history.concat([{
           SelectedContainer: newSelectedContainer,
-        MainContainer: newSelectedContainer
+          MainContainer: newSelectedContainer,
-      });
+          TypeCounters: current.TypeCounters
+        }]),
+        historyCurrentStep: history.length
+      } as IAppState);
       return;
     }
 
-    const index = parent.props.children.indexOf(this.state.SelectedContainer);
+    const index = parent.props.children.indexOf(current.SelectedContainer);
     parent.props.children[index] = newSelectedContainer;
 
-    const newMainContainer = new Container(Object.assign({}, this.state.MainContainer.props));
+    const newMainContainer = new Container(Object.assign({}, current.MainContainer.props));
-    this.setState({
+    this.setState(
+      {
+        history: history.concat([{
           SelectedContainer: newSelectedContainer,
-      MainContainer: newMainContainer
+          MainContainer: newMainContainer,
-    });
+          TypeCounters: current.TypeCounters
+        }]),
+        historyCurrentStep: history.length
+      } as IAppState);
   }
 
   /**
@@ -149,13 +192,16 @@ class App extends React.Component<IAppProps> {
    * @returns void
    */
   public AddContainer(type: string): void {
-    if (this.state.SelectedContainer === null ||
+    const history = this.getCurrentHistory();
-      this.state.SelectedContainer === undefined) {
+    const current = history[history.length - 1];
+
+    if (current.SelectedContainer === null ||
+      current.SelectedContainer === undefined) {
       return;
     }
 
-    if (this.state.MainContainer === null ||
+    if (current.MainContainer === null ||
-      this.state.MainContainer === undefined) {
+      current.MainContainer === undefined) {
       return;
     }
 
@@ -167,7 +213,7 @@ class App extends React.Component<IAppProps> {
     }
 
     // Set the counter of the object type in order to assign an unique id
-    const newCounters = Object.assign({}, this.state.Counters);
+    const newCounters = Object.assign({}, current.TypeCounters);
     if (newCounters[type] === null ||
       newCounters[type] === undefined) {
       newCounters[type] = 0;
@@ -176,7 +222,7 @@ class App extends React.Component<IAppProps> {
     }
 
     // Create the container
-    const parent = this.state.SelectedContainer;
+    const parent = current.SelectedContainer;
     const count = newCounters[type];
     const container = new Container({
       parent,
@@ -198,11 +244,15 @@ class App extends React.Component<IAppProps> {
     parent.props.children.push(container);
 
     // Update the state
-    const newMainContainer = new Container(Object.assign({}, this.state.MainContainer.props));
+    const newMainContainer = new Container(Object.assign({}, current.MainContainer.props));
     this.setState({
+      history: history.concat([{
         MainContainer: newMainContainer,
-      Counters: newCounters
+        TypeCounters: newCounters,
-    });
+        SelectedContainer: current.SelectedContainer
+      }]),
+      historyCurrentStep: history.length
+    } as IAppState);
   }
 
   /**
@@ -210,6 +260,7 @@ class App extends React.Component<IAppProps> {
    * @returns {JSX.Element} Rendered JSX element
    */
   render() {
+    const current = this.getCurrentHistoryState();
     return (
       <div className="App font-sans h-full">
         <Sidebar
@@ -220,16 +271,16 @@ class App extends React.Component<IAppProps> {
         />
         <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; Components</button>
         <ElementsSidebar
-          MainContainer={this.state.MainContainer}
+          MainContainer={current.MainContainer}
-          SelectedContainer={this.state.SelectedContainer}
+          SelectedContainer={current.SelectedContainer}
           isOpen={this.state.isSVGSidebarOpen}
           onClick={() => this.ToggleElementsSidebar()}
           onPropertyChange={(key: string, value: string) => this.OnPropertyChange(key, value)}
           selectContainer={(container: Container) => this.SelectContainer(container)}
         />
         <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.ToggleElementsSidebar()}>&#9776; Elements</button>
-        <SVG selected={this.state.SelectedContainer}>
+        <SVG selected={current.SelectedContainer}>
-          { this.state.MainContainer }
+          { current.MainContainer }
         </SVG>
       </div>
     );