Added a dummied attack button as a component

src/actions/combat.js

@@ -0,0 +1,8 @@
+export const SET_ATTACK_DISABLED = 'SET_ATTACK_DISABLED';
+
+export function setAttackDisabled(disabled) {
+	return {
+		type: SET_ATTACK_DISABLED,
+		disabled: disabled
+	}
+}

src/components/app.jsx

@@ -5,11 +5,37 @@ import Loadable from 'react-loadable';
 //other stuff
 import Footer from './panels/footer.jsx';
 
-//lazy route loading
+//lazy route loading (with error handling)
 const LazyRoute = (props) => {
 	const component = Loadable({
 		loader: props.component,
-		loading: () => <div className='page'><p className='centered'>Loading...</p></div>,
+
+		loading: (props) => {
+			if (props.error) {
+				return (
+					<div className='page'>
+						<div className='warning' style={{display: 'flex'}}>
+							<p className='centered'>{props.error}</p>
+						</div>
+					</div>
+				);
+			} else if (props.timeOut) {
+				return (
+					<div className='page'>
+						<div className='warning' style={{display: 'flex'}}>
+							<p className='centered'>Timed Out</p>
+						</div>
+					</div>
+				);
+			} else {
+				return (
+					<div className='page'>
+						<p className='centered'>Loading...</p>
+					</div>
+				);
+			}
+		},
+		timeout: 10000
 	});
 
 	return <Route {...props} component={component} />;

src/components/pages/profile.jsx

@@ -6,6 +6,7 @@ import queryString from 'query-string';
 
 //panels
 import CommonLinks from '../panels/common_links.jsx';
+import AttackButton from '../panels/attack_button.jsx';
 
 class Profile extends React.Component {
 	constructor(props) {
@@ -123,7 +124,7 @@ class Profile extends React.Component {
 
 	//panel functions
 	MyProfileSidePanel() {
-		//finally return the side panel
+		//return the side panel
 		return (
 			<div className='sidePanel'>
 				<CommonLinks />
@@ -178,7 +179,7 @@ class Profile extends React.Component {
 	}
 
 	NotMyProfileSidePanel() {
-		//finally return the side panel
+		//return the side panel
 		return (
 			<div className='sidePanel'>
 				<CommonLinks onClickProfile={() => {e.preventDefault(); this.sendRequest('/profilerequest', this.props.username); this.setWarning(''); this.props.history.push('/profile');}} />
@@ -206,8 +207,7 @@ class Profile extends React.Component {
 				<div className='row'>
 					<p className='col'>Recruits:</p>
 					<p className='col'>{this.state.recruits}</p>
-					<div className='col'></div>
-					<div className='col'></div>
+					<AttackButton className='col' style={{flex: '2 1 1.5%'}} setWarning={this.setWarning.bind(this)} attacker={this.props.username} defender={this.state.username} />
 				</div>
 
 				<div className='row'>

src/components/panels/attack_button.jsx

@@ -0,0 +1,78 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { connect } from 'react-redux';
+
+import { setAttackDisabled } from '../../actions/combat.js';
+
+class AttackButton extends React.Component {
+	constructor(props) {
+		super(props);
+		this.state = {
+			//
+		};
+	}
+
+	render() {
+		return (
+			<button className={this.props.className} style={this.props.style} onClick={this.sendAttackRequest.bind(this)} disabled={this.props.disabled}>Attack</button>
+		);
+	}
+
+	sendAttackRequest() {
+		//build the XHR
+		let xhr = new XMLHttpRequest();
+		xhr.open('POST', '/attackrequest', true);
+
+		xhr.onreadystatechange = () => {
+			if (xhr.readyState === 4) {
+				if (xhr.status === 200) {
+					//DO NOTHING
+				} else if (xhr.status === 400) {
+					if (this.props.setWarning) {
+						this.props.setWarning(xhr.responseText);
+					}
+				}
+			}
+		}
+
+		xhr.setRequestHeader('Content-Type', 'application/json; charset=UTF-8');
+		xhr.send(JSON.stringify({
+			attacker: this.props.attacker,
+			defender: this.props.defender
+		}));
+
+		if (this.props.onClick) {
+			this.props.onClick();
+		}
+
+		this.props.setDisabled(true);
+	}
+};
+
+AttackButton.propTypes = {
+	className: PropTypes.string,
+	style: PropTypes.object,
+	onClick: PropTypes.func,
+	setWarning: PropTypes.func,
+	attacker: PropTypes.string.isRequired,
+	defender: PropTypes.string.isRequired,
+
+	disabled: PropTypes.bool.isRequired,
+	setDisabled: PropTypes.func.isRequired
+};
+
+function mapStoreToProps(store) {
+	return {
+		disabled: store.combat.attackDisabled
+	}
+}
+
+function mapDispatchToProps(dispatch) {
+	return {
+		setDisabled: (disabled) => dispatch(setAttackDisabled(disabled))
+	}
+}
+
+AttackButton = connect(mapStoreToProps, mapDispatchToProps)(AttackButton);
+
+export default AttackButton;

src/components/panels/login.jsx

@@ -128,7 +128,7 @@ function mapStoreToProps(store) {
 
 function mapDispatchToProps(dispatch) {
 	return {
-		login: (id, email, username, token) => { dispatch(login(id, email, username, token)) }
+		login: (id, email, username, token) => dispatch(login(id, email, username, token))
 	}
 }
 

src/reducers/combat.js

@@ -0,0 +1,18 @@
+import { SET_ATTACK_DISABLED } from '../actions/combat.js';
+
+const initialStore = {
+	attackDisabled: true
+};
+
+export function combatReducer(store = initialStore, action) {
+	switch(action.type) {
+		case SET_ATTACK_DISABLED: {
+			let newStore = JSON.parse(JSON.stringify(initialStore));
+			newStore.attackDisabled = action.disabled;
+			return newStore;
+		}
+
+		default:
+			return store;
+	}
+}

src/reducers/reducer.js

@@ -1,8 +1,10 @@
 import { combineReducers } from 'redux';
 import { accountReducer } from './accounts.js';
+import { combatReducer } from './combat.js';
 
 //compile all reducers together
 export default combineReducers({
-	account: accountReducer
+	account: accountReducer,
+	combat: combatReducer
 });