Add typescript support

frontend/.eslintrc.json

@@ -0,0 +1,26 @@
+{
+  "parser": "@typescript-eslint/parser",
+  "parserOptions": {
+    "ecmaVersion": 2018,
+    "sourceType": "module"
+  },
+  "plugins": [
+    "@typescript-eslint",
+    "react-hooks"
+  ],
+  "extends": [
+    "plugin:react/recommended",
+    "plugin:@typescript-eslint/recommended"
+  ],
+  "rules": {
+    "react-hooks/rules-of-hooks": "error",
+    "react-hooks/exhaustive-deps": "warn",
+    "react/prop-types": "off"
+  },
+  "settings": {
+    "react": {
+      "pragma": "React",
+      "version": "detect"
+    }
+  }
+}

frontend/babel.config.json

@@ -1,14 +1,15 @@
 {
-    "presets": [
-      [
-        "@babel/preset-env",
-        {
-          "targets": {
-            "node": "10"
-          }
-        }
-      ],
-      "@babel/preset-react"
-    ],
-    "plugins": ["@babel/plugin-proposal-class-properties"]
-  }
+  "presets": [
+    "@babel/preset-env",
+    "@babel/preset-react",
+    "@babel/preset-typescript"
+  ],
+  "plugins": [
+    [
+      "@babel/plugin-transform-runtime",
+      {
+        "regenerator": true
+      }
+    ]
+  ]
+}

frontend/package.json

@@ -4,31 +4,43 @@
   "description": "",
   "main": "index.js",
   "scripts": {
-    "dev": "webpack --mode development --watch",
+    "dev": "webpack --watch --progress --mode development",
     "test": "jest",
     "build": "webpack --mode production"
   },
   "keywords": [],
   "author": "",
   "license": "ISC",
   "devDependencies": {
-    "@babel/core": "^7.16.7",
-    "@babel/preset-env": "^7.16.7",
+    "@babel/core": "^7.17.9",
+    "@babel/plugin-transform-runtime": "^7.17.0",
+    "@babel/preset-env": "^7.16.11",
     "@babel/preset-react": "^7.16.7",
-    "babel-loader": "^8.2.3",
+    "@babel/preset-typescript": "^7.16.7",
+    "@babel/runtime": "^7.17.9",
+    "@types/jest": "^27.4.1",
+    "@types/react": "^17.0.44",
+    "@types/react-dom": "^18.0.1",
+    "@types/webpack": "^5.28.0",
+    "@typescript-eslint/eslint-plugin": "^5.20.0",
+    "@typescript-eslint/parser": "^5.20.0",
+    "babel-loader": "^8.2.5",
+    "eslint": "^8.13.0",
+    "eslint-plugin-react": "^7.29.4",
+    "eslint-plugin-react-hooks": "^4.4.0",
     "jest": "^27.5.1",
-    "openpgp": "^5.2.1",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
-    "webpack": "^5.65.0",
-    "webpack-cli": "^4.9.1"
+    "ts-node": "^10.7.0",
+    "typescript": "^4.6.3",
+    "webpack": "^5.72.0",
+    "webpack-cli": "^4.9.2"
   },
   "dependencies": {
     "@babel/plugin-proposal-class-properties": "^7.16.7",
     "@emotion/react": "^11.7.1",
     "@emotion/styled": "^11.6.0",
     "@material-ui/core": "^4.12.3",
     "@material-ui/icons": "^4.11.2",
+    "@mui/base": "^5.0.0-alpha.77",
     "@mui/icons-material": "^5.2.5",
     "@mui/lab": "^5.0.0-alpha.73",
     "@mui/material": "^5.2.7",
@@ -41,7 +53,10 @@
     "i18next-http-backend": "^1.4.0",
     "i18next-xhr-backend": "^3.2.2",
     "material-ui-image": "^3.3.2",
+    "openpgp": "^5.2.1",
+    "react": "^18.0.0",
     "react-countdown": "^2.3.2",
+    "react-dom": "^18.1.0",
     "react-i18next": "^11.16.2",
     "react-native": "^0.66.4",
     "react-native-svg": "^12.3.0",

frontend/src/components/App.js

@@ -1,5 +1,5 @@
 import React, { Component } from "react";
-import { render } from "react-dom";
+import ReactDOM from 'react-dom/client';
 import HomePage from "./HomePage";
 import { CssBaseline, IconButton} from "@mui/material";
 import { ThemeProvider, createTheme } from '@mui/material/styles';
@@ -46,5 +46,8 @@ export default class App extends Component {
   }
 }
 
-const appDiv = document.getElementById("app");
-render(<App />, appDiv);
+const root = ReactDOM.createRoot(
+  document.getElementById("app")
+);
+
+root.render(<App />);

frontend/src/components/AutocompletePayments.js

@@ -44,7 +44,7 @@ const InputWrapper = styled('div')(
   display: flex;
   flex-wrap: wrap;
   overflow-y:auto;
-  
+
   &:hover {
     border-color: ${theme.palette.mode === 'dark' ? (error? '#f44336':'#ffffff') : (error? '#dd0000' :'#2f2f2f')};
   }
@@ -233,7 +233,7 @@ export default function AutocompletePayments(props) {
     if(a || a == null){props.onAutocompleteChange(optionsToString(value))}
     return false
   };
-  
+
   return (
     <Root>
       <div style={{height:'5px'}}></div>
@@ -252,7 +252,7 @@ export default function AutocompletePayments(props) {
                 <ListHeader ><i>{props.listHeaderText+" "} </i> </ListHeader>
             </div>
           {groupedOptions.map((option, index) => (
-            <li {...getOptionProps({ option, index })}>
+            <li key={option.name} {...getOptionProps({ option, index })}>
               <Button fullWidth={true} color='inherit' size="small" sx={{textTransform: "none"}} style={{justifyContent: "flex-start"}}>
                   <div style={{position:'relative', right: '4px', top:'4px'}}>
                     <AddIcon style={{color : '#1976d2'}} sx={{width:18,height:18}} />
@@ -268,7 +268,7 @@ export default function AutocompletePayments(props) {
               :null)
             :null}
         </Listbox>
-      ) : 
+      ) :
       //Here goes what happens if there is no groupedOptions
       (getInputProps().value.length > 0 ?
         <Listbox {...getListboxProps()}>
@@ -278,4 +278,4 @@ export default function AutocompletePayments(props) {
       }
     </Root>
   );
-}
+}