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;
+ }
+};