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

@@ -1,17 +1,17 @@
 import * as React from 'react';
 import { ElementsSidebar } from '../ElementsSidebar/ElementsSidebar';
-import Sidebar from '../Sidebar/Sidebar';
+import { Sidebar } from '../Sidebar/Sidebar';
 import { History } from '../History/History';
 import { AvailableContainer } from '../../Interfaces/AvailableContainer';
 import { ContainerModel } from '../../Interfaces/ContainerModel';
-import { IHistoryState } from '../../App';
+import { HistoryState } from "../../Interfaces/HistoryState";
 import { PhotographIcon, UploadIcon } from '@heroicons/react/outline';
-import FloatingButton from '../FloatingButton/FloatingButton';
+import { FloatingButton } from '../FloatingButton/FloatingButton';
 import { Bar } from '../Bar/Bar';
 
 interface IUIProps {
-  current: IHistoryState
-  history: IHistoryState[]
+  current: HistoryState
+  history: HistoryState[]
   historyCurrentStep: number
   AvailableContainers: AvailableContainer[]
   SelectContainer: (container: ContainerModel) => void
@@ -24,108 +24,70 @@ interface IUIProps {
   LoadState: (move: number) => void
 }
 
-interface IUIState {
-  isSidebarOpen: boolean
-  isElementsSidebarOpen: boolean
-  isHistoryOpen: boolean
-}
+export const UI: React.FunctionComponent<IUIProps> = (props: IUIProps) => {
+  const [isSidebarOpen, setIsSidebarOpen] = React.useState(true);
+  const [isElementsSidebarOpen, setIsElementsSidebarOpen] = React.useState(false);
+  const [isHistoryOpen, setIsHistoryOpen] = React.useState(false);
 
-export class UI extends React.PureComponent<IUIProps, IUIState> {
-  constructor(props: IUIProps) {
-    super(props);
-    this.state = {
-      isSidebarOpen: true,
-      isElementsSidebarOpen: false,
-      isHistoryOpen: false
-    };
+  let buttonRightOffsetClasses = 'right-12';
+  if (isElementsSidebarOpen || isHistoryOpen) {
+    buttonRightOffsetClasses = 'right-72';
+  }
+  if (isHistoryOpen && isElementsSidebarOpen) {
+    buttonRightOffsetClasses = 'right-[544px]';
   }
 
-  /**
-   * Toggle the components sidebar
-   */
-  public ToggleSidebar(): void {
-    this.setState({
-      isSidebarOpen: !this.state.isSidebarOpen
-    });
-  }
+  return (
+    <>
+      <Bar
+        isSidebarOpen={isSidebarOpen}
+        isElementsSidebarOpen={isElementsSidebarOpen}
+        isHistoryOpen={isHistoryOpen}
+        ToggleElementsSidebar={() => setIsElementsSidebarOpen(!isElementsSidebarOpen)}
+        ToggleSidebar={() => setIsSidebarOpen(!isSidebarOpen)}
+        ToggleTimeline={() => setIsHistoryOpen(!isHistoryOpen)}
+      />
 
-  /**
-   * Toggle the elements
-   */
-  public ToggleElementsSidebar(): void {
-    this.setState({
-      isElementsSidebarOpen: !this.state.isElementsSidebarOpen
-    });
-  }
+      <Sidebar
+        componentOptions={props.AvailableContainers}
+        isOpen={isSidebarOpen}
+        buttonOnClick={(type: string) => props.AddContainerToSelectedContainer(type)}
+      />
+      <ElementsSidebar
+        MainContainer={props.current.MainContainer}
+        SelectedContainer={props.current.SelectedContainer}
+        isOpen={isElementsSidebarOpen}
+        isHistoryOpen={isHistoryOpen}
+        onPropertyChange={props.OnPropertyChange}
+        SelectContainer={props.SelectContainer}
+        DeleteContainer={props.DeleteContainer}
+        AddContainer={props.AddContainer}
+      />
+      <History
+        history={props.history}
+        historyCurrentStep={props.historyCurrentStep}
+        isOpen={isHistoryOpen}
+        jumpTo={props.LoadState}
+      />
 
-  /**
-   * Toggle the elements
-   */
-  public ToggleTimeline(): void {
-    this.setState({
-      isHistoryOpen: !this.state.isHistoryOpen
-    });
-  }
+      <FloatingButton className={`fixed z-10 flex flex-col gap-2 items-center bottom-40 ${buttonRightOffsetClasses}`}>
+        <button
+          className={'transition-all w-10 h-10 p-2 align-middle items-center justify-center rounded-full bg-blue-500 hover:bg-blue-800'}
+          title='Export as JSON'
+          onClick={props.SaveEditorAsJSON}
+        >
+          <UploadIcon className="heroicon text-white" />
+        </button>
+        <button
+          className={'transition-all w-10 h-10 p-2 align-middle items-center justify-center rounded-full bg-blue-500 hover:bg-blue-800'}
+          title='Export as SVG'
+          onClick={props.SaveEditorAsSVG}
+        >
+          <PhotographIcon className="heroicon text-white" />
+        </button>
+      </FloatingButton>
+    </>
+  );
+};
 
-  public render(): JSX.Element {
-    let buttonRightOffsetClasses = 'right-12';
-    if (this.state.isElementsSidebarOpen || this.state.isHistoryOpen) {
-      buttonRightOffsetClasses = 'right-72';
-    }
-    if (this.state.isHistoryOpen && this.state.isElementsSidebarOpen) {
-      buttonRightOffsetClasses = 'right-[544px]';
-    }
-
-    return (
-      <>
-        <Bar
-          isSidebarOpen={this.state.isSidebarOpen}
-          isElementsSidebarOpen={this.state.isElementsSidebarOpen}
-          isHistoryOpen={this.state.isHistoryOpen}
-          ToggleElementsSidebar={() => this.ToggleElementsSidebar()}
-          ToggleSidebar={() => this.ToggleSidebar()}
-          ToggleTimeline={() => this.ToggleTimeline()}
-        />
-
-        <Sidebar
-          componentOptions={this.props.AvailableContainers}
-          isOpen={this.state.isSidebarOpen}
-          buttonOnClick={(type: string) => this.props.AddContainerToSelectedContainer(type)}
-        />
-        <ElementsSidebar
-          MainContainer={this.props.current.MainContainer}
-          SelectedContainer={this.props.current.SelectedContainer}
-          isOpen={this.state.isElementsSidebarOpen}
-          isHistoryOpen={this.state.isHistoryOpen}
-          onPropertyChange={this.props.OnPropertyChange}
-          SelectContainer={this.props.SelectContainer}
-          DeleteContainer={this.props.DeleteContainer}
-          AddContainer={this.props.AddContainer}
-        />
-        <History
-          history={this.props.history}
-          historyCurrentStep={this.props.historyCurrentStep}
-          isOpen={this.state.isHistoryOpen}
-          jumpTo={this.props.LoadState}
-        />
-
-        <FloatingButton className={`fixed z-10 flex flex-col gap-2 items-center bottom-40 ${buttonRightOffsetClasses}`}>
-          <button
-            className={'transition-all w-10 h-10 p-2 align-middle items-center justify-center rounded-full bg-blue-500 hover:bg-blue-800'}
-            title='Export as JSON'
-            onClick={this.props.SaveEditorAsJSON}
-          >
-            <UploadIcon className="heroicon text-white" />
-          </button>
-          <button
-            className={'transition-all w-10 h-10 p-2 align-middle items-center justify-center rounded-full bg-blue-500 hover:bg-blue-800'}
-            title='Export as SVG'
-            onClick={this.props.SaveEditorAsSVG}
-          >
-            <PhotographIcon className="heroicon text-white" />
-          </button>
-        </FloatingButton>
-      </>
-    );
-  }
-}
+export default UI;