This commit is contained in:
Markus Schubert 2020-03-25 23:40:23 +01:00
parent 74e6f99e63
commit fc3852b3cb
10 changed files with 147 additions and 100 deletions

View file

@ -23,6 +23,7 @@ class PublicStateController {
};
collection.insertOne(pubState, (insertErr, insertRes) => {
if (insertErr === null) {
console.log('call onSuccess with data: ' + JSON.stringify(pubState));
onSuccess(pubState);
} else {
onError({

View file

@ -21,12 +21,12 @@ router.post('/state', (req, res, next) => {
};
let ecb = (error) => {
res.status(400).send(err);
res.status(400).send(error);
};
authenticator.getAuthenticatedUser(req, (user) => {
if (user) {
ctrl.create(req.body, scb, ecb);
ctrl.create(req.body, user, scb, ecb);
} else {
ecb({ code: 'auth error', message: 'user not logged in.' });
}

View file

@ -37,14 +37,14 @@ class AppHeader extends Component {
constructor(props) {
super(props);
this.state = {
logoutSuccess: false
logoutSuccess: false,
redirectToStart: false
}
}
handleClick = e => {
switch (e.key) {
case 'logout':
console.log('logout clicked');
this.props.logoutUser(() => {
this.setState({
logoutSuccess: true
@ -53,6 +53,11 @@ class AppHeader extends Component {
console.log('error logging out: ' + error);
});
break;
case 'start':
this.setState({
redirectToStart: true
});
break;
default:
break;
}
@ -67,6 +72,7 @@ class AppHeader extends Component {
);
const redirectAfterLogout = this.state.logoutSuccess ? <Redirect to='/login' /> : <div></div>
const redirectToStart = this.state.redirectToStart ? <Redirect to='/start' /> : <div></div>
if (this.props.user) {
userInfo = (
@ -79,6 +85,7 @@ class AppHeader extends Component {
<span>{this.props.user.username}</span>
</span>
}>
<Menu.Item key="start">start</Menu.Item>
<Menu.Item key="logout">logout</Menu.Item>
</SubMenu>
</Menu>
@ -88,6 +95,7 @@ class AppHeader extends Component {
return (
<Header style={{ position: 'fixed', zIndex: 1, width: '100%', background: '#3399cc' }}>
{redirectAfterLogout}
{redirectToStart}
<div style={styles.logo}>
<img style={styles.logoImage} src='images/logo.png' alt='' />
<Link style={styles.logo} to="/">Die Gesellschaft der Gegenwart</Link>

View file

@ -1,4 +1,8 @@
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import { Redirect } from 'react-router-dom';
import { createPublicState } from '../../../actions/gameActions';
import { Form, Input, Button, Typography } from 'antd';
const layout = {
@ -21,20 +25,33 @@ class CreatePublicState extends Component {
constructor(props) {
super(props);
this.state = {
createErrorMessage: undefined
createErrorMessage: undefined,
stateCreated: undefined
};
};
onFinish = values => {
// this.props.registerUser(values.username, values.password, (user) => {
// this.setState({
// registerErrorMessage: undefined
// });
// }, (error) => {
// this.setState({
// registerErrorMessage: error.message
// });
// });
let scb = (state) => {
console.log('state')
this.setState({
createErrorMessage: undefined,
stateCreated: state
});
};
let ecb = (error) => {
this.setState({
createErrorMessage: error.message
});
};
let requestData = {
name: values.name,
title: values.title
};
this.props.createPublicState(requestData, scb, ecb);
};
onFinishFailed = errorInfo => { };
@ -46,63 +63,76 @@ class CreatePublicState extends Component {
errorMessageStyle = {};
}
return (
<div>
<h2 style={{ textAlign: 'center' }}>Create Public State</h2>
<Form
{...layout}
name="basic"
initialValues={{
remember: true,
}}
onFinish={this.onFinish}
onFinishFailed={this.onFinishFailed}
>
<Form.Item
label="Name"
name="name"
rules={[
{
required: true,
message: 'Please input the name of the Public State!',
},
]}
if (this.state.stateCreated) {
console.log('redirect to state/' + this.state.stateCreated.name);
return (
<Redirect to={'/state/' + this.state.stateCreated.name} />
)
} else {
return (
<div>
<h2 style={{ textAlign: 'center' }}>Create Public State</h2>
<Form
{...layout}
name="basic"
initialValues={{
remember: true,
}}
onFinish={this.onFinish}
onFinishFailed={this.onFinishFailed}
>
<Input />
</Form.Item>
<Form.Item
label="Name"
name="name"
rules={[
{
required: true,
message: 'Please input the name of the Public State!',
},
]}
>
<Input />
</Form.Item>
<Form.Item
label="Title"
name="title"
rules={[
{
required: false,
message: 'Please input the title of the public state',
},
]}
>
<Input />
</Form.Item>
<Form.Item
label="Title"
name="title"
rules={[
{
required: false,
message: 'Please input the title of the public state',
},
]}
>
<Input />
</Form.Item>
<Form.Item
style={errorMessageStyle}
label=" "
colon={false}
name="error message">
<Typography.Text className="ant-form-text" type="danger">
{this.state.createErrorMessage}
</Typography.Text>
</Form.Item>
<Form.Item
style={errorMessageStyle}
label=" "
colon={false}
name="error message">
<Typography.Text className="ant-form-text" type="danger">
{this.state.createErrorMessage}
</Typography.Text>
</Form.Item>
<Form.Item {...tailLayout}>
<Button type="primary" htmlType="submit">
Submit
<Form.Item {...tailLayout}>
<Button type="primary" htmlType="submit">
Submit
</Button>
</Form.Item>
</Form>
</div >
)
</Form.Item>
</Form>
</div >
)
}
}
};
export default CreatePublicState;
CreatePublicState.propTypes = {
createPublicState: PropTypes.func.isRequired
};
const mapStateToProps = state => ({});
export default connect(mapStateToProps, { createPublicState })(CreatePublicState);

View file

@ -0,0 +1,29 @@
import React, { Component } from 'react';
import { withRouter } from 'react-router-dom';
class PublicStateOverviewPage extends Component {
constructor(props) {
super(props);
this.state = {
name: undefined
};
}
componentDidMount() {
const name = this.props.match.params.name;
this.setState({
name: name
});
};
render() {
return (
<div>
<h1>Public State Overview: <em>{this.state.name}</em></h1>
</div>
)
};
};
export default withRouter(PublicStateOverviewPage);

View file

@ -4,12 +4,10 @@ class SplashScreenPage extends Component {
render() {
return (
<div>
<h1>
loading application...
</h1>
<img src='images/logo.png' alt='' />
</div>
)
};

View file

@ -1,5 +1,6 @@
import DashboardPage from './DashboardPage/DashboardPage';
import LoginPage from './LoginPage/LoginPage';
import PublicStateOverviewPage from './PublicStateOverviewPage/PublicStateOverviewPage';
import RegisterPage from './RegisterPage/RegisterPage';
import SplashScreenPage from './SplashScreenPage/SplashScreenPage';
import WelcomePage from './WelcomePage/WelcomePage';
@ -7,6 +8,7 @@ import WelcomePage from './WelcomePage/WelcomePage';
export {
DashboardPage,
LoginPage,
PublicStateOverviewPage,
RegisterPage,
SplashScreenPage,
WelcomePage

View file

@ -1,7 +1,9 @@
import { combineReducers } from 'redux';
import appData from './appData';
import gameData from './gameData'
export default combineReducers({
appData
appData,
gameData
});

View file

@ -12,6 +12,7 @@ import { Layout } from 'antd';
import {
DashboardPage,
LoginPage,
PublicStateOverviewPage,
RegisterPage,
SplashScreenPage,
WelcomePage
@ -22,21 +23,8 @@ import 'antd/dist/antd.css';
const { Content } = Layout;
// A wrapper for <Route> that redirects to the login
// screen if you're not yet authenticated.
// screen if user is not yet authenticated.
export const PrivateRoute = ({ children, ...rest }) => {
console.log('children: ' + children);
const keys = Object.keys(children);
console.log('children.keys: ' + keys);
console.log('children.props: ' + keys.props);
const childrenPropKeys = Object.keys(children.props);
console.log('children.props.keys: ' + childrenPropKeys);
console.log('rest: ' + rest);
const restKeys = Object.keys(rest);
console.log('rest.keys: ' + restKeys);
console.log('rest.exact: ' + rest.exact);
console.log('rest.user: ' + rest.user);
return (
<Route
{...rest}
@ -84,24 +72,13 @@ class AppRouter extends Component {
<Layout style={{ height: "100%" }}>
<AppHeader />
<Content style={{ padding: '0 50px', marginTop: 64 }}>
<div style={{ background: '#fff', padding: 24 }}>
<Switch>
<Route exact path='/'>
<WelcomePage />
</Route>
<PrivateRoute exact path='/start' user={this.props.user}>
<DashboardPage />
</PrivateRoute>
<Route exact path='/foo'>
<SplashScreenPage />
</Route>
<Route exact path='/login'>
<LoginPage />
</Route>
<Route exact path='/register'>
<RegisterPage />
</Route>
<Route exact path='/'><WelcomePage /></Route>
<Route exact path='/login'><LoginPage /></Route>
<Route exact path='/register'><RegisterPage /></Route>
<PrivateRoute exact path='/start' user={this.props.user}><DashboardPage /></PrivateRoute>
<PrivateRoute exact path='/state/:name' user={this.props.user}><PublicStateOverviewPage /></PrivateRoute>
</Switch>
</div>
</Content>
@ -110,7 +87,7 @@ class AppRouter extends Component {
)
} else {
return (
<h2 style={{textAlign: 'center'}}>loading application...</h2>
<SplashScreenPage />
)
}
};