From 74e6f99e6369dc2a7f480ff20ef57cfb640b4fed Mon Sep 17 00:00:00 2001 From: Markus Schubert Date: Wed, 25 Mar 2020 19:28:35 +0100 Subject: [PATCH] add UI components for adding data and managing local state --- client/src/actions/appActions.js | 7 +- client/src/actions/gameActions.js | 19 +++ client/src/actions/types.js | 2 + .../CreatePublicState/CreatePublicState.js | 108 ++++++++++++++++++ client/src/components/state/index.js | 5 + .../src/pages/DashboardPage/DashboardPage.js | 4 + client/src/reducers/stateData.js | 22 ++++ client/src/router/AppRouter.js | 87 +++++++++----- client/src/services/ApiGameService.js | 13 +++ 9 files changed, 236 insertions(+), 31 deletions(-) create mode 100644 client/src/actions/gameActions.js create mode 100644 client/src/components/state/CreatePublicState/CreatePublicState.js create mode 100644 client/src/components/state/index.js create mode 100644 client/src/reducers/stateData.js create mode 100644 client/src/services/ApiGameService.js diff --git a/client/src/actions/appActions.js b/client/src/actions/appActions.js index 0459ae0..547447f 100644 --- a/client/src/actions/appActions.js +++ b/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); }; diff --git a/client/src/actions/gameActions.js b/client/src/actions/gameActions.js new file mode 100644 index 0000000..29d08a5 --- /dev/null +++ b/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); +}; diff --git a/client/src/actions/types.js b/client/src/actions/types.js index 4d01026..d85d8ea 100644 --- a/client/src/actions/types.js +++ b/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'; \ No newline at end of file diff --git a/client/src/components/state/CreatePublicState/CreatePublicState.js b/client/src/components/state/CreatePublicState/CreatePublicState.js new file mode 100644 index 0000000..d829970 --- /dev/null +++ b/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 ( +
+

Create Public State

+
+ + + + + + + + + + + {this.state.createErrorMessage} + + + + + + +
+
+ ) + } +}; + +export default CreatePublicState; diff --git a/client/src/components/state/index.js b/client/src/components/state/index.js new file mode 100644 index 0000000..561257b --- /dev/null +++ b/client/src/components/state/index.js @@ -0,0 +1,5 @@ +import CreatePublicState from './CreatePublicState/CreatePublicState'; + +export { + CreatePublicState +}; diff --git a/client/src/pages/DashboardPage/DashboardPage.js b/client/src/pages/DashboardPage/DashboardPage.js index 96d1e3b..d91d619 100644 --- a/client/src/pages/DashboardPage/DashboardPage.js +++ b/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 (

Dashboard

+
+
) } diff --git a/client/src/reducers/stateData.js b/client/src/reducers/stateData.js new file mode 100644 index 0000000..a6298dc --- /dev/null +++ b/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; + } +}; diff --git a/client/src/router/AppRouter.js b/client/src/router/AppRouter.js index 59dc779..38d5f6a 100644 --- a/client/src/router/AppRouter.js +++ b/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 ( - - - - -
- - - - - - - - - - - - - - - - - -
- - - - ) + + if (this.state.identityChecked) { + console.log('user: ' + this.props.user); + return ( + + + + + +
+ + + + + + + + + + + + + + + + + +
+ + + + ) + } else { + return ( +

loading application...

+ ) + } }; }; diff --git a/client/src/services/ApiGameService.js b/client/src/services/ApiGameService.js new file mode 100644 index 0000000..d3358fa --- /dev/null +++ b/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; \ No newline at end of file