Allowed ladder URL to point to specific rank

auth.json.dev

@@ -0,0 +1,6 @@
+{
+	"env": {
+		"REACT_APP_GA_TRACKING_ID": "",
+		"REACT_APP_GA_DEBUG": true
+	}
+}

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

@@ -6,6 +6,7 @@ So changes I'm making 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)
 
 Known Bugs:
 

src/components/pages/ladder.jsx

@@ -1,4 +1,6 @@
 import React from 'react';
+import queryString from 'query-string';
+import { withRouter } from 'react-router-dom';
 
 import CommonLinks from '../panels/common_links.jsx';
 import PagedLadder from '../panels/paged_ladder.jsx';
@@ -6,16 +8,22 @@ import PagedLadder from '../panels/paged_ladder.jsx';
 class Ladder extends React.Component {
 	constructor(props) {
 		super(props);
+
+		let params = queryString.parse(props.location.search);
+
 		this.state = {
-			start: 0,
+			params: params,
+			start: parseInt(params.rank) || 0,
 			length: 50,
 			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);
@@ -52,15 +60,20 @@ class Ladder extends React.Component {
 	}
 
 	increment() {
-		this.setState({
-			start: this.state.start + this.state.length
-		});
+		let start = this.state.start + this.state.length;
+
+		this.props.history.push(`${this.props.location.pathname}?rank=${start}`);
 	}
 
 	decrement() {
-		this.setState({
-			start: Math.max(0, this.state.start - this.state.length)
-		});
+		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.push(`${this.props.location.pathname}?rank=${start}`);
 	}
 
 	//bound callbacks
@@ -70,9 +83,16 @@ class Ladder 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}?rank=${start}`);
 		}
 	}
 }
 
-export default Ladder;
+export default withRouter(Ladder);

src/components/panels/paged_ladder.jsx

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