Merged PR 16: Transform every single class components into functional component

This improve greatly the performance and the code cleaning.
It allows us to separate the inseparable class methods into modules functions

src/Components/SVG/Elements/Dimension.tsx

@@ -9,44 +9,42 @@ interface IDimensionProps {
   strokeWidth: number
 }
 
-export class Dimension extends React.PureComponent<IDimensionProps> {
-  public render(): JSX.Element {
-    const style: React.CSSProperties = {
-      stroke: 'black'
-    };
-    return (
-      <g key={this.props.id}>
-        <line
-          x1={this.props.xStart}
-          y1={this.props.y - 4 * this.props.strokeWidth}
-          x2={this.props.xStart}
-          y2={this.props.y + 4 * this.props.strokeWidth}
-          strokeWidth={this.props.strokeWidth}
-          style={style}
-        />
-        <line
-          x1={this.props.xStart}
-          y1={this.props.y}
-          x2={this.props.xEnd}
-          y2={this.props.y}
-          strokeWidth={this.props.strokeWidth}
-          style={style}
-        />
-        <line
-          x1={this.props.xEnd}
-          y1={this.props.y - 4 * this.props.strokeWidth}
-          x2={this.props.xEnd}
-          y2={this.props.y + 4 * this.props.strokeWidth}
-          strokeWidth={this.props.strokeWidth}
-          style={style}
-        />
-        <text
-          x={(this.props.xStart + this.props.xEnd) / 2}
-          y={this.props.y}
-        >
-          {this.props.text}
-        </text>
-      </g>
-    );
-  }
-}
+export const Dimension: React.FC<IDimensionProps> = (props: IDimensionProps) => {
+  const style: React.CSSProperties = {
+    stroke: 'black'
+  };
+  return (
+    <g key={props.id}>
+      <line
+        x1={props.xStart}
+        y1={props.y - 4 * props.strokeWidth}
+        x2={props.xStart}
+        y2={props.y + 4 * props.strokeWidth}
+        strokeWidth={props.strokeWidth}
+        style={style}
+      />
+      <line
+        x1={props.xStart}
+        y1={props.y}
+        x2={props.xEnd}
+        y2={props.y}
+        strokeWidth={props.strokeWidth}
+        style={style}
+      />
+      <line
+        x1={props.xEnd}
+        y1={props.y - 4 * props.strokeWidth}
+        x2={props.xEnd}
+        y2={props.y + 4 * props.strokeWidth}
+        strokeWidth={props.strokeWidth}
+        style={style}
+      />
+      <text
+        x={(props.xStart + props.xEnd) / 2}
+        y={props.y}
+      >
+        {props.text}
+      </text>
+    </g>
+  );
+};