Implement basic save/load (still needs some fixes)

src/App.tsx

@@ -1,6 +1,8 @@
 import * as React from 'react';
+import './App.scss';
+import { MainMenu } from './Components/MainMenu/MainMenu';
 import { ContainerModel, IContainerModel } from './Components/SVG/Elements/ContainerModel';
-import Editor from './Editor';
+import Editor, { IEditorState } from './Editor';
 import { AvailableContainer } from './Interfaces/AvailableContainer';
 import { Configuration } from './Interfaces/Configuration';
 
@@ -23,40 +25,21 @@ interface IAppState {
 export class App extends React.Component<IAppProps> {
   public state: IAppState;
 
-  public constructor(props: IAppProps) {
+  constructor(props: IAppProps) {
     super(props);
-
-    const MainContainer = new ContainerModel(
-      null,
-      {
-        id: 'main',
-        x: 0,
-        y: 0,
-        width: 1000,
-        height: 1000,
-        fillOpacity: 0,
-        stroke: 'black'
-      }
-    );
     this.state = {
       configuration: {
         AvailableContainers: [],
         AvailableSymbols: [],
         MainContainer: {} as AvailableContainer
       },
-      history: [
-        {
-          MainContainer,
-          SelectedContainer: MainContainer,
-          TypeCounters: {}
-        }
-      ],
+      history: [],
       historyCurrentStep: 0,
       isLoaded: false
     };
   }
 
-  componentDidMount() {
+  public NewEditor() {
     // Fetch the configuration from the API
     fetchConfiguration().then((configuration: Configuration) => {
       // Set the main container from the given properties of the API
@@ -91,6 +74,25 @@ export class App extends React.Component<IAppProps> {
     });
   }
 
+  public LoadEditor(files: FileList | null) {
+    if (files === null) {
+      return;
+    }
+    const file = files[0];
+    const reader = new FileReader();
+    reader.addEventListener('load', () => {
+      const result = reader.result as string;
+      const editorState: IEditorState = JSON.parse(result);
+      this.setState({
+        configuration: editorState.configuration,
+        history: editorState.history,
+        historyCurrentStep: editorState.historyCurrentStep,
+        isLoaded: true
+      } as IAppState);
+    });
+    reader.readAsText(file);
+  }
+
   public render() {
     if (this.state.isLoaded) {
       return (
@@ -102,6 +104,15 @@ export class App extends React.Component<IAppProps> {
           />
         </div>
       );
+    } else {
+      return (
+        <div className='bg-blue-100 h-full w-full'>
+          <MainMenu
+            newEditor={() => this.NewEditor()}
+            loadEditor={(files: FileList | null) => this.LoadEditor(files)}
+          />
+        </div>
+      );
     }
   }
 }
@@ -131,6 +142,7 @@ export async function fetchConfiguration(): Promise<Configuration> {
       if (xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) {
         resolve(JSON.parse(this.responseText));
       }
+      reject(xhr.responseText);
     };
     xhr.send();
   });