Moved most of the sidebar into a CommonLinks panel

src/components/pages/home.jsx

@@ -4,18 +4,18 @@ import { withRouter, Link } from 'react-router-dom';
 import PropTypes from 'prop-types';
 
 //panels
+import CommonLinks from '../panels/common_links.jsx';
+
 import Signup from '../panels/signup.jsx';
 import Login from '../panels/login.jsx';
-import Logout from '../panels/logout.jsx';
-import PasswordChange from '../panels/password_change.jsx';
 import PasswordRecover from '../panels/password_recover.jsx';
+
 import NewsPanel from '../panels/news_panel.jsx';
 
 class Home extends React.Component {
 	constructor(props) {
 		super(props);
 		this.state = {
-			changedPassword: false,
 			signupSent: false,
 			signupMsg: '',
 			recoverSent: false,
@@ -34,14 +34,14 @@ class Home extends React.Component {
 			SidePanel = this.LoggedOutSidePanel.bind(this);
 		}
 
-		//TODO: news column
-
 		//return the home page
 		return (
 			<div className='page'>
 				<h1 style={{textAlign: 'center', fontSize: '50px', margin: '30px'}}>KINGDOM BATTLES!</h1>
+
 				<div className='sidePanelPage'>
 					<SidePanel />
+
 					<div className='mainPanel'>
 						<h1 className='centered'>News</h1>
 						<NewsPanel />
@@ -62,35 +62,15 @@ class Home extends React.Component {
 			this.setState({ recoverSent: false });
 		}
 
-		//build the password change panel
-		let PasswordChangePanel;
-
-		if (!this.state.changedPassword) {
-			PasswordChangePanel = () => {
-				return (<PasswordChange onPasswordChange={() => { this.setState({changedPassword: true}) }} />);
-			}
-		} else {
-			PasswordChangePanel = () => {
-				return (<p>Password changed!</p>);
-			}
-		}
-
 		//finally return the side panel
 		return (
 			<div className='sidePanel'>
-				<p>Go to <Link to='/profile'>your profile</Link></p>
-				<PasswordChangePanel />
-				<Logout />
+				<CommonLinks />
 			</div>
 		);
 	}
 
 	LoggedOutSidePanel() {
-		//reset the other mode
-		if (this.state.changedPassword) {
-			this.setState({ changedPassword: false });
-		}
-
 		//build the signup panel
 		let SignupPanel;
 

src/components/pages/profile.jsx

@@ -5,7 +5,7 @@ import PropTypes from 'prop-types';
 import queryString from 'query-string';
 
 //panels
-import Logout from '../panels/logout.jsx';
+import CommonLinks from '../panels/common_links.jsx';
 import PasswordChange from '../panels/password_change.jsx';
 
 class Profile extends React.Component {
@@ -21,9 +21,7 @@ class Profile extends React.Component {
 			scientists: 0,
 			warning: ''
 		};
-	}
 
-	componentWillMount() {
 		this.sendRequest('/profilerequest', this.state.params.username ? this.state.params.username : this.props.username);
 	}
 
@@ -65,6 +63,7 @@ class Profile extends React.Component {
 
 				<div className='sidePanelPage'>
 					<SidePanel />
+
 					<div className='mainPanel'>
 						<div className='warning' style={warningStyle}>
 							<p>{this.state.warning}</p>
@@ -143,9 +142,7 @@ class Profile extends React.Component {
 		//finally return the side panel
 		return (
 			<div className='sidePanel'>
-				<p>Return <Link to='/'>home</Link></p>
-				<PasswordChangePanel />
-				<Logout onClick={(e) => this.props.history.push('/')} />
+				<CommonLinks extra={() => <PasswordChangePanel />} />
 			</div>
 		);
 	}
@@ -200,9 +197,7 @@ class Profile extends React.Component {
 		//finally return the side panel
 		return (
 			<div className='sidePanel'>
-				<p>Return <Link to='/'>home</Link></p>
-				<p>Go to <Link to='/profile' onClick={(e) => { e.preventDefault(); this.sendRequest('/profilerequest', this.props.username); this.setWarning(''); this.props.history.push('/profile'); }}>your profile</Link></p>
-				<Logout onClick={(e) => this.props.history.push('/')} />
+				<CommonLinks onClickProfile={() => {e.preventDefault(); this.sendRequest('/profilerequest', this.props.username); this.setWarning(''); this.props.history.push('/profile');}} />
 			</div>
 		);
 	}
@@ -258,7 +253,7 @@ class Profile extends React.Component {
 	LoggedOutSidePanel() {
 		return (
 			<div className='sidePanel'>
-				<p>Return <Link to='/'>home</Link></p>
+				<CommonLinks />
 			</div>
 		);
 	}

src/components/panels/common_links.jsx

@@ -0,0 +1,37 @@
+import React from 'react';
+import { withRouter, Link } from 'react-router-dom';
+
+import Logout from './logout.jsx';
+
+class CommonLinks extends React.Component {
+	constructor(props) {
+		super(props);
+		this.state = {
+			//
+		}
+	}
+
+	render() {
+		let Extra;
+
+		if (this.props.extra) {
+			Extra = this.props.extra;
+		} else {
+			Extra = () => null;
+		}
+
+		return (
+			<div className='panel'>
+				<p>Return <Link to='/' onClick={this.props.onClickHome}>home</Link></p>
+				<p>Go to <Link to='/profile' onClick={this.props.onClickProfile}>your profile</Link></p>
+				<p>Go to <Link to='/ladder' onClick={this.props.onClickLadder}>the game ladder</Link></p>
+
+				<Extra />
+
+				<Logout onClick={() => this.props.history.push('/')} />
+			</div>
+		);
+	}
+}
+
+export default withRouter(CommonLinks);