Keep selected version option in sync with URL

Author: Planeshifter

tools/docs/www/src/app.jsx

@@ -23,7 +23,6 @@ import { Route, Switch, withRouter } from 'react-router-dom';
 import { Link } from 'react-router-dom';
 import SideMenu from './side_menu.jsx';
 import WelcomePage from './welcome_page.jsx';
-import VERSIONS from './versions.json';
 import './css/app.css';
 import './css/reset.css';
 import './css/highlight.css';
@@ -54,9 +53,11 @@ class App extends Component {
 	constructor( props ) {
 		super( props );
 
+		const pathname = props.history.location.pathname;
+		const version = pathname.substring( 1, pathname.indexOf( '/docs' ) );
 		this.state = {
 			slideoutIsOpen: true,
-			version: VERSIONS[ 0 ],
+			version: version,
 			packageTree: null,
 			packageResources: {}
 		};
@@ -150,6 +151,9 @@ class App extends Component {
 	}
 
 	selectVersion = ( event ) => {
+		let pathname = this.props.history.location.pathname;
+		pathname = pathname.replace( this.state.version, event.target.value );
+		this.props.history.push( pathname );
 		this.setState({
 			version: event.target.value
 		}, this.fetchJSONFiles );

tools/docs/www/src/side_menu.jsx

@@ -31,6 +31,7 @@ import RemoveIcon from '@material-ui/icons/Remove';
 import IconButton from '@material-ui/core/IconButton';
 import ClearIcon from '@material-ui/icons/Clear';
 import ChevronRightIcon from '@material-ui/icons/ChevronRight';
+import VERSIONS from './versions.json';
 import Logo from './logo.jsx';
 
 
@@ -276,8 +277,12 @@ class MenuBar extends Component {
 								<ChevronRightIcon id="menu-close-icon" />
 							</IconButton>
 						</div>
-						<select className="side-menu-version-select" id="lang" onChange={this.props.onVersionChange} value={this.state.version}>
-							<option value="v0.0.87">v0.0.87</option>
+						<select
+							className="side-menu-version-select"
+							onChange={this.props.onVersionChange}
+							value={this.props.version}
+						>
+							{VERSIONS.map( ( val, key ) => <option key={key} value={val}>{val}</option> )}
 						</select>
 						<div className="side-menu-filter" >
 							<input