diff --git a/src/actions/LoginActions.js b/src/actions/LoginActions.js new file mode 100644 index 0000000..ac082d7 --- /dev/null +++ b/src/actions/LoginActions.js @@ -0,0 +1,7 @@ +import { LOGIN_GET_STATUS } from "../actions/ActionTypes"; + +export default { + requestStatus: () => ({ + type: LOGIN_GET_STATUS, + }) +}; diff --git a/src/components/LoginStatusPane.js b/src/components/LoginStatusPane.js index a580d86..324474e 100644 --- a/src/components/LoginStatusPane.js +++ b/src/components/LoginStatusPane.js @@ -5,6 +5,7 @@ import ControlRequest from "../utils/ControlRequest"; import propTypeSymbol from "../utils/propTypeSymbol"; import { LOGIN_STATUS_UNKNOWN, + LOGIN_STATUS_GETTING, LOGIN_STATUS_PENDING, LOGIN_STATUS_SUCCESS, LOGIN_STATUS_FAILURE @@ -19,13 +20,24 @@ class LoginStatusPane extends React.Component } componentDidMount() { - this.props.socketSend(ControlRequest.loginStatus()); + const { status, socketSend } = this.props; + if (status == LOGIN_STATUS_UNKNOWN) { + this.props.socketSend(ControlRequest.loginStatus()); + } } render_unknown() { return (
- Fetching login status... + Login status: unknown +
+ ); + } + + render_getting() { + return ( +
+ Login status: fetching...
); } @@ -70,6 +82,8 @@ class LoginStatusPane extends React.Component switch (this.props.status) { case LOGIN_STATUS_UNKNOWN: return this.render_unknown(); + case LOGIN_STATUS_GETTING: + return this.render_getting(); case LOGIN_STATUS_PENDING: return this.render_pending(); case LOGIN_STATUS_SUCCESS: diff --git a/src/components/SolsticeApp.js b/src/components/SolsticeApp.js index 725b7bf..304b589 100644 --- a/src/components/SolsticeApp.js +++ b/src/components/SolsticeApp.js @@ -1,17 +1,19 @@ import React, {PropTypes} from "react"; +import { STATE_OPEN } from "../constants/socket"; +import { LOGIN_STATUS_SUCCESS } from "../constants/login"; + import ConnectForm from "./ConnectForm"; import Header from "./Header"; +import LoginStatusPane from "./LoginStatusPane"; -import RoomsPane from "../containers/RoomsPane"; import Footer from "../containers/Footer"; - -import { STATE_OPEN } from "../constants/socket"; +import RoomsPane from "../containers/RoomsPane"; const ID = "solstice-app"; const SolsticeApp = (props) => { - const { actions, socket } = props; + const { actions, login, socket } = props; if (socket.state !== STATE_OPEN ) { return (
@@ -19,6 +21,16 @@ const SolsticeApp = (props) => {
); } + + if (login.status !== LOGIN_STATUS_SUCCESS) { + return ( +
+ + +
+ ); + } + return (
@@ -32,6 +44,7 @@ const SolsticeApp = (props) => { SolsticeApp.propTypes = { actions: PropTypes.object.isRequired, + login: PropTypes.object.isRequired, socket: PropTypes.object.isRequired }; diff --git a/src/constants/ActionTypes.js b/src/constants/ActionTypes.js index b87281b..b19828d 100644 --- a/src/constants/ActionTypes.js +++ b/src/constants/ActionTypes.js @@ -7,6 +7,9 @@ export const SOCKET_SET_ERROR = "SOCKET_SET_ERROR"; export const SOCKET_RECEIVE_MESSAGE = "SOCKET_RECEIVE_MESSAGE"; export const SOCKET_SEND_MESSAGE = "SOCKET_SEND_MESSAGE"; +// Login actions +export const LOGIN_GET_STATUS = "LOGIN_GET_STATUS"; + // Room actions export const ROOM_SELECT = "ROOM_SELECT"; export const ROOM_JOIN = "ROOM_JOIN"; diff --git a/src/constants/login.js b/src/constants/login.js index a172aae..e2cfe37 100644 --- a/src/constants/login.js +++ b/src/constants/login.js @@ -1,4 +1,5 @@ export const LOGIN_STATUS_UNKNOWN = Symbol("LOGIN_STATUS_UNKNOWN"); +export const LOGIN_STATUS_GETTING = Symbol("LOGIN_STATUS_GETTING"); export const LOGIN_STATUS_PENDING = Symbol("LOGIN_STATUS_PENDING"); export const LOGIN_STATUS_SUCCESS = Symbol("LOGIN_STATUS_SUCCESS"); export const LOGIN_STATUS_FAILURE = Symbol("LOGIN_STATUS_FAILURE"); diff --git a/src/containers/App.js b/src/containers/App.js index 42fe554..7970d1b 100644 --- a/src/containers/App.js +++ b/src/containers/App.js @@ -14,10 +14,11 @@ const App = (props) => (); App.propTypes = { actions: PropTypes.object.isRequired, + login: PropTypes.object.isRequired, socket: PropTypes.object.isRequired }; -const mapStateToProps = ({ socket }) => ({ socket }); +const mapStateToProps = ({ socket, login }) => ({ socket, login }); function mapDispatchToProps(dispatch) { return { diff --git a/src/reducers/login.js b/src/reducers/login.js index 975d633..04969c2 100644 --- a/src/reducers/login.js +++ b/src/reducers/login.js @@ -1,6 +1,11 @@ -import { SOCKET_RECEIVE_MESSAGE } from "../constants/ActionTypes"; +import { + LOGIN_GET_STATUS, + SOCKET_RECEIVE_MESSAGE +} from "../constants/ActionTypes"; + import { LOGIN_STATUS_UNKNOWN, + LOGIN_STATUS_GETTING, LOGIN_STATUS_PENDING, LOGIN_STATUS_SUCCESS, LOGIN_STATUS_FAILURE @@ -10,13 +15,9 @@ const initialState = { status: LOGIN_STATUS_UNKNOWN }; -export default (state = initialState, action) => { - const { type, payload } = action; - if (type !== SOCKET_RECEIVE_MESSAGE) { - return state; - } +const reduceReceiveMessage = (state, message) => { + const { variant, data } = message; - const { variant, data } = payload; if (variant !== "LoginStatusResponse") { return state; } @@ -54,3 +55,20 @@ export default (state = initialState, action) => { return state; } }; + +export default (state = initialState, action) => { + const { type, payload } = action; + switch (type) { + case LOGIN_GET_STATUS: + return { + ...state, + status: LOGIN_STATUS_GETTING + }; + + case SOCKET_RECEIVE_MESSAGE: + return reduceReceiveMessage(state, payload); + + default: + return state; + } +};