move to function based react components
This commit is contained in:
parent
56d0889963
commit
bf796201bf
|
|
@ -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 (
|
||||
<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 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 (
|
||||
<div className="App">
|
||||
<Login onChange={handleLogin}/>
|
||||
</div>
|
||||
);
|
||||
} else {
|
||||
return (
|
||||
<div className="App">
|
||||
<MenuBar user={user} onLogout={onLogout} />
|
||||
<Gamenights gamenights={gamenights} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
Loading…
Reference in New Issue