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

@@ -6,47 +6,46 @@ interface IPropertiesProps {
   onChange: (key: string, value: string) => void
 }
 
-export class Properties extends React.PureComponent<IPropertiesProps> {
-  public render(): JSX.Element {
-    if (this.props.properties === undefined) {
-      return <div></div>;
-    }
-
-    const groupInput: React.ReactNode[] = [];
-    Object
-      .entries(this.props.properties)
-      .forEach((pair) => this.handleProperties(pair, groupInput));
-
-    return (
-      <div className='p-3 bg-slate-200 h-3/5 overflow-y-auto'>
-        { groupInput }
-      </div>
-    );
+export const Properties: React.FC<IPropertiesProps> = (props: IPropertiesProps) => {
+  if (props.properties === undefined) {
+    return <div></div>;
   }
 
-  public handleProperties = (
-    [key, value]: [string, string | number],
-    groupInput: React.ReactNode[]
-  ): void => {
-    const id = `property-${key}`;
-    const type = 'text';
-    const isDisabled = key === 'id' || key === 'parentId'; // hardcoded
-    groupInput.push(
-      <div key={id} className='mt-4'>
-        <label className='text-sm font-medium text-gray-800' htmlFor={id}>{key}</label>
-        <input
-          className='text-base font-medium transition-all text-gray-800 mt-1 block w-full px-3 py-2
+  const groupInput: React.ReactNode[] = [];
+  Object
+    .entries(props.properties)
+    .forEach((pair) => handleProperties(pair, groupInput, props.onChange));
+
+  return (
+    <div className='p-3 bg-slate-200 h-3/5 overflow-y-auto'>
+      { groupInput }
+    </div>
+  );
+};
+
+const handleProperties = (
+  [key, value]: [string, string | number],
+  groupInput: React.ReactNode[],
+  onChange: (key: string, value: string) => void
+): void => {
+  const id = `property-${key}`;
+  const type = 'text';
+  const isDisabled = key === 'id' || key === 'parentId'; // hardcoded
+  groupInput.push(
+    <div key={id} className='mt-4'>
+      <label className='text-sm font-medium text-gray-800' htmlFor={id}>{key}</label>
+      <input
+        className='text-base font-medium transition-all text-gray-800 mt-1 block w-full px-3 py-2
           bg-white border-2 border-white rounded-lg placeholder-gray-800
           focus:outline-none focus:border-blue-500 focus:ring-1 focus:ring-blue-500
          disabled:bg-slate-300 disabled:text-gray-500 disabled:border-slate-300 disabled:shadow-none
          '
-          type={type}
-          id={id}
-          value={value}
-          onChange={(event) => this.props.onChange(key, event.target.value)}
-          disabled={isDisabled}
-        />
-      </div>
-    );
-  };
-}
+        type={type}
+        id={id}
+        value={value}
+        onChange={(event) => onChange(key, event.target.value)}
+        disabled={isDisabled}
+      />
+    </div>
+  );
+};