Merged PR 173: Implements API methods through right click + more (read desc)

- Implements API methods through right click
- Refactor events
- Refactor usage of setHistory and setHistoryCurrentStep into a single function
- Update ContainerOperations documentations
- Added AddContainers in order to add multiple containers + refactor AddContainer to use it
- Fix regression
- Fix AddContainer at index

src/Components/API/api.test.tsx

@@ -3,7 +3,7 @@ import { FetchConfiguration } from './api';
 
 describe.concurrent('API test', () => {
   it('Load environment', () => {
-    const url = import.meta.env.VITE_API_URL;
+    const url = import.meta.env.VITE_API_FETCH_URL;
     expect(url).toBe('http://localhost:5000');
   });
 

src/Components/API/api.ts

@@ -1,11 +1,15 @@
 import { IConfiguration } from '../../Interfaces/IConfiguration';
+import { IHistoryState } from '../../Interfaces/IHistoryState';
+import { ISetContainerListRequest } from '../../Interfaces/ISetContainerListRequest';
+import { ISetContainerListResponse } from '../../Interfaces/ISetContainerListResponse';
+import { GetCircularReplacer } from '../../utils/saveload';
 
 /**
  * Fetch the configuration from the API
  * @returns {Configation} The model of the configuration for the application
  */
 export async function FetchConfiguration(): Promise<IConfiguration> {
-  const url = `${import.meta.env.VITE_API_URL}`;
+  const url = import.meta.env.VITE_API_FETCH_URL;
   // The test library cannot use the Fetch API
   // @ts-expect-error
   // eslint-disable-next-line @typescript-eslint/strict-boolean-expressions
@@ -28,3 +32,30 @@ export async function FetchConfiguration(): Promise<IConfiguration> {
     xhr.send();
   });
 }
+
+export async function SetContainerList(request: ISetContainerListRequest): Promise<ISetContainerListResponse> {
+  const url = import.meta.env.VITE_API_POST_URL;
+  const dataParsed = JSON.stringify(request, GetCircularReplacer());
+  // The test library cannot use the Fetch API
+  // @ts-expect-error
+  // eslint-disable-next-line @typescript-eslint/strict-boolean-expressions
+  if (window.fetch) {
+    return await fetch(url, {
+      method: 'POST',
+      body: dataParsed
+    })
+      .then(async(response) =>
+        await response.json()
+      ) as ISetContainerListResponse;
+  }
+  return await new Promise((resolve) => {
+    const xhr = new XMLHttpRequest();
+    xhr.open('POST', url, true);
+    xhr.onreadystatechange = function() { // Call a function when the state changes.
+      if (xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) {
+        resolve(JSON.parse(this.responseText));
+      }
+    };
+    xhr.send(dataParsed);
+  });
+}