move to function based react components

This commit is contained in:
Dennis Brentjes 2022-04-29 20:21:51 +02:00
parent 56d0889963
commit bf796201bf
4 changed files with 113 additions and 160 deletions

View File

@ -1,76 +1,18 @@
import logo from './logo.svg'; import logo from './logo.svg';
import './App.css'; import './App.css';
import React from 'react'; import React, { useState, useEffect } from 'react';
import MenuBar from './components/MenuBar'; import MenuBar from './components/MenuBar';
import Login from './components/Login'; import Login from './components/Login';
import Gamenights from "./components/Gamenights" 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 = { const requestOptions = {
method: 'POST', method: 'POST',
headers: { 'Content-Type': 'application/json' }, headers: { 'Content-Type': 'application/json' },
@ -80,20 +22,56 @@ class App extends React.Component {
.then(response => response.json()) .then(response => response.json())
.then(data => { .then(data => {
if(data.result === "Ok") { if(data.result === "Ok") {
this.setState((state, props) => ({ setToken(data.jwt);
token: data.jwt
}));
} else { } else {
this.setState((state, props) => ({ setFlashData({
flash_data: {
type: "Error", type: "Error",
message: data.message message: data.message
}
}));
}
console.log(this.state)
}); });
} }
});
};
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
});
}
});
}
}, [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>
);
}
} }
export default App; export default App;

View File

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

View File

@ -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: "", const handlePasswordChange = (event) => {
}; setPassword(event.target.value);
}
this.handleUsernameChange = this.handleUsernameChange.bind(this);
this.handlePasswordChange = this.handlePasswordChange.bind(this); const handleLogin = (event) => {
this.handleLogin = this.handleLogin.bind(this); props.onChange({ username: this.state.username, password: this.state.password });
event.preventDefault();
} }
render() {
return ( return (
<div className="Login-Component"> <div className="Login-Component">
<form onSubmit={this.handleLogin}> <form onSubmit={handleLogin}>
<fieldset> <fieldset>
<legend>Login</legend> <legend>Login</legend>
<label for="username">Username:</label> <label for="username">Username:</label>
<input id="username" name="username" type="text" <input id="username" name="username" type="text"
value={this.state.username} value={username}
onChange={this.handleUsernameChange} /> onChange={handleUsernameChange} />
<label for="password">Password:</label> <label for="password">Password:</label>
<input id="password" name="password" type="password" <input id="password" name="password" type="password"
value={this.state.password} value={password}
onChange={this.handlePasswordChange} /> onChange={handlePasswordChange} />
<input type="submit" value="Submit" /> <input type="submit" value="Submit" />
</fieldset> </fieldset>
</form> </form>
</div> </div>
); );
}
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 });
event.preventDefault();
}
} }
export default Login

View File

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