Simplified CommonLinks

public/styles/shared.css

@@ -46,15 +46,6 @@ br {
 	padding-bottom: .5rem;
 }
 
-hr {
-	border: none;
-	height: 1px;
-	color: lightblue;
-	background-color: lightblue;
-	margin-top: 1em;
-	margin-bottom: 2em;
-}
-
 ul {
 	list-style-type: disc;
 	list-style-position: inside;
@@ -164,15 +155,15 @@ footer {
 	}
 }
 
-.panel.right, .panel.center {
+.panel.right {
 	align-items: center;
 }
 
-.panel.right .warning, .panel.center .warning {
+.panel.right .warning {
 	align-self: stretch;
 }
 
-.panel.right form, .panel.center form {
+.panel.right form {
 	flex: 1;
 	display: flex;
 	flex-direction: column;
@@ -180,14 +171,14 @@ footer {
 	align-self: stretch;
 }
 
-.panel.right form button, .panel.center form button {
+.panel.right form button {
 	align-self: stretch;
 	margin-top: .2em;
 	margin-bottom: .2em;
 }
 
 @media screen and (max-width: 480px) {
-	.panel.right h1, .panel.center h1 {
+	.panel.right h1 {
 		font-size: 16px;
 	}
 }
@@ -247,4 +238,13 @@ footer {
 /* bits and pieces */
 .logoutButton {
 	align-self: stretch;
+}
+
+.newsLine {
+	border: none;
+	height: 1px;
+	color: lightblue;
+	background-color: lightblue;
+	margin-top: 1em;
+	margin-bottom: 2em;
 }

src/components/pages/home.jsx

@@ -17,34 +17,13 @@ class Home extends React.Component {
 
 	//rendering function
 	render() {
-		//get the correct side panel
-		let SidePanel;
-
-		if (this.props.id) { //logged in
-			SidePanel = () => {
-				return (
-					<div className='sidePanel'>
-						<CommonLinks />
-					</div>
-				);
-			}
-		} else { //logged out
-			SidePanel = () => {
-				return (
-					<div className='sidePanel'>
-						<p><Link to='/signup'>Sign Up</Link></p>
-						<p><Link to='/login'>Login</Link></p>
-						<p><Link to='/passwordrecover'>Recover Password</Link></p>
-					</div>
-				);
-			}
-		}
-
 		//return the home page
 		return (
 			<div className='page'>
 				<div className='sidePanelPage'>
-					<SidePanel />
+					<div className='sidePanel'>
+						<CommonLinks />
+					</div>
 
 					<div className='mainPanel'>
 						<Blurb />

src/components/panels/common_links.jsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { withRouter, Link } from 'react-router-dom';
 import { connect } from 'react-redux';
+import PropTypes from 'prop-types';
 
 import Logout from './logout.jsx';
 
@@ -21,38 +22,46 @@ class CommonLinks extends React.Component {
 			Extra = () => null;
 		}
 
-		//disable the profile link when logged out
-		let ProfileLink;
+		//if logged in
 		if (this.props.loggedIn) {
-			ProfileLink = () => <p><Link to='/profile' onClick={this.props.onClickProfile}>Your Profile</Link></p>;
-		} else {
-			ProfileLink = () => null;
+			return (
+				<div className='panel'>
+					<p><Link to='/' onClick={this.props.onClickHome}>Return Home</Link></p>
+					<p><Link to='/profile' onClick={this.props.onClickProfile}>Your Profile</Link></p>
+					<p><Link to='/ladder' onClick={this.props.onClickLadder}>Game Ladder</Link></p>
+					<p><Link to='/passwordchange' onClick={this.props.onClickPasswordChange}>Change Password</Link></p>
+
+					<Extra />
+
+					<Logout onClick={() => this.props.history.push('/')} />
+				</div>
+			);
+		} else { //if not logged in
+			return (
+				<div className='panel'>
+					<p><Link to='/signup' onClick={this.props.onClickSignup}>Sign Up</Link></p>
+					<p><Link to='/login' onClick={this.props.onClickLogin}>Login</Link></p>
+					<p><Link to='/passwordrecover' onClick={this.props.onClickPasswordRecover}>Recover Password</Link></p>
+					<p><Link to='/' onClick={this.props.onClickHome}>Return Home</Link></p>
+					<p><Link to='/ladder' onClick={this.props.onClickLadder}>Game Ladder</Link></p>
+
+					<Extra />
+				</div>
+			);
 		}
-
-		//disable the logout button when logged out
-		let LogoutLink;
-		if (this.props.loggedIn) {
-			LogoutLink = () => <Logout onClick={() => this.props.history.push('/')} />;
-		} else {
-			LogoutLink = () => null;
-		}
-
-
-		return (
-			<div className='panel'>
-				<p><Link to='/' onClick={this.props.onClickHome}>Return Home</Link></p>
-				<ProfileLink />
-				<p><Link to='/ladder' onClick={this.props.onClickLadder}>Game Ladder</Link></p>
-				<p><Link to='/passwordchange' onClick={this.props.onClickLadder}>Change Password</Link></p>
-
-				<Extra />
-
-				<LogoutLink />
-			</div>
-		);
 	}
 }
 
+CommonLinks.propTypes = {
+	onClickSignup: PropTypes.func,
+	onClickLogin: PropTypes.func,
+	onClickPasswordRecover: PropTypes.func,
+	onClickHome: PropTypes.func,
+	onClickProfile: PropTypes.func,
+	onClickLadder: PropTypes.func,
+	onClickPasswordChange: PropTypes.func
+};
+
 function mapStoreToProps(store) {
 	return {
 		loggedIn: store.account.id !== 0

src/components/panels/news_panel.jsx

@@ -15,7 +15,7 @@ class NewsPanel extends React.Component {
 	render() {
 		return (
 			<div>
-				{Object.keys(this.state.data).map((key) => <div key={key}><ReactMarkdown source={this.state.data[key]} escapeHTML={false} /><hr /></div> )}
+				{Object.keys(this.state.data).map((key) => <div key={key}><ReactMarkdown source={this.state.data[key]} escapeHTML={false} /><hr className='newsLine' /></div> )}
 			</div>
 		);
 	}