Allowed profile URL to point to a specific log

public/news/2019-05-30-01.md

@@ -2,15 +2,17 @@ Update Log
 ---
 _30 May 2019_
 
-So changes I'm making today:
+So changes I've made today:
 
 * Both incoming and outgoing combats are now visible.
 * Google analytics implemented.
 * The game ladder can now point to a specific rank with the URL: [https://kingdombattles.net/ladder?rank=0](ladder?rank=0)
+* THe same goes for the profile's combat log: [https://kingdombattles.net/profile?log=0](profile?log=0)
 
 Known Bugs:
 
-* Someone's gold was negative. I have no idea how this happened.
+* Someone's gold was negative. It's been corrected, but the cause is unknown.
+* The ladder and profile flicker while the lists are being loaded.
 
 Today's goal:
 

src/components/app.jsx

@@ -28,12 +28,14 @@ const LazyRoute = (props) => {
 						</div>
 					</div>
 				);
-			} else {
+			} else if (props.pastDelay) {
 				return (
 					<div className='page'>
 						<p className='centered'>Loading...</p>
 					</div>
 				);
+			} else {
+				return null;
 			}
 		},
 		timeout: 10000

src/components/pages/profile.jsx

@@ -12,8 +12,12 @@ import CombatLog from '../panels/combat_log.jsx';
 class Profile extends React.Component {
 	constructor(props) {
 		super(props);
+
+		let params = queryString.parse(props.location.search);
+
 		this.state = {
-			params: queryString.parse(props.location.search),
+			params: params,
+
 			username: '',
 			gold: 0,
 			recruits: 0,
@@ -21,7 +25,9 @@ class Profile extends React.Component {
 			spies: 0,
 			scientists: 0,
 
-			warning: ''
+			warning: '',
+
+			start: params.log
 		};
 
 		this.sendRequest('/profilerequest', this.state.params.username ? this.state.params.username : this.props.username);
@@ -193,7 +199,7 @@ class Profile extends React.Component {
 
 				<br />
 				<h1 className='centered'>Combat Log</h1>
-				<CombatLog username={this.props.username} />
+				<CombatLog username={this.props.username} start={this.state.start} length={this.state.length} />
 			</div>
 		);
 	}
@@ -319,7 +325,6 @@ class Profile extends React.Component {
 	ProfileNotFoundMainPanel() {
 		return (
 			<div>
-				<p className='centered'>No profile found!</p>
 			</div>
 		);
 	}

src/components/panels/combat_log.jsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import { withRouter } from 'react-router-dom';
 
 import PagedCombatLog from './paged_combat_log.jsx';
 
@@ -7,15 +8,17 @@ class CombatLog extends React.Component {
 	constructor(props) {
 		super(props);
 		this.state = {
-			start: props.start || 0,
+			start: parseInt(props.start) || 0,
-			length: props.length || 20,
+			length: parseInt(props.length) || 20,
 			fetch: null
 		};
 	}
 
-	componentDidUpdate() {
+	componentDidUpdate(prevProps, prevState, snapshot) {
+		if (JSON.stringify(this.state) !== JSON.stringify(prevState)) {
 			this.state.fetch();
 		}
+	}
 
 	render() {
 		let ButtonHeader = this.buttonHeader.bind(this);
@@ -44,15 +47,20 @@ class CombatLog extends React.Component {
 	}
 
 	increment() {
-		this.setState({
+		let start = this.state.start + this.state.length;
-			start: this.state.start + this.state.length
+
-		});
+		this.props.history.push(`${this.props.location.pathname}?log=${start}`);
 	}
 
 	decrement() {
-		this.setState({
+		let start = Math.max(0, this.state.start - this.state.length);
-			start: Math.max(0, this.state.start - this.state.length)
+
-		});
+		//don't decrement too far
+		if (start === this.state.start) {
+			return;
+		}
+
+		this.props.history.push(`${this.props.location.pathname}?log=${start}`);
 	}
 
 	//bound callbacks
@@ -62,7 +70,14 @@ class CombatLog extends React.Component {
 
 	onReceived(data) {
 		if (data.length === 0) {
-			this.decrement();
+			let start = Math.max(0, this.state.start - this.state.length);
+
+			//don't decrement too far
+			if (start === this.state.start) {
+				return;
+			}
+
+			this.props.history.replace(`${this.props.location.pathname}?log=${start}`);
 		}
 	}
 }
@@ -71,4 +86,4 @@ CombatLog.propTypes = {
 	username: PropTypes.string.isRequired
 };
 
-export default CombatLog;
+export default withRouter(CombatLog);

src/components/panels/paged_combat_log.jsx

@@ -12,8 +12,6 @@ class PagedCombatLog extends React.Component {
 		if (props.getFetch) {
 			props.getFetch(this.fetchCombatLog.bind(this));
 		}
-
-		this.fetchCombatLog();
 	}
 
 	render() {