Merge 853aee3 into b455beb

src/assertions.js

@@ -37,6 +37,7 @@ import reportableOutcomes from '../test/assertions/reportable-outcomes';
 import marketDataUpdater from '../test/assertions/market-data-updater';
 import marketDataAge from '../test/assertions/market-data-age';
 import filterSort from '../test/assertions/filter-sort';
+import coreStats from '../test/assertions/core-stats';
 
 export default {
 	activeView,
@@ -77,5 +78,6 @@ export default {
 	reportableOutcomes,
 	marketDataUpdater,
 	marketDataAge,
-	filterSort
+	filterSort,
+	coreStats
 };

src/modules/auth/components/auth-form.jsx

@@ -212,12 +212,12 @@ export default class AuthForm extends Component {
 				/>
 				<Link
 					type="button"
-					className="button x-button"
+					className="button x-button unstyled"
 					title="Back to Markets Page"
 					href={p.closeLink.href}
 					onClick={p.closeLink.onClick}
 				>
-					&#xf057;
+					<i></i>
 				</Link>
 				<p className={classnames('instruction')}>Passwords must be at least 6 characters in length.</p>
 			</form>

src/modules/common/components/core-stats.jsx

@@ -0,0 +1,19 @@
+import React, { PropTypes } from 'react';
+
+const CoreStats = p => (
+	<div className="core-stats">
+		<div className="core-stats-content">
+			<span>{p.coreStats.rep}</span>
+			<span>{p.coreStats.eth}</span>
+		</div>
+	</div>
+);
+
+CoreStats.propTypes = {
+	coreStats: PropTypes.shape({
+		rep: PropTypes.number,
+		eth: PropTypes.number
+	})
+};
+
+export default CoreStats;

src/modules/common/less/core-stats.less

@@ -0,0 +1,8 @@
+.core-stats {
+	background-color: red;
+
+	.core-stats-content {
+		display: flex;
+		flex: 1;
+	}
+}

src/modules/common/less/layout.less

@@ -24,9 +24,12 @@
 	.view-content-container {
 		flex: 4;
 		justify-content: center;
-		margin: 2rem 6rem 0;
 		max-width: @max-content-width;
 
+		.view-content {
+			margin: 2rem 6rem 0;
+		}
+
 		.view-header {
 			align-items: center;
 			display: flex;

src/modules/market/components/market-basics.jsx

@@ -17,7 +17,7 @@ const MarketBasics = p => (
 				}
 			</div>
 			<div className="market-basics-header-group-2">
-				{p.onClickToggleFavorite &&
+				{p.loginAccount && p.loginAccount.id && p.onClickToggleFavorite &&
 					<button
 						className={classnames('button unstyled favorite-button', { on: p.isFavorite })}
 						onClick={p.onClickToggleFavorite}

src/modules/market/components/market-preview.jsx

@@ -11,7 +11,13 @@ const MarketPreview = p => (
 
 			{!!p.marketLink &&
 				<div className="market-link">
-					<Link onClick={p.marketLink.onClick} className={classnames('button', p.marketLink.className)}>{p.marketLink.text}</Link>
+					<Link
+						{...p.marketLink}
+						onClick={p.marketLink.onClick}
+						className={classnames('button', p.marketLink.className)}
+					>
+						{p.marketLink.text}
+					</Link>
 				</div>
 			}
 		</div>

src/modules/markets/components/markets-list.jsx

@@ -7,6 +7,7 @@ const MarketsList = p => (
 		{(p.markets || []).map(market =>
 			<MarketPreview
 				key={market.id}
+				loginAccount={p.loginAccount}
 				{...market}
 			/>
 		)}

src/modules/markets/components/markets-view.jsx

@@ -12,6 +12,7 @@ const MarketsView = p => (
 			keywords={p.keywords}
 		/>
 		<MarketsList
+			loginAccount={p.loginAccount}
 			markets={p.markets}
 			pagination={p.pagination}
 		/>

src/modules/site/components/side-bar.jsx

@@ -5,7 +5,7 @@ const SideBar = p => (
 	<div className="side-bar">
 		<h3>All Tags</h3>
 		<div className="tags">
-			{p.tags.length && p.tags.map(tag =>
+			{!!p.tags.length && p.tags.map(tag =>
 				<Checkbox
 					key={tag.value}
 					className="tag"

src/modules/site/components/site-header.jsx

@@ -2,6 +2,7 @@ import React, { Component } from 'react';
 import classnames from 'classnames';
 
 import { ACCOUNT, MARKETS, TRANSACTIONS, MY_POSITIONS, MY_MARKETS, MY_REPORTS } from '../../site/constants/views';
+import { FAVORITES, PENDING_REPORTS } from '../../markets/constants/markets-headers';
 import { AUTH_TYPES } from '../../auth/constants/auth-types';
 import Link from '../../link/components/link';
 import AugurLogo from '../../common/components/augur-logo';
@@ -19,11 +20,27 @@ export default class SiteHeader extends Component {
 				<nav className="site-nav">
 					<div className="nav-group left-navs">
 						<Link
-							className={classnames('site-nav-link', { active: p.activeView === MARKETS })}
+							className={classnames('site-nav-link', { active: (p.activeView === MARKETS && p.marketsInfo.selectedMarketsHeader == null) })}
 							{...p.marketsLink}
 						>
 							Markets
 						</Link>
+						{!!p.loginAccount && !!p.loginAccount.id && !!p.marketsInfo.numFavorites &&
+							<Link
+								className={classnames('site-nav-link', { active: p.activeView === MARKETS && p.marketsInfo.selectedMarketsHeader === FAVORITES })}
+								{...p.favoritesLink}
+							>
+								{!!p.marketsInfo.numFavorites && p.marketsInfo.numFavorites} Favorites
+							</Link>
+						}
+						{!!p.loginAccount && !!p.loginAccount.id && !!p.marketsInfo.numPendingReports &&
+							<Link
+								className={classnames('site-nav-link', { active: p.activeView === MARKETS && p.marketsInfo.selectedMarketsHeader === PENDING_REPORTS })}
+								{...p.pendingReportsLink}
+							>
+								{!!p.marketsInfo.numPendingReports && p.marketsInfo.numPendingReports} Pending Reports
+							</Link>
+						}
 					</div>
 					<div className="nav-group branding">
 						<Link
@@ -42,7 +59,7 @@ export default class SiteHeader extends Component {
 								Portfolio
 							</Link>
 						}
-						{(!!p.loginAccount && !!p.loginAccount.id) &&
+						{!!p.loginAccount && !!p.loginAccount.id &&
 							<Link
 								className={classnames('site-nav-link', TRANSACTIONS, { active: p.activeView === TRANSACTIONS }, { working: p.isTransactionsWorking })}
 								title={p.loginAccount.realEther && `real ether: ${p.loginAccount.realEther.full}`}
@@ -51,7 +68,7 @@ export default class SiteHeader extends Component {
 								{p.transactionsTotals.title}
 							</Link>
 						}
-						{p.loginAccount.id &&
+						{!!p.loginAccount && !!p.loginAccount.id &&
 							<Link
 								className={classnames('site-nav-link', ACCOUNT, { active: p.activeView === ACCOUNT })}
 								title={p.loginAccount.realEther && `${p.loginAccount.realEther.full} real ETH`}
@@ -69,7 +86,7 @@ export default class SiteHeader extends Component {
 								/>
 							</Link>
 						}
-						{!p.loginAccount.id &&
+						{(!p.loginAccount || !p.loginAccount.id) &&
 							<Link className={classnames('site-nav-link', AUTH_TYPES[p.activeView], { active: !!AUTH_TYPES[p.activeView] })} {...p.authLink}>
 								Sign Up / Login
 							</Link>
@@ -81,7 +98,6 @@ export default class SiteHeader extends Component {
 	}
 }
 
-
 // TODO -- Prop Validations
 // SiteHeader.propTypes = {
 // 	activeView: PropTypes.string,

src/router.jsx

@@ -11,6 +11,7 @@ import AccountPage from './modules/account/components/account-page';
 import PortfolioView from './modules/portfolio/components/portfolio-view';
 import TransactionsPage from './modules/transactions/components/transactions-page';
 import LoginMessagePage from './modules/login-message/components/login-message-page';
+import CoreStats from './modules/common/components/core-stats';
 
 import { ACCOUNT, MAKE, TRANSACTIONS, M, MY_POSITIONS, MY_MARKETS, MY_REPORTS, LOGIN_MESSAGE, MARKETS } from './modules/site/constants/views';
 import { REGISTER, LOGIN, LOGOUT, IMPORT } from './modules/auth/constants/auth-types';
@@ -22,13 +23,15 @@ export default class Router extends Component {
 		super(props);
 
 		this.state = {
-			pageMarginTop: 0
+			pageMarginTop: 0,
+			isSideBarVisible: false
 		};
 
 		this.shouldComponentUpdate = shouldComponentUpdatePure;
 
 		this.handleResize = this.handleResize.bind(this);
 		this.currentRoute = this.currentRoute.bind(this);
+		this.shouldDisplaySideBar = this.shouldDisplaySideBar.bind(this);
 	}
 
 	componentDidMount() {
@@ -37,6 +40,10 @@ export default class Router extends Component {
 		this.handleResize();
 	}
 
+	componentDidUpdate() {
+		this.shouldDisplaySideBar();
+	}
+
 	handleResize() {
 		if (this.siteHeader.siteHeader.offsetHeight !== this.state.pageMarginTop) {
 			window.requestAnimationFrame(() => {
@@ -47,80 +54,93 @@ export default class Router extends Component {
 		}
 	}
 
-	currentRoute() {
-		const p = this.props;
+	shouldDisplaySideBar() {
+		const currentRoute = this.currentRoute();
+
+		if (currentRoute.props.name === MARKETS) {
+			this.setState({ isSideBarVisible: true });
+		} else {
+			this.setState({ isSideBarVisible: false });
+		}
+	}
 
-		let node;
+	currentRoute(routeProps) {
+		const p = {
+			...this.props,
+			...routeProps
+		};
 
 		switch (p.activeView) {
 		case REGISTER:
 		case LOGIN:
 		case IMPORT:
 		case LOGOUT:
-			node = <AuthPage authForm={p.authForm} />;
-			break;
-
+			return (
+				<AuthPage
+					className={p.className}
+					authForm={p.authForm}
+				/>
+			);
 		case ACCOUNT:
-			node = (
+			return (
 				<AccountPage
+					className={p.className}
 					loginMessageLink={p.links.loginMessageLink}
 					account={p.loginAccount}
 					onChangePass={p.loginAccount.onChangePass}
 					authLink={(p.links && p.links.authLink) || null}
 				/>
 			);
-			break;
-
 		case MAKE:
-			node = (
-				<CreateMarketPage createMarketForm={p.createMarketForm} />
+			return (
+				<CreateMarketPage
+					className={p.className}
+					createMarketForm={p.createMarketForm}
+				/>
 			);
-			break;
-
 		case TRANSACTIONS:
-			node = (
+			return (
 				<TransactionsPage
+					className={p.className}
 					transactions={p.transactions}
 					transactionsTotals={p.transactionsTotals}
 				/>
 			);
-			break;
-
 		case M:
-			node = (
+			return (
 				<MarketPage
+					className={p.className}
 					market={p.market}
 					marketDataAge={p.marketDataAge}
 					selectedOutcome={p.selectedOutcome}
 					orderCancellation={p.orderCancellation}
 					marketDataUpdater={p.marketDataUpdater}
 					numPendingReports={p.marketsTotals.numPendingReports}
 					isTradeCommitLocked={p.tradeCommitLock.isLocked}
-
 				/>
 			);
-			break;
-
 		case MY_POSITIONS:
 		case MY_MARKETS:
 		case MY_REPORTS:
-			node = (
+			return (
 				<PortfolioView
 					{...p.portfolio}
+					className={p.className}
 					activeView={p.activeView}
 				/>
 			);
-			break;
-
 		case LOGIN_MESSAGE:
-			node = (
+			return (
 				<LoginMessagePage
+					className={p.className}
 					marketsLink={(p.links && p.links.marketsLink) || null}
-				/>);
-			break;
+				/>
+			);
 		default:
-			node = (
+			return (
 				<MarketsView
+					name={MARKETS}
+					className={p.className}
 					loginAccount={p.loginAccount}
 					createMarketLink={(p.links || {}).createMarketLink}
 					markets={p.markets}
@@ -131,15 +151,14 @@ export default class Router extends Component {
 					keywords={p.keywords}
 				/>
 			);
-			break;
 		}
-
-		return node;
 	}
 
 	render() {
 		const p = this.props;
-		const currentRoute = this.currentRoute();
+		const s = this.state;
+
+		const CurrentRoute = this.currentRoute;
 
 		const pageContainerStyles = {
 			marginTop: this.state.pageMarginTop
@@ -151,7 +170,10 @@ export default class Router extends Component {
 			positionsSummary: p.positionsSummary,
 			transactionsTotals: p.transactionsTotals,
 			isTransactionsWorking: p.isTransactionsWorking,
+			marketsInfo: p.marketsHeader,
 			marketsLink: (p.links && p.links.marketsLink) || undefined,
+			favoritesLink: (p.links && p.links.favoritesLink) || undefined,
+			pendingReportsLink: (p.links && p.links.pendingReportsLink) || undefined,
 			transactionsLink: (p.links && p.links.transactionsLink) || undefined,
 			authLink: (p.links && p.links.authLink) || undefined,
 			accountLink: (p.links && p.links.accountLink) || undefined,
@@ -172,11 +194,12 @@ export default class Router extends Component {
 							className="view-container"
 							style={pageContainerStyles}
 						>
-							{p.activeView === MARKETS &&
+							{s.isSideBarVisible &&
 								<SideBar tags={p.tags} />
 							}
 							<main className="view-content-container">
-								{currentRoute}
+								<CoreStats coreStats={p.coreStats} />
+								<CurrentRoute className="view-content" />
 							</main>
 						</div>
 						<SiteFooter />