Merge pull request #60 from lars-reimann/react_linting

Add ESLint linting rules for React

client/.eslintrc.js

@@ -7,6 +7,7 @@ module.exports = {
     ],
     extends: [
         "eslint:recommended",
+        "plugin:react/recommended",
         "plugin:@typescript-eslint/recommended",
     ],
     rules: {
@@ -25,5 +26,14 @@ module.exports = {
                 "allowedNames": ["current"]
             }
         ]
+    },
+    // See https://github.com/yannickcr/eslint-plugin-react#configuration
+    "settings": {
+        "react": {
+            "version": "detect"
+        },
+        "propWrapperFunctions": [],
+        "componentWrapperFunctions": [],
+        "linkComponents": []
     }
 };

client/src/Components/ParameterView/DocumentationText.tsx

@@ -28,9 +28,9 @@ export default function DocumentationText({inputText = ""}: DocumentationTextPro
         }}>
             {!readMore && hasMultipleLines && "▶"}
             {readMore && hasMultipleLines && "▼"}
-            <ReactMarkdown className={cssClasses} children={readMore ? inputText : shortenedText}
-                           remarkPlugins={[remarkGfm]}/>
-
+            <ReactMarkdown className={cssClasses} remarkPlugins={[remarkGfm]}>
+                {readMore ? inputText : shortenedText}
+            </ReactMarkdown>
         </div>
     );
 }

client/src/Components/ParameterView/ParameterView.tsx

@@ -18,9 +18,8 @@ export default function ParameterView({inputParameters, selection, selectedFunct
         <div className="parameter-view">
             <div className="parameter-view-path">
                 {selection.length > 0 ?
-                    // eslint-disable-next-line
-                    selection.map<React.ReactNode>(n => <a href="#">{n}</a>)
-                        .reduce((p, c) => [p, (<span> / </span>), c]) :
+                    selection.map<React.ReactNode>((n, index) => <a href="#" key={index}>{n}</a>)
+                        .reduce((p, c, index) => [p, (<span key={index}> / </span>), c]) :
                     ""}
             </div>
             {selectedFunction !== null &&

client/src/Components/Tree/ModuleNode.tsx

@@ -5,13 +5,14 @@ import {isEmptyList} from "../../util/listOperations";
 import classNames from "classnames";
 import PythonModule from "../../model/PythonModule";
 import PythonFunction from "../../model/PythonFunction";
+import PythonParameter from "../../model/PythonParameter";
 
 type ModuleNodeProps = {
     parentPath: string[],
     pythonModule: PythonModule,
     selection: string[],
-    setSelection: (newValue: string[]) => void,
-    setParameters: Setter<string[]>,
+    setSelection: Setter<string[]>,
+    setParameters: Setter<PythonParameter[]>,
     setSelectedFunction: Setter<Nullable<PythonFunction>>
 }
 

client/src/global.d.ts

@@ -1,4 +1,4 @@
 type Nullable<T> = T | null
 
 type Getter<T> = () => T
-type Setter<T> = (T) => void
+type Setter<T> = (newValue: T) => void