TypeScript

frontend/package.json

@@ -28,7 +28,12 @@
   "dependencies": {
     "@material-ui/core": "^4.11.3",
     "@material-ui/icons": "^4.11.2",
+    "@types/jest": "^26.0.20",
+    "@types/node": "^14.14.22",
+    "@types/react": "^17.0.1",
+    "@types/react-dom": "^17.0.0",
     "object-hash": "^2.1.1",
+    "react-scripts": "^4.0.1",
     "reverse-md5": "0.0.5"
   },
   "devDependencies": {
@@ -40,6 +45,8 @@
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
     "style-loader": "^2.0.0",
+    "ts-loader": "^8.0.14",
+    "typescript": "^4.1.3",
     "webpack": "^5.17.0",
     "webpack-cli": "^4.3.1"
   }

frontend/src/components/App.tsx

@@ -3,9 +3,9 @@ import { render } from "react-dom";
 import LoginForm from "./LoginForm";
 
 class App extends Component {
-    constructor(props) {
+    /*constructor(props) {
         super(props)
-    }
+    }*/
 
     render() {
         return (

frontend/src/components/Dashboard.tsx

@@ -7,13 +7,10 @@ import ListItemText from "@material-ui/core/ListItemText"
 import Filter6Icon from '@material-ui/icons/Filter6';
 
 class Dashboard extends Component {
-    constructor(props) {
-        super(props)
-        this.state = {
-            cookies_data: sessionStorage.getItem('cookies_data'),
-            csrfcookie: sessionStorage.getItem('csrfcookie'),
-            data: {}
-        }
+    state = {
+        cookies_data: sessionStorage.getItem('cookies_data'),
+        csrfcookie: sessionStorage.getItem('csrfcookie'),
+        data: {}
     }
 
     componentDidMount() {

frontend/src/components/LoginForm.tsx

@@ -3,20 +3,23 @@ import TextField from "@material-ui/core/TextField"
 import Button from "@material-ui/core/Button"
 
 class LoginForm extends Component {
+    state = {
+        loginName: '',
+        Password: '',
+        Symbol: '', //'powiatwulkanowy',
+        diaryUrl: 'http://cufs.fakelog.cf/'
+    };
     constructor(props) {
         super(props);
-        this.state = {
-            loginName: '',
-            Password: '',
-            Symbol: 'powiatwulkanowy',
-            diaryUrl: 'http://cufs.fakelog.cf/'
-        };
         this.handleChangeEmail = this.handleChangeEmail.bind(this);
         this.handleChangePassword = this.handleChangePassword.bind(this);
+        this.handleChangeSymbol = this.handleChangePassword.bind(this)
         this.handleSubmit = this.handleSubmit.bind(this);
     }
 
     handleChangeEmail(event) {    this.setState({loginName: event.target.value});  }
+    handleChangePassword(event) {    this.setState({Password: event.target.value});  }
+    handleChangeSymbol(event) {     this.setState({Symbol: event.target.value});    }
     csrfcookie() {
         var cookieValue = null,
             name = 'csrftoken';
@@ -32,7 +35,6 @@ class LoginForm extends Component {
         }
         return cookieValue;
     };
-    handleChangePassword(event) {    this.setState({Password: event.target.value});  }
     handleSubmit(event) {
         fetch("http://127.0.0.1:8000/api/login", {
             method: 'POST',
@@ -63,6 +65,7 @@ class LoginForm extends Component {
             <form onSubmit={this.handleSubmit}>
                 <TextField value={this.state.loginName} onChange={this.handleChangeEmail} variant="outlined" label="E-mail"/>
                 <TextField value={this.state.Password} onChange={this.handleChangePassword} variant="outlined" label="Password" type="password"/>
+                <TextField value={this.state.Symbol} onChange={this.handleChangeSymbol} variant="outlined" label="Symbol"/>
                 <Button type="submit" variant="contained" color="primary" size="large">Wyślij</Button>
             </form>
         );

frontend/tsconfig.json

@@ -0,0 +1,13 @@
+{
+    "compilerOptions": {
+      "outDir": "./dist/",
+      "sourceMap": true,
+      "noImplicitAny": false,
+      "module": "es6",
+      "target": "es5",
+      "jsx": "react",
+      "moduleResolution": "node",
+      "allowJs": true,
+      "allowSyntheticDefaultImports": true
+    }
+}

frontend/webpack.config.js

@@ -5,19 +5,21 @@ module.exports = {
         login : "./src/login.js",
         content : "./src/content.js"
      },
-    output: {
-      filename : "[name].js",
-        path : path.resolve(__dirname, "./static/frontend")
-    },
-    module: {
+     module: {
         rules: [
-            {
-                test: /\.js$/,
-                exclude: /node_modules/,
-                use: {
-                    loader: "babel-loader"
-                }
-            }
-        ]
-    }
-};
+          {
+            //"allowJs": true,
+            test: /\.tsx?$/,
+            use: 'ts-loader',
+            exclude: /node_modules/,
+          },
+        ],
+      },
+      resolve: {
+        extensions: [ '.tsx' ,'.jsx', '.ts', '.js' ],
+      },
+      output: {
+        filename: '[name].js',
+        path: path.resolve(__dirname, "./static/frontend"),
+      },
+    };