move to function based react components

frontend/src/components/Gamenights.jsx

@@ -1,21 +1,16 @@
 import React from 'react';
 
-export default class Gamenights extends React.Component {
+function Gamenights(props) {
 
-  constructor(props) {
-    super(props);
-    this.state = {
-    };
-  }
+  let gamenights = props.gamenights.map(g => 
+    (<li>{g.name}</li>)
+  );
 
-  render() {
-    let gamenights = this.props.gamenights.map(g => 
-      (<li>{g.name}</li>)
-    );
-    return (
-      <ul>
-        {gamenights}
-      </ul>
-    );
-  }
+  return (
+    <ul>
+      {gamenights}
+    </ul>
+  );
 }
+
+export default Gamenights

frontend/src/components/Login.jsx

@@ -1,56 +1,42 @@
-import React from 'react';
+import React, { useState } from 'react';
 
-export default class Login extends React.Component {
+function Login(props) {
+  const [username, setUsername] = useState("");
+  const [password, setPassword] = useState("");
 
-  constructor(props) {
-    super(props);
-    this.state = {
-      username: "",
-      password: "",
-    };
-
-    this.handleUsernameChange = this.handleUsernameChange.bind(this);
-    this.handlePasswordChange = this.handlePasswordChange.bind(this);
-    this.handleLogin = this.handleLogin.bind(this);
+  const handleUsernameChange = (event) => {
+    setUsername(event.target.value);
   }
 
-  render() {
-    return (
-      <div className="Login-Component">
-        <form onSubmit={this.handleLogin}>
-          <fieldset>
-            <legend>Login</legend>
-
-            <label for="username">Username:</label>
-            <input id="username" name="username" type="text"
-              value={this.state.username}
-              onChange={this.handleUsernameChange} />
-            <label for="password">Password:</label>
-            <input id="password" name="password" type="password"
-              value={this.state.password}
-              onChange={this.handlePasswordChange} />
-
-            <input type="submit" value="Submit" />
-          </fieldset>
-        </form>
-      </div>
-    );
+  const handlePasswordChange = (event) => {
+    setPassword(event.target.value);
   }
 
-  handleUsernameChange(event) {
-    this.setState((state, props) => ({
-      username: event.target.value
-    }));
-  }
-
-  handlePasswordChange(event) {
-    this.setState((state, props) => ({
-      password: event.target.value
-    }));
-  }
-
-  handleLogin(event) {
-    this.props.onChange({ username: this.state.username, password: this.state.password });
+  const handleLogin = (event) => {
+    props.onChange({ username: this.state.username, password: this.state.password });
     event.preventDefault();
   }
+
+  return (
+    <div className="Login-Component">
+      <form onSubmit={handleLogin}>
+        <fieldset>
+          <legend>Login</legend>
+
+          <label for="username">Username:</label>
+          <input id="username" name="username" type="text"
+            value={username}
+            onChange={handleUsernameChange} />
+          <label for="password">Password:</label>
+          <input id="password" name="password" type="password"
+            value={password}
+            onChange={handlePasswordChange} />
+
+          <input type="submit" value="Submit" />
+        </fieldset>
+      </form>
+    </div>
+  );
 }
+
+export default Login

frontend/src/components/MenuBar.jsx

@@ -1,25 +1,19 @@
 import React from 'react';
 
-export default class MenuBar extends React.Component {
-
-  constructor(props) {
-    super(props);
-    this.state = {};
-  }
-
-  render() {
-    return (
-      <ul>
-        <li>
-          <a>Gamenight</a>
-        </li>
-        <li>
-          <a>User</a>
-        </li>
-        <li>
-          <button onClick={this.props.onLogout}>Logout</button>
-        </li>
-      </ul>
-    );
-  }
+function MenuBar(props) {
+  return (
+    <ul>
+      <li>
+        <a>Gamenight</a>
+      </li>
+      <li>
+        <a>User</a>
+      </li>
+      <li>
+        <button onClick={props.onLogout}>Logout</button>
+      </li>
+    </ul>
+  );
 }
+
+export default MenuBar;