Lucus/gamenight
1
0
Fork 0
forked from Roflin/gamenight
Code Issues Pull Requests Projects Releases Wiki Activity

A start on a frontend application in React.

Browse Source
This commit is contained in:
Dennis Brentjes
2022-04-23 23:30:26 +02:00
parent d80f705b5d
commit 56d0889963
12 changed files with 1927 additions and 108 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1571
frontend/package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

9
frontend/package.json
View File

@@ -15,7 +15,11 @@
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
"eject": "react-scripts eject",
"watch": "npm-watch"
},
"watch": {
"build": "src/"
},
"eslintConfig": {
"extends": [
@@ -34,5 +38,8 @@
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"npm-watch": "^0.11.0"
}
}

2
frontend/public/index.html
View File

@@ -24,7 +24,7 @@
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
-->
<title>React App</title>
<title>It's gamenight</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>

13
frontend/src/App.css
View File

@@ -28,6 +28,19 @@
color: #61dafb;
}
fieldset label {
display: block;
text-align: left;
}
input {
display: block;
}
input[type=submit] {
margin:5px;
}
@keyframes App-logo-spin {
from {
transform: rotate(0deg);

112
frontend/src/App.js
View File

@@ -1,25 +1,99 @@
import logo from './logo.svg';
import './App.css';
import React from 'react';
import MenuBar from './components/MenuBar';
import Login from './components/Login';
import Gamenights from "./components/Gamenights"
function App() {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p>
Edit <code>src/App.js</code> and save to reload.
</p>
<a
className="App-link"
href="https://reactjs.org"
target="_blank"
rel="noopener noreferrer"
>
Learn React
</a>
</header>
</div>
);
class App extends React.Component {
constructor(props) {
super(props)
this.handleLogin = this.handleLogin.bind(this);
this.onLogout = this.onLogout.bind(this);
this.state = {
user: null,
token: null,
gamenights: null
};
}
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 requestOptions = {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(input)
};
fetch('api/login', requestOptions)
.then(response => response.json())
.then(data => {
if(data.result === "Ok") {
this.setState((state, props) => ({
token: data.jwt
}));
} else {
this.setState((state, props) => ({
flash_data: {
type: "Error",
message: data.message
}
}));
}
console.log(this.state)
});
}
}
export default App;

21
frontend/src/components/Gamenights.jsx Normal file
View File

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

56
frontend/src/components/Login.jsx Normal file
View File

@@ -0,0 +1,56 @@
import React from 'react';
export default class Login extends React.Component {
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);
}
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>
);
}
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();
}
}

25
frontend/src/components/MenuBar.jsx Normal file
View File

@@ -0,0 +1,25 @@
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>
);
}
}