From fc3852b3cb572131caf4eb718293cba14fcffe60 Mon Sep 17 00:00:00 2001
From: Markus Schubert <markus@toto.io>
Date: Wed, 25 Mar 2020 23:40:23 +0100
Subject: [PATCH] cleanup

---
 app/controllers/PublicStateController.js      |   1 +
 app/routes/api.js                             |   4 +-
 client/src/components/AppHeader/AppHeader.js  |  12 +-
 .../CreatePublicState/CreatePublicState.js    | 154 +++++++++++-------
 .../PublicStateOverviewPage.js                |  29 ++++
 .../SplashScreenPage/SplashScreenPage.js      |   2 -
 client/src/pages/index.js                     |   2 +
 .../reducers/{stateData.js => gameData.js}    |   0
 client/src/reducers/index.js                  |   4 +-
 client/src/router/AppRouter.js                |  39 +----
 10 files changed, 147 insertions(+), 100 deletions(-)
 create mode 100644 client/src/pages/PublicStateOverviewPage/PublicStateOverviewPage.js
 rename client/src/reducers/{stateData.js => gameData.js} (100%)

diff --git a/app/controllers/PublicStateController.js b/app/controllers/PublicStateController.js
index beb21c5..d6f503f 100644
--- a/app/controllers/PublicStateController.js
+++ b/app/controllers/PublicStateController.js
@@ -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({
diff --git a/app/routes/api.js b/app/routes/api.js
index a700094..c5d89bc 100644
--- a/app/routes/api.js
+++ b/app/routes/api.js
@@ -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.' });
     }
diff --git a/client/src/components/AppHeader/AppHeader.js b/client/src/components/AppHeader/AppHeader.js
index 7e22dd2..2ca198c 100644
--- a/client/src/components/AppHeader/AppHeader.js
+++ b/client/src/components/AppHeader/AppHeader.js
@@ -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>
diff --git a/client/src/components/state/CreatePublicState/CreatePublicState.js b/client/src/components/state/CreatePublicState/CreatePublicState.js
index d829970..5f82bd6 100644
--- a/client/src/components/state/CreatePublicState/CreatePublicState.js
+++ b/client/src/components/state/CreatePublicState/CreatePublicState.js
@@ -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);
diff --git a/client/src/pages/PublicStateOverviewPage/PublicStateOverviewPage.js b/client/src/pages/PublicStateOverviewPage/PublicStateOverviewPage.js
new file mode 100644
index 0000000..1a4efc0
--- /dev/null
+++ b/client/src/pages/PublicStateOverviewPage/PublicStateOverviewPage.js
@@ -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);
diff --git a/client/src/pages/SplashScreenPage/SplashScreenPage.js b/client/src/pages/SplashScreenPage/SplashScreenPage.js
index 99e0ce5..423b4f8 100644
--- a/client/src/pages/SplashScreenPage/SplashScreenPage.js
+++ b/client/src/pages/SplashScreenPage/SplashScreenPage.js
@@ -4,12 +4,10 @@ class SplashScreenPage extends Component {
 
   render() {
     return (
-
       <div>
         <h1>
           loading application...
         </h1>
-        <img src='images/logo.png' alt='' />
       </div>
     )
   };
diff --git a/client/src/pages/index.js b/client/src/pages/index.js
index 37c8442..b6f5a43 100644
--- a/client/src/pages/index.js
+++ b/client/src/pages/index.js
@@ -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
diff --git a/client/src/reducers/stateData.js b/client/src/reducers/gameData.js
similarity index 100%
rename from client/src/reducers/stateData.js
rename to client/src/reducers/gameData.js
diff --git a/client/src/reducers/index.js b/client/src/reducers/index.js
index d9bdac4..068f0dd 100644
--- a/client/src/reducers/index.js
+++ b/client/src/reducers/index.js
@@ -1,7 +1,9 @@
 import { combineReducers } from 'redux';
 import appData from './appData';
+import gameData from './gameData'
 
 
 export default combineReducers({
-  appData
+  appData,
+  gameData
 });
diff --git a/client/src/router/AppRouter.js b/client/src/router/AppRouter.js
index 38d5f6a..91d90bb 100644
--- a/client/src/router/AppRouter.js
+++ b/client/src/router/AppRouter.js
@@ -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 />
       )
     }
   };