diff --git a/frontend/src/App.js b/frontend/src/App.js
index 0649a43..bc17e46 100644
--- a/frontend/src/App.js
+++ b/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) {
- super(props)
- this.handleLogin = this.handleLogin.bind(this);
- this.onLogout = this.onLogout.bind(this);
- this.state = {
- user: null,
- token: null,
- gamenights: null
- };
- }
+ const [user, setUser] = useState(null);
+ const [token, setToken] = useState(null);
+ const [gamenights, setGamenights] = useState([]);
+ const [flashData, setFlashData] = useState({});
- componentDidUpdate(prevProps, prevState) {
- 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 (
-
-
-
- );
- } else {
- return (
-
-
-
-
- );
- }
- }
-
- onLogout() {
- this.setState((state, props) => ({
- user: null,
- token: null,
- flash_data: null
- }));
- }
-
- handleLogin(input) {
+ const 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) => ({
- token: data.jwt
- }));
+ setToken(data.jwt);
} else {
- this.setState((state, props) => ({
- flash_data: {
+ setFlashData({
+ 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 (
+
+
+
+ );
+ } else {
+ return (
+
+
+
+
+ );
}
}
diff --git a/frontend/src/components/Gamenights.jsx b/frontend/src/components/Gamenights.jsx
index d80f491..2e47119 100644
--- a/frontend/src/components/Gamenights.jsx
+++ b/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 =>
+ ({g.name})
+ );
- render() {
- let gamenights = this.props.gamenights.map(g =>
- ({g.name})
- );
- return (
-
- );
- }
+ return (
+
+ );
}
+
+export default Gamenights
diff --git a/frontend/src/components/Login.jsx b/frontend/src/components/Login.jsx
index d6ee240..c492412 100644
--- a/frontend/src/components/Login.jsx
+++ b/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 (
-
-
-
- );
+ 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 (
+
+
+
+ );
}
+
+export default Login
diff --git a/frontend/src/components/MenuBar.jsx b/frontend/src/components/MenuBar.jsx
index 0893a93..996f6da 100644
--- a/frontend/src/components/MenuBar.jsx
+++ b/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 (
-
- );
- }
+function MenuBar(props) {
+ return (
+
+ );
}
+
+export default MenuBar;