add UI components for adding data and managing local state

client/src/actions/appActions.js

@@ -54,7 +54,7 @@ export const registerUser = (username, password, onSuccess, onError) => dispatch
     service.register(username, password, scb, ecb);
 };
 
-export const getIdentity = () => dispatch => {
+export const getIdentity = (onSuccess, onError) => dispatch => {
     const service = new ApiService();
     const scb = (data) => {
         if (data.id) {
@@ -63,8 +63,11 @@ export const getIdentity = () => dispatch => {
                 data: data
             });
         }
+        if (onSuccess) onSuccess();
     };
-    const ecb = (error) => { };
+    const ecb = (error) => {
+        if (onError) onError(error);
+     };
 
     service.identity(scb, ecb);
 };

client/src/actions/gameActions.js

@@ -0,0 +1,19 @@
+import ApiGameService from '../services/ApiGameService';
+import {
+  PUBLIC_STATE_CREATED
+} from './types';
+
+export const createPublicState = (requestData, onSuccess, onError) => dispatch => {
+  const service = new ApiGameService();
+  const scb = (data) => {
+      dispatch({
+          type: PUBLIC_STATE_CREATED,
+          data: data
+      });
+      if (onSuccess) onSuccess(data);
+  };
+  const ecb = (error) => {
+      if (onError) onError(error);
+  };
+  service.createPublicState(requestData, scb, ecb);
+};

client/src/actions/types.js

@@ -3,3 +3,5 @@ export const USER_LOGGED_OUT = 'USER_LOGGED_OUT';
 export const USER_REGISTERED = 'USER_REGISTERED';
 export const QUESTIONS_LOADED = 'QUESTIONS_LOADED';
 export const QUESTIONS_LOAD_ERROR = 'QUESTIONS_LOADED';
+
+export const PUBLIC_STATE_CREATED = 'PUBLIC_STATE_CREATED';

client/src/components/state/CreatePublicState/CreatePublicState.js

@@ -0,0 +1,108 @@
+import React, { Component } from 'react';
+import { Form, Input, Button, Typography } from 'antd';
+
+const layout = {
+  labelCol: {
+    span: 8,
+  },
+  wrapperCol: {
+    span: 16,
+  },
+};
+const tailLayout = {
+  wrapperCol: {
+    offset: 8,
+    span: 16,
+  },
+};
+
+class CreatePublicState extends Component {
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      createErrorMessage: undefined
+    };
+  };
+
+  onFinish = values => {
+    // this.props.registerUser(values.username, values.password, (user) => {
+    //   this.setState({
+    //     registerErrorMessage: undefined
+    //   });
+    // }, (error) => {
+    //   this.setState({
+    //     registerErrorMessage: error.message
+    //   });
+    // });
+  };
+
+  onFinishFailed = errorInfo => { };
+
+  render() {
+
+    let errorMessageStyle = { display: 'none' };
+    if (this.state.createErrorMessage) {
+      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!',
+              },
+            ]}
+          >
+            <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 {...tailLayout}>
+            <Button type="primary" htmlType="submit">
+              Submit
+        </Button>
+          </Form.Item>
+        </Form>
+      </div >
+    )
+  }
+};
+
+export default CreatePublicState;

client/src/components/state/index.js

@@ -0,0 +1,5 @@
+import CreatePublicState from './CreatePublicState/CreatePublicState';
+
+export {
+  CreatePublicState
+};

client/src/pages/DashboardPage/DashboardPage.js

@@ -1,11 +1,15 @@
 import React, { Component } from 'react';
 
+import { CreatePublicState } from '../../components/state';
+
 class DashboardPage extends Component {
 
   render() {
     return (
       <div>
         <h1>Dashboard</h1>
+        <hr />
+        <CreatePublicState />
       </div>
     )
   }

client/src/reducers/stateData.js

@@ -0,0 +1,22 @@
+import {
+  PUBLIC_STATE_CREATED
+} from '../actions/types';
+
+const initialState = {
+  publicState: undefined,
+  privateStates: []
+};
+
+export default function (state = initialState, action) {
+
+  switch (action.type) {
+    case PUBLIC_STATE_CREATED: {
+      return {
+        ...state,
+        data: action.data
+      };
+    }
+    default:
+      return state;
+  }
+};

client/src/router/AppRouter.js

@@ -25,7 +25,15 @@ const { Content } = Layout;
 // screen if you're 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);
 
@@ -51,39 +59,60 @@ export const PrivateRoute = ({ children, ...rest }) => {
 
 class AppRouter extends Component {
 
+  constructor(props) {
+    super(props);
+    this.state = {
+      identityChecked: false
+    }
+  }
+
   componentDidMount = () => {
-    this.props.getIdentity();
+    const scb = () => {
+      this.setState({
+        identityChecked: true
+      })
+    };
+    this.props.getIdentity(scb);
   };
 
   render() {
-    return (
-      <Router>
-        <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>
-              </Switch>
-            </div>
-          </Content>
-        </Layout>
-      </Router>
-    )
+
+    if (this.state.identityChecked) {
+      console.log('user: ' + this.props.user);
+      return (
+        <Router>
+          <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>
+                </Switch>
+              </div>
+            </Content>
+          </Layout>
+        </Router>
+      )
+    } else {
+      return (
+        <h2 style={{textAlign: 'center'}}>loading application...</h2>
+      )
+    }
   };
 };
 

client/src/services/ApiGameService.js

@@ -0,0 +1,13 @@
+import ApiService from './ApiService';
+
+class ApiGameService {
+  constructor() {
+    this.service = new ApiService();
+  };
+
+  createPublicState = (data, onSuccess, onError) => {
+    this.service._post('/api/state', data, onSuccess, onError);
+  };
+};
+
+export default ApiGameService;