Started equipment; need to rework state system

src/components/pages/profile.jsx

@@ -7,6 +7,7 @@ import queryString from 'query-string';
 //panels
 import CommonLinks from '../panels/common_links.jsx';
 import AttackButton from '../panels/attack_button.jsx';
+import Equipment from '../panels/equipment.jsx';
 import CombatLog from '../panels/combat_log.jsx';
 
 class Profile extends React.Component {
@@ -27,12 +28,24 @@ class Profile extends React.Component {
 
 			warning: '',
 
-			start: params.log
+			//combat log
+			start: params.log,
+
+			//equipment
+			fetchStatistics: null,
+			fetchEquipment: null
 		};
 
 		this.sendRequest('/profilerequest', this.state.params.username ? this.state.params.username : this.props.username);
 	}
 
+	componentDidUpdate(prevProps, prevState, snapshot) {
+		if (JSON.stringify(this.state) !== JSON.stringify(prevState)) {
+//			if (this.state.fetchStatistics) this.state.fetchStatistics();
+//			if (this.state.fetchEquipment) this.state.fetchEquipment();
+		}
+	}
+
 	render() {
 		let warningStyle = {
 			display: this.state.warning.length > 0 ? 'flex' : 'none'
@@ -197,6 +210,10 @@ class Profile extends React.Component {
 					</div>
 				</div>
 
+				<br />
+				<h1 className='centered'>Equipment</h1>
+				<Equipment username={this.props.username} token={this.props.token} scientists={1} getFetchSattistics={ (fn) => this.setState({ fetchStatistics: fn }) } getFetchEquipment={ (fn) => this.setState({ fetchEquipment: fn}) } />
+
 				<br />
 				<h1 className='centered'>Combat Log</h1>
 				<CombatLog username={this.props.username} start={this.state.start} length={this.state.length} />

src/components/panels/equipment.jsx

@@ -0,0 +1,112 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+class Equipment extends React.Component {
+	constructor(props) {
+		super(props);
+		this.state = {
+			statistics: {},
+			equipment: {}
+		};
+
+		if (this.props.getFetchStatistics) {
+//			this.props.getFetchStatistics(this.fetchStatistics.bind(this));
+		}
+
+		this.fetchStatistics();
+
+		if (this.props.getFetchEquipment) {
+//			this.props.getFetchEquipment(this.fetchEquipmentList.bind(this));
+		}
+
+		this.fetchEquipmentList();
+	}
+
+	render() {
+		//print the purchasable weapons, then purchasable armour, then stuff you can't buy
+		let statistics = JSON.parse(JSON.stringify(this.state.statistics));
+
+		//filter out what you can't get at your current scientist count
+		Object.keys(statistics).forEach((typeKey) => {
+			Object.keys(statistics[typeKey]).forEach((nameKey) => {
+				if (statistics[typeKey][nameKey].scientists > this.props.scientists) {
+					delete statistics[typeKey][nameKey];
+				}
+				if (Object.keys(statistics[typeKey]).length === 0) {
+					delete statistics[typeKey];
+				}
+			});
+		});
+
+		console.log(this.state.statistics);
+		console.log(statistics);
+
+		return (
+			<div className='panel'>
+				<div className='table'>
+
+					<div className='row'>
+						<p className='col'>Equipment Name</p>
+						<p className='col'>Equipment Type</p>
+						<p className='col'>Quantity</p>
+						<p className='col'>Cost</p>
+						<p className='col'>Buy</p>
+						<p className='col'>Sell</p>
+					</div>
+
+
+
+				</div>
+			</div>
+		);
+	}
+
+	fetchStatistics() {
+		//build the XHR
+		let xhr = new XMLHttpRequest();
+
+		xhr.onreadystatechange = () => {
+			if (xhr.readyState === 4) {
+				if (xhr.status === 200) {
+					let data = JSON.parse(xhr.responseText);
+					this.setState({ statistics: data });
+				}
+			}
+		}
+
+		xhr.open('POST', '/equipmentstatisticsrequest', true);
+		xhr.send();
+	}
+
+	fetchEquipmentList(username = this.props.username, token = this.props.token) {
+		//build the XHR
+		let xhr = new XMLHttpRequest();
+
+		xhr.onreadystatechange = () => {
+			if (xhr.readyState === 4) {
+				if (xhr.status === 200) {
+					let data = JSON.parse(xhr.responseText);
+					this.setState({ equipment: data });
+				}
+			}
+		}
+
+		xhr.open('POST', '/equipmentlistrequest', true);
+		xhr.setRequestHeader('Content-Type', 'application/json; charset=UTF-8');
+		xhr.send(JSON.stringify({
+			username: username,
+			token: token
+		}));
+	}
+};
+
+Equipment.propTypes = {
+	username: PropTypes.string.isRequired,
+	token: PropTypes.number.isRequired,
+	scientists: PropTypes.number.isRequired,
+
+	getFetchStatistics: PropTypes.func,
+	getFetchEquipmentList: PropTypes.func
+};
+
+export default Equipment;