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/SVG.tsx

@@ -12,74 +12,69 @@ interface ISVGProps {
   selected: ContainerModel | null
 }
 
-interface ISVGState {
+interface Viewer {
   viewerWidth: number
   viewerHeight: number
 }
 
-export class SVG extends React.PureComponent<ISVGProps> {
-  public static ID = 'svg';
-  public state: ISVGState;
+export const ID = 'svg';
 
-  constructor(props: ISVGProps) {
-    super(props);
-    this.state = {
-      viewerWidth: window.innerWidth - BAR_WIDTH,
-      viewerHeight: window.innerHeight
-    };
-  }
-
-  resizeViewBox(): void {
-    this.setState({
-      viewerWidth: window.innerWidth - BAR_WIDTH,
-      viewerHeight: window.innerHeight
-    });
-  }
-
-  componentDidMount(): void {
-    window.addEventListener('resize', () => this.resizeViewBox());
-  }
-
-  componentWillUnmount(): void {
-    window.removeEventListener('resize', () => this.resizeViewBox());
-  }
-
-  render(): JSX.Element {
-    const xmlns = '<http://www.w3.org/2000/svg>';
-
-    const properties = {
-      width: this.props.width,
-      height: this.props.height,
-      xmlns
-    };
-
-    let children: React.ReactNode | React.ReactNode[] = [];
-    if (Array.isArray(this.props.children)) {
-      children = this.props.children.map(child => <Container key={`container-${child.properties.id}`} model={child}/>);
-    } else if (this.props.children !== null) {
-      children = <Container key={`container-${this.props.children.properties.id}`} model={this.props.children}/>;
-    }
-
-    return (
-      <div id={SVG.ID} className='ml-16'>
-        <UncontrolledReactSVGPanZoom
-          width={this.state.viewerWidth}
-          height={this.state.viewerHeight}
-          background={'#ffffff'}
-          defaultTool='pan'
-          miniatureProps={{
-            position: 'left',
-            background: '#616264',
-            width: window.innerWidth - 12 - BAR_WIDTH,
-            height: 120
-          }}
-        >
-          <svg {...properties}>
-            { children }
-            <Selector selected={this.props.selected} />
-          </svg>
-        </UncontrolledReactSVGPanZoom>
-      </div>
-    );
-  };
+function resizeViewBox(
+  setViewer: React.Dispatch<React.SetStateAction<Viewer>>
+): void {
+  setViewer({
+    viewerWidth: window.innerWidth - BAR_WIDTH,
+    viewerHeight: window.innerHeight
+  });
 }
+
+export const SVG: React.FC<ISVGProps> = (props: ISVGProps) => {
+  const [viewer, setViewer] = React.useState<Viewer>({
+    viewerWidth: window.innerWidth,
+    viewerHeight: window.innerHeight
+  });
+
+  React.useEffect(() => {
+    window.addEventListener('resize', () => resizeViewBox(setViewer));
+
+    return () => {
+      window.addEventListener('resize', () => resizeViewBox(setViewer));
+    };
+  });
+
+  const xmlns = '<http://www.w3.org/2000/svg>';
+  const properties = {
+    width: props.width,
+    height: props.height,
+    xmlns
+  };
+
+  let children: React.ReactNode | React.ReactNode[] = [];
+  if (Array.isArray(props.children)) {
+    children = props.children.map(child => <Container key={`container-${child.properties.id}`} model={child}/>);
+  } else if (props.children !== null) {
+    children = <Container key={`container-${props.children.properties.id}`} model={props.children}/>;
+  }
+
+  return (
+    <div id={ID} className='ml-16'>
+      <UncontrolledReactSVGPanZoom
+        width={viewer.viewerWidth}
+        height={viewer.viewerHeight}
+        background={'#ffffff'}
+        defaultTool='pan'
+        miniatureProps={{
+          position: 'left',
+          background: '#616264',
+          width: window.innerWidth - 12 - BAR_WIDTH,
+          height: 120
+        }}
+      >
+        <svg {...properties}>
+          { children }
+          <Selector selected={props.selected} />
+        </svg>
+      </UncontrolledReactSVGPanZoom>
+    </div>
+  );
+};