Added a friendly message to the spying screen

src/components/pages/spying_log.jsx

@@ -3,6 +3,9 @@ import { connect } from 'react-redux';
 import queryString from 'query-string';
 import PropTypes from 'prop-types';
 
+//actions
+import { storeSpies, clearProfile } from '../../actions/profile.js';
+
 //panels
 import CommonLinks from '../panels/common_links.jsx';
 import PagedSpyingLog from '../panels/paged_spying_log.jsx';
@@ -19,9 +22,12 @@ class SpyingLog extends React.Component {
 			length: parseInt(params.length) || 20,
 
 			fetch: null,
+			buttonsVisible: false,
 
 			warning: ''
 		};
+
+		this.sendRequest('/profilerequest', {username: this.props.username});
 	}
 
 	componentDidMount() {
@@ -30,6 +36,10 @@ class SpyingLog extends React.Component {
 		}
 	}
 
+	componentWillUnmount() {
+		this.props.clearProfile();
+	}
+
 	componentDidUpdate(prevProps, prevState, snapshot) {
 		if (JSON.stringify(this.state) !== JSON.stringify(prevState)) {
 			this.state.fetch();
@@ -62,6 +72,7 @@ class SpyingLog extends React.Component {
 						username={this.props.username}
 						start={this.state.start}
 						length={this.state.length}
+						spies={this.props.spies}
 						getFetch={this.getFetch.bind(this)}
 						onReceived={this.onReceived.bind(this)}
 					/>
@@ -73,6 +84,10 @@ class SpyingLog extends React.Component {
 	}
 
 	buttonHeader() {
+		if (!this.buttonsVisible) {
+			return null;
+		}
+
 		return (
 			<div className='table noCollapse'>
 				<div className='row'>
@@ -102,12 +117,42 @@ class SpyingLog extends React.Component {
 		this.props.history.push(`${this.props.location.pathname}?log=${start}`);
 	}
 
+	//gameplay functions
+	sendRequest(url, args = {}) { //send a unified request, using my credentials
+		//build the XHR
+		let xhr = new XMLHttpRequest();
+		xhr.open('POST', url, true);
+
+		xhr.onreadystatechange = () => {
+			if (xhr.readyState === 4) {
+				if (xhr.status === 200) {
+					let json = JSON.parse(xhr.responseText);
+
+					//on success
+					this.props.storeSpies(json.spies);
+				}
+				else if (xhr.status === 400) {
+					this.setWarning(xhr.responseText);
+				}
+			}
+		};
+
+		xhr.setRequestHeader('Content-Type', 'application/json; charset=UTF-8');
+		xhr.send(JSON.stringify({
+			id: this.props.id,
+			token: this.props.token,
+			...args
+		}));
+	}
+
 	//bound callbacks
 	getFetch(fn) {
 		this.setState({ fetch: fn });
 	}
 
 	onReceived(data) {
+		this.setState({ buttonsVisible: data.length > 0 });
+
 		if (data.length === 0) {
 			let start = Math.max(0, this.state.start - this.state.length);
 
@@ -133,13 +178,16 @@ SpyingLog.propTypes = {
 const mapStoreToProps = (store) => {
 	return {
 		username: store.account.username,
-		loggedIn: store.account.id !== 0
+		loggedIn: store.account.id !== 0,
+		username: store.account.username,
+		spies: store.profile.spies
 	};
 };
 
 const mapDispatchToProps = (dispatch) => {
 	return {
-		//
+		storeSpies: (x) => dispatch(storeSpies(x)),
+		clearProfile: () => dispatch(clearProfile())
 	};
 };
 

src/components/panels/equipment.jsx

@@ -8,7 +8,7 @@ class Equipment extends React.Component {
 		super(props);
 
 		this.state = {
-			//
+			data: []
 		};
 
 		if (this.props.getFetch) {
@@ -17,7 +17,7 @@ class Equipment extends React.Component {
 	}
 
 	render() {
-		let display = this.flattenStructure(this.state, this.props.scientists);
+		let display = this.flattenStructure(this.state.data, this.props.scientists);
 
 		//if there are no scientists
 		if (this.props.scientists <= 0 && display.length === 0) {
@@ -77,7 +77,7 @@ class Equipment extends React.Component {
 					let json = JSON.parse(xhr.responseText);
 
 					//on success
-					this.setState(json);
+					this.setState({ data: json });
 
 					if (this.props.onSuccess) {
 						this.props.onSuccess(json);

src/components/panels/paged_combat_log.jsx

@@ -1,5 +1,4 @@
 import React from 'react';
-import { withRouter, Link } from 'react-router-dom';
 import { connect } from 'react-redux';
 import PropTypes from 'prop-types';
 
@@ -10,7 +9,7 @@ class PagedCombatLog extends React.Component {
 		super(props);
 
 		this.state = {
-			//
+			data: []
 		};
 
 		if (props.getFetch) {
@@ -21,7 +20,7 @@ class PagedCombatLog extends React.Component {
 	render() {
 		return (
 			<div>
-				{Object.keys(this.state).map((key) => <CombatLogRecord key={key} username={this.props.username} {...this.state[key]} />)}
+				{Object.keys(this.state.data).map((key) => <CombatLogRecord key={key} username={this.props.username} {...this.state.data[key]} />)}
 			</div>
 		);
 	}
@@ -40,7 +39,7 @@ class PagedCombatLog extends React.Component {
 					json.sort((a, b) => new Date(b.eventTime) - new Date(a.eventTime));
 
 					//on success
-					this.setState(json);
+					this.setState({ data: json });
 
 					if (this.props.onReceived) {
 						this.props.onReceived(json);
@@ -89,4 +88,4 @@ const mapDispatchToProps = (dispatch) => {
 
 PagedCombatLog = connect(mapStoreToProps, mapDispatchToProps)(PagedCombatLog);
 
-export default withRouter(PagedCombatLog);
+export default PagedCombatLog;

src/components/panels/paged_spying_log.jsx

@@ -10,7 +10,7 @@ class PagedSpyingLog extends React.Component {
 		super(props);
 
 		this.state = {
-			//
+			data: []
 		};
 
 		if (props.getFetch) {
@@ -19,9 +19,19 @@ class PagedSpyingLog extends React.Component {
 	}
 
 	render() {
+		//if there are no spies
+		if (this.props.spies <= 0 && this.state.data.length <= 0) {
+			return (
+				<div className='panel'>
+					<p className='centered'>You have no spies!</p>
+					<p className='centered'>Go and <Link to='/profile'>train some!</Link></p>
+				</div>
+			);
+		}
+
 		return (
 			<div>
-				{Object.keys(this.state).map((key) => <SpyingLogRecord key={key} username={this.props.username} {...this.state[key]} />)}
+				{Object.keys(this.state.data).map((key) => <SpyingLogRecord key={key} username={this.props.username} {...this.state.data[key]} />)}
 			</div>
 		);
 	}
@@ -40,7 +50,7 @@ class PagedSpyingLog extends React.Component {
 					json.sort((a, b) => new Date(b.eventTime) - new Date(a.eventTime));
 
 					//on success
-					this.setState(json);
+					this.setState({ data: json });
 
 					if (this.props.onReceived) {
 						this.props.onReceived(json);