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

@@ -1,58 +1,56 @@
 import * as React from 'react';
-import { IHistoryState } from '../../App';
+import { HistoryState } from "../../Interfaces/HistoryState";
 
 interface IHistoryProps {
-  history: IHistoryState[]
+  history: HistoryState[]
   historyCurrentStep: number
   isOpen: boolean
   jumpTo: (move: number) => void
 }
 
-export class History extends React.PureComponent<IHistoryProps> {
-  public render(): JSX.Element {
-    const isOpenClasses = this.props.isOpen ? 'right-0' : '-right-64';
+export const History: React.FC<IHistoryProps> = (props: IHistoryProps) => {
+  const isOpenClasses = props.isOpen ? 'right-0' : '-right-64';
 
-    const states = this.props.history.map((step, move) => {
-      const desc = move > 0
-        ? `Go to modification n°${move}`
-        : 'Go to the beginning';
+  const states = props.history.map((step, move) => {
+    const desc = move > 0
+      ? `Go to modification n°${move}`
+      : 'Go to the beginning';
 
-      const isCurrent = move === this.props.historyCurrentStep;
+    const isCurrent = move === props.historyCurrentStep;
 
-      const selectedClass = isCurrent
-        ? 'bg-blue-500 hover:bg-blue-600'
-        : 'bg-slate-500 hover:bg-slate-700';
-
-      const isCurrentText = isCurrent
-        ? ' (current)'
-        : '';
-      return (
-
-        <button
-          key={move}
-          onClick={() => this.props.jumpTo(move)}
-          className={
-            `w-full elements-sidebar-row whitespace-pre
-            text-left text-sm font-medium transition-all ${selectedClass}`
-          }
-        >
-          {desc}{isCurrentText}
-        </button>
-      );
-    });
-
-    // recent first
-    states.reverse();
+    const selectedClass = isCurrent
+      ? 'bg-blue-500 hover:bg-blue-600'
+      : 'bg-slate-500 hover:bg-slate-700';
 
+    const isCurrentText = isCurrent
+      ? ' (current)'
+      : '';
     return (
-      <div className={`fixed flex flex-col bg-slate-300 text-white transition-all h-screen w-64 overflow-y-auto z-20 ${isOpenClasses}`}>
-        <div className='bg-slate-600 font-bold sidebar-title'>
-          Timeline
-        </div>
-        <div className='overflow-y-auto overflow-x-hidden text-slate-300 flex-grow divide-y divide-solid divide-slate-600'>
-          { states }
-        </div>
-      </div>
+
+      <button
+        key={move}
+        onClick={() => props.jumpTo(move)}
+        className={
+          `w-full elements-sidebar-row whitespace-pre
+            text-left text-sm font-medium transition-all ${selectedClass}`
+        }
+      >
+        {desc}{isCurrentText}
+      </button>
     );
-  }
-}
+  });
+
+  // recent first
+  states.reverse();
+
+  return (
+    <div className={`fixed flex flex-col bg-slate-300 text-white transition-all h-screen w-64 overflow-y-auto z-20 ${isOpenClasses}`}>
+      <div className='bg-slate-600 font-bold sidebar-title'>
+          Timeline
+      </div>
+      <div className='overflow-y-auto overflow-x-hidden text-slate-300 flex-grow divide-y divide-solid divide-slate-600'>
+        { states }
+      </div>
+    </div>
+  );
+};