move to function based react components

frontend/src/App.js

@@ -1,76 +1,18 @@
 import logo from './logo.svg';
 import './App.css';
-import React from 'react';
+import React, { useState, useEffect } from 'react';
 import MenuBar from './components/MenuBar';
 import Login from './components/Login';
 import Gamenights from "./components/Gamenights"
 
-class App extends React.Component {
+function App() {
 
-  constructor(props) {
+  const [user, setUser] = useState(null);
-    super(props)
+  const [token, setToken] = useState(null);
-    this.handleLogin = this.handleLogin.bind(this);
+  const [gamenights, setGamenights] = useState([]);
-    this.onLogout = this.onLogout.bind(this);
+  const [flashData, setFlashData] = useState({});
-    this.state = {
-      user: null,
-      token: null,
-      gamenights: null
-    };
-  }
 
-  componentDidUpdate(prevProps, prevState) {
+  const handleLogin = (input) => {
-    console.log("component update?")
-    if (prevState.token !== this.state.token) {
-      const requestOptions = {
-        method: 'GET',
-        headers: { 'Authorization': `bearer: ${this.state.token}` },
-      };
-      fetch('api/gamenights', requestOptions)
-        .then(response => response.json())
-        .then(data => {
-          if(data.result === "Ok") {
-            this.setState((state, props) => ({
-              gamenights: data.gamenights
-            }));
-          } else {
-            this.setState((state, props) => ({
-              flash_data: {
-                type: "Error",
-                message: data.message
-              }
-            }));
-          }
-          console.log(this.state)
-        });
-    }
-}
-
-  render() {
-    if(this.state.token === null) {
-      return (
-        <div className="App">
-          <Login onChange={this.handleLogin}/>
-        </div>
-      );
-    } else {
-      return (
-        <div className="App">
-          <MenuBar user={this.state.user} onLogout={this.onLogout}/>
-          <Gamenights />
-        </div>
-      );
-    }
-  }
-
-  onLogout() {
-    this.setState((state, props) => ({
-      user: null,
-      token: null,
-      flash_data: null
-    }));
-  }
-
-  handleLogin(input) {
     const requestOptions = {
       method: 'POST',
       headers: { 'Content-Type': 'application/json' },
@@ -80,19 +22,55 @@ class App extends React.Component {
       .then(response => response.json())
       .then(data => {
         if(data.result === "Ok") {
-          this.setState((state, props) => ({
+          setToken(data.jwt);
-            token: data.jwt
-          }));
         } else {
-          this.setState((state, props) => ({
+          setFlashData({
-            flash_data: {
+            type: "Error",
+            message: data.message
+          });
+        }
+      });
+  };
+
+  const onLogout = () => {
+    setUser(null);
+    setToken(null);
+  }
+
+  useEffect(() => {
+    if (token !== null) {
+      const requestOptions = {
+        method: 'GET',
+        headers: { 'Authorization': `Bearer ${token}` },
+      };
+      fetch('api/gamenights', requestOptions)
+        .then(response => response.json())
+        .then(data => {
+          if(data.result === "Ok") {
+            setGamenights(data.gamenights)
+          } else {
+            setFlashData({
               type: "Error",
               message: data.message
-            }
+            });
-          }));
+          }
-        }
+        });
-        console.log(this.state)
+    }
-      });
+  }, [token]);
+
+  if(token === null) {
+    return (
+      <div className="App">
+        <Login onChange={handleLogin}/>
+      </div>
+    );
+  } else {
+    return (
+      <div className="App">
+        <MenuBar user={user} onLogout={onLogout} />
+        <Gamenights gamenights={gamenights} />
+      </div>
+    );
   }
 }
 

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) {
+  let gamenights = props.gamenights.map(g => 
-    super(props);
+    (<li>{g.name}</li>)
-    this.state = {
+  );
-    };
-  }
 
-  render() {
+  return (
-    let gamenights = this.props.gamenights.map(g => 
+    <ul>
-      (<li>{g.name}</li>)
+      {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) {
+  const handleUsernameChange = (event) => {
-    super(props);
+    setUsername(event.target.value);
-    this.state = {
-      username: "",
-      password: "",
-    };
-
-    this.handleUsernameChange = this.handleUsernameChange.bind(this);
-    this.handlePasswordChange = this.handlePasswordChange.bind(this);
-    this.handleLogin = this.handleLogin.bind(this);
   }
 
-  render() {
+  const handlePasswordChange = (event) => {
-    return (
+    setPassword(event.target.value);
-      <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>
-    );
   }
 
-  handleUsernameChange(event) {
+  const handleLogin = (event) => {
-    this.setState((state, props) => ({
+    props.onChange({ username: this.state.username, password: this.state.password });
-      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 });
     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 {
+function MenuBar(props) {
-
+  return (
-  constructor(props) {
+    <ul>
-    super(props);
+      <li>
-    this.state = {};
+        <a>Gamenight</a>
-  }
+      </li>
-
+      <li>
-  render() {
+        <a>User</a>
-    return (
+      </li>
-      <ul>
+      <li>
-        <li>
+        <button onClick={props.onLogout}>Logout</button>
-          <a>Gamenight</a>
+      </li>
-        </li>
+    </ul>
-        <li>
+  );
-          <a>User</a>
-        </li>
-        <li>
-          <button onClick={this.props.onLogout}>Logout</button>
-        </li>
-      </ul>
-    );
-  }
 }
+
+export default MenuBar;