From 40fae7dde369121514acf3c12d310ddfb065bffb Mon Sep 17 00:00:00 2001
From: Hydroxycarbamide <nguyen.hoang.eric@protonmail.com>
Date: Sat, 30 Jul 2022 23:43:28 +0200
Subject: [PATCH] Implement MainContainer

---
 src/App.tsx                        | 18 ++++++++++------
 src/SVG/Elements/Container.tsx     | 23 +++++++++++++++++++++
 src/SVG/Elements/MainContainer.tsx | 20 ++++++++++++++++++
 src/SVG/SVG.tsx                    | 33 ++++++++++++++++++++++++++++++
 4 files changed, 88 insertions(+), 6 deletions(-)
 create mode 100644 src/SVG/Elements/Container.tsx
 create mode 100644 src/SVG/Elements/MainContainer.tsx
 create mode 100644 src/SVG/SVG.tsx

diff --git a/src/App.tsx b/src/App.tsx
index ece4711..f1e94dd 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -3,13 +3,14 @@ import './App.scss';
 import Sidebar from './Components/Sidebar/Sidebar';
 import { IAvailableContainerModel } from './Interfaces/IAvailableContainerModel';
 import { IConfigurationResponseModel } from './Interfaces/IConfigurationResponseModel';
+import { SVG } from './SVG/SVG';
 
 interface IAppProps {
 }
 
 interface IAppState {
-  componentOptions: IAvailableContainerModel[]
-  isSidebarOpen: boolean
+  isSidebarOpen: boolean,
+  configuration: IConfigurationResponseModel
 }
 
 class App extends React.Component<IAppProps> {
@@ -19,7 +20,11 @@ class App extends React.Component<IAppProps> {
     super(props);
     this.state = {
       isSidebarOpen: true,
-      componentOptions: []
+      configuration: {
+        AvailableContainers: [],
+        AvailableSymbols: [],
+        MainContainer: {} as IAvailableContainerModel
+      }
     };
   }
 
@@ -27,7 +32,7 @@ class App extends React.Component<IAppProps> {
     fetchConfiguration().then((configuration: IConfigurationResponseModel) => {
       this.setState({
         isSidebarOpen: this.state.isSidebarOpen,
-        componentOptions: configuration.AvailableContainers
+        configuration
       });
     });
   }
@@ -35,15 +40,16 @@ class App extends React.Component<IAppProps> {
   public ToggleMenu() {
     this.setState({
       isSidebarOpen: !this.state.isSidebarOpen,
-      componentOptions: this.state.componentOptions
+      configuration: this.state.configuration
     });
   }
 
   render() {
     return (
       <div className="App font-sans h-full">
-        <Sidebar componentOptions={this.state.componentOptions} isOpen={this.state.isSidebarOpen} onClick={() => this.ToggleMenu()} />
+        <Sidebar componentOptions={this.state.configuration.AvailableContainers} isOpen={this.state.isSidebarOpen} onClick={() => this.ToggleMenu()} />
         <button className='fixed z-0 top-4 left-4 text-lg' onClick={() => this.ToggleMenu()}>&#9776; Menu</button>
+        <SVG MainContainer={this.state.configuration.MainContainer} />
       </div>
     );
   }
diff --git a/src/SVG/Elements/Container.tsx b/src/SVG/Elements/Container.tsx
new file mode 100644
index 0000000..8885c1f
--- /dev/null
+++ b/src/SVG/Elements/Container.tsx
@@ -0,0 +1,23 @@
+import * as React from 'react';
+
+interface IContainerProps {
+  x: number,
+  y: number,
+  width: number,
+  height: number,
+}
+
+export class Container extends React.Component<IContainerProps> {
+  public render() {
+    const properties = {
+      x: this.props.x,
+      y: this.props.y,
+      width: this.props.width,
+      height: this.props.height
+    };
+
+    return (
+      <rect {...properties} />
+    );
+  }
+}
diff --git a/src/SVG/Elements/MainContainer.tsx b/src/SVG/Elements/MainContainer.tsx
new file mode 100644
index 0000000..f9dcab4
--- /dev/null
+++ b/src/SVG/Elements/MainContainer.tsx
@@ -0,0 +1,20 @@
+import * as React from 'react';
+import { Container } from './Container';
+
+interface IMainContainerProps {
+  width: number,
+  height: number,
+}
+
+export class MainContainer extends React.Component<IMainContainerProps> {
+  public render() {
+    return (
+      <Container
+      x={0}
+      y={0}
+      width={this.props.width}
+      height={this.props.height}
+      />
+    );
+  }
+}
diff --git a/src/SVG/SVG.tsx b/src/SVG/SVG.tsx
new file mode 100644
index 0000000..ac6181c
--- /dev/null
+++ b/src/SVG/SVG.tsx
@@ -0,0 +1,33 @@
+import * as React from 'react';
+import { IAvailableContainerModel } from '../Interfaces/IAvailableContainerModel';
+import { MainContainer } from './Elements/MainContainer';
+
+interface ISVGProps {
+  MainContainer: IAvailableContainerModel
+}
+
+export class SVG extends React.Component<ISVGProps> {
+  render() {
+    const viewBox: string = [
+      0,
+      0,
+      window.innerWidth,
+      window.innerHeight
+    ].join(' ');
+    const xmlns = '<http://www.w3.org/2000/svg>';
+
+    const properties = {
+      viewBox,
+      xmlns
+    };
+
+    return (
+        <svg {...properties}>
+          <MainContainer
+            width={this.props.MainContainer.Width}
+            height={this.props.MainContainer.Height}
+          />
+        </svg>
+    );
+  };
+}