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) => { collection.insertOne(pubState, (insertErr, insertRes) => {
if (insertErr === null) { if (insertErr === null) {
console.log('call onSuccess with data: ' + JSON.stringify(pubState));
onSuccess(pubState); onSuccess(pubState);
} else { } else {
onError({ onError({

View file

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

View file

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

View file

@ -1,4 +1,8 @@
import React, { Component } from 'react'; 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'; import { Form, Input, Button, Typography } from 'antd';
const layout = { const layout = {
@ -21,20 +25,33 @@ class CreatePublicState extends Component {
constructor(props) { constructor(props) {
super(props); super(props);
this.state = { this.state = {
createErrorMessage: undefined createErrorMessage: undefined,
stateCreated: undefined
}; };
}; };
onFinish = values => { onFinish = values => {
// this.props.registerUser(values.username, values.password, (user) => {
// this.setState({ let scb = (state) => {
// registerErrorMessage: undefined console.log('state')
// }); this.setState({
// }, (error) => { createErrorMessage: undefined,
// this.setState({ stateCreated: state
// registerErrorMessage: error.message });
// }); };
// });
let ecb = (error) => {
this.setState({
createErrorMessage: error.message
});
};
let requestData = {
name: values.name,
title: values.title
};
this.props.createPublicState(requestData, scb, ecb);
}; };
onFinishFailed = errorInfo => { }; onFinishFailed = errorInfo => { };
@ -46,6 +63,12 @@ class CreatePublicState extends Component {
errorMessageStyle = {}; errorMessageStyle = {};
} }
if (this.state.stateCreated) {
console.log('redirect to state/' + this.state.stateCreated.name);
return (
<Redirect to={'/state/' + this.state.stateCreated.name} />
)
} else {
return ( return (
<div> <div>
<h2 style={{ textAlign: 'center' }}>Create Public State</h2> <h2 style={{ textAlign: 'center' }}>Create Public State</h2>
@ -103,6 +126,13 @@ class CreatePublicState extends Component {
</div > </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() { render() {
return ( return (
<div> <div>
<h1> <h1>
loading application... loading application...
</h1> </h1>
<img src='images/logo.png' alt='' />
</div> </div>
) )
}; };

View file

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

View file

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

View file

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