augur-ui-react-components - npm Package Compare versions

Comparing version 3.6.9 to 3.6.10

package.json

 {
   "name": "augur-ui-react-components",
-  "version": "3.6.9",
+  "version": "3.6.10",
   "description": "Augur UI React Components",
@@ -5,0 +5,0 @@ "author": "Augur Project",

src/modules/app/components/app.jsx

@@ -27,3 +27,4 @@ import React, { Component, PropTypes } from 'react';
 			isChatCollapsed: true,
-			doScrollTop: false
+			doScrollTop: false,
+			currentRoute: null
 		};
@@ -33,25 +34,14 @@
 
-		this.shouldDisplaySideBar = this.shouldDisplaySideBar.bind(this);
 		this.toggleChat = this.toggleChat.bind(this);
+		this.setSidebarAllowed = this.setSidebarAllowed.bind(this);
 	}
 
-	componentDidMount() {
-		this.shouldDisplaySideBar();
-	}
-
 	componentDidUpdate() {
 		handleScrollTop(this.props.url);
-		this.shouldDisplaySideBar();
 	}
 
-	shouldDisplaySideBar() {
-		const currentRoute = Routes(this.props); // eslint-disable-line new-cap
-
-		if (currentRoute.props.sideBarAllowed) {
-			this.setState({ isSideBarAllowed: true });
-		} else {
-			this.setState({ isSideBarAllowed: false });
-		}
+	// Sidebar display related methods
+	setSidebarAllowed(isSideBarAllowed) {
+		this.setState({ isSideBarAllowed });
 	}
-
 	toggleSideBar() {
@@ -61,2 +51,3 @@ this.setState({ isSideBarCollapsed: !this.state.isSideBarCollapsed });
 
+	// chat display
 	toggleChat() {
@@ -127,3 +118,6 @@ this.setState({ isChatCollapsed: !this.state.isChatCollapsed });
 									</div>
-									<Routes {...p} />
+									<Routes
+										{...p}
+										setSidebarAllowed={this.setSidebarAllowed}
+									/>
 								</div>
@@ -130,0 +124,0 @@ </div>

src/modules/app/components/routes.jsx

@@ -1,2 +0,2 @@
-import React from 'react';
+import React, { Component } from 'react';
 
@@ -16,120 +16,134 @@ import MarketsView from 'modules/markets/components/markets-view';
 import getValue from 'utils/get-value';
+import { shouldComponentUpdateOnStateChangeOnly } from 'utils/should-component-update-pure';
 
-const Routes = (p) => {
-	let viewProps = null;
+export default class Routes extends Component {
+	constructor(props) {
+		super(props);
 
-	switch (p.activeView) {
-		case REGISTER:
-		case LOGIN:
-		case IMPORT:
-		case LOGOUT: {
-			viewProps = {
-				authForm: p.authForm
-			};
+		this.state = {
+			viewProps: null,
+			viewComponent: null
+		};
 
-			return (
-				<AuthView {...viewProps} />
-			);
-		}
-		case ACCOUNT: {
-			viewProps = {
-				loginMessageLink: p.links.loginMessageLink,
-				account: p.loginAccount,
-				settings: p.settings,
-				onUpdateSettings: p.loginAccount.onUpdateAccountSettings,
-				onChangePass: p.loginAccount.onChangePass,
-				authLink: (p.links && p.links.authLink) || null,
-				onAirbitzManageAccount: p.loginAccount.onAirbitzManageAccount
-			};
+		this.shouldComponentUpdate = shouldComponentUpdateOnStateChangeOnly;
+		this.handleRouting = this.handleRouting.bind(this);
+	}
 
-			return (
-				<AccountView {...viewProps} />
-			);
-		}
-		case TRANSACTIONS: {
-			viewProps = {
-				transactions: p.transactions,
-				transactionsTotals: p.transactionsTotals
-			};
+	componentWillMount() {
+		this.handleRouting(this.props);
+	}
 
-			return (
-				<TransactionsView {...viewProps} />
-			);
-		}
-		case MY_POSITIONS:
-		case MY_MARKETS:
-		case MY_REPORTS: {
-			viewProps = {
-				activeView: p.activeView,
-				settings: p.settings,
-				branch: p.branch,
-				...p.portfolio
-			};
+	componentWillReceiveProps(nextProps) {
+		this.handleRouting(nextProps);
+	}
 
-			return (
-				<PortfolioView {...viewProps} />
-			);
-		}
-		case LOGIN_MESSAGE: {
-			viewProps = {
-				marketsLink: (p.links && p.links.marketsLink) || null
-			};
+	handleRouting(p) {
+		let viewProps;
+		let viewComponent;
 
-			return (
-				<LoginMessageView {...viewProps} />
-			);
+		switch (p.activeView) {
+			case REGISTER:
+			case LOGIN:
+			case IMPORT:
+			case LOGOUT:
+				viewProps = {
+					authForm: p.authForm
+				};
+				viewComponent = <AuthView {...viewProps} />;
+				break;
+			case ACCOUNT:
+				viewProps = {
+					loginMessageLink: p.links.loginMessageLink,
+					account: p.loginAccount,
+					settings: p.settings,
+					onUpdateSettings: p.loginAccount.onUpdateAccountSettings,
+					onChangePass: p.loginAccount.onChangePass,
+					authLink: (p.links && p.links.authLink) || null,
+					onAirbitzManageAccount: p.loginAccount.onAirbitzManageAccount
+				};
+				viewComponent = <AccountView {...viewProps} />;
+				break;
+			case TRANSACTIONS:
+				viewProps = {
+					transactions: p.transactions,
+					transactionsTotals: p.transactionsTotals
+				};
+				viewComponent =	<TransactionsView {...viewProps} />;
+				break;
+			case MY_POSITIONS:
+			case MY_MARKETS:
+			case MY_REPORTS: {
+				viewProps = {
+					activeView: p.activeView,
+					settings: p.settings,
+					branch: p.branch,
+					...p.portfolio
+				};
+				viewComponent = <PortfolioView {...viewProps} />;
+				break;
+			}
+			case LOGIN_MESSAGE: {
+				viewProps = {
+					marketsLink: (p.links && p.links.marketsLink) || null
+				};
+				viewComponent = <LoginMessageView {...viewProps} />;
+				break;
+			}
+			case MAKE: {
+				viewProps = {
+					createMarketForm: p.createMarketForm
+				};
+				viewComponent = <CreateMarketView {...viewProps} />;
+				break;
+			}
+			case M: {
+				viewProps = {
+					logged: getValue(p, 'loginAccount.address'),
+					market: p.market,
+					settings: p.settings,
+					marketDataNavItems: p.marketDataNavItems,
+					marketUserDataNavItems: p.marketUserDataNavItems,
+					marketDataAge: p.marketDataAge,
+					selectedOutcome: p.selectedOutcome,
+					orderCancellation: p.orderCancellation,
+					marketDataUpdater: p.marketDataUpdater,
+					numPendingReports: p.marketsTotals.numPendingReports,
+					isTradeCommitLocked: p.tradeCommitLock.isLocked,
+					scalarShareDenomination: p.scalarShareDenomination,
+					marketReportingNavItems: p.marketReportingNavItems
+				};
+				viewComponent = <MarketView {...viewProps} />;
+				break;
+			}
+			default: {
+				viewProps = {
+					isSideBarAllowed: true,
+					loginAccount: p.loginAccount,
+					createMarketLink: (p.links || {}).createMarketLink,
+					markets: p.markets,
+					marketsHeader: p.marketsHeader,
+					favoriteMarkets: p.favoriteMarkets,
+					pagination: p.pagination,
+					filterSort: p.filterSort,
+					keywords: p.keywords,
+					branch: p.branch
+				};
+				viewComponent = <MarketsView {...viewProps} />;
+			}
 		}
-		case MAKE: {
-			viewProps = {
-				createMarketForm: p.createMarketForm
-			};
 
-			return (
-				<CreateMarketView {...viewProps} />
-			);
+		if (viewProps.isSideBarAllowed) {
+			p.setSidebarAllowed(true);
+		} else {
+			p.setSidebarAllowed(false);
 		}
-		case M: {
-			const logged = getValue(p, 'loginAccount.address');
 
-			viewProps = {
-				logged,
-				market: p.market,
-				settings: p.settings,
-				marketDataNavItems: p.marketDataNavItems,
-				marketUserDataNavItems: p.marketUserDataNavItems,
-				marketDataAge: p.marketDataAge,
-				selectedOutcome: p.selectedOutcome,
-				orderCancellation: p.orderCancellation,
-				marketDataUpdater: p.marketDataUpdater,
-				numPendingReports: p.marketsTotals.numPendingReports,
-				isTradeCommitLocked: p.tradeCommitLock.isLocked,
-				scalarShareDenomination: p.scalarShareDenomination,
-				marketReportingNavItems: p.marketReportingNavItems
-			};
+		this.setState({ viewProps, viewComponent });
+	}
 
-			return (
-				<MarketView {...viewProps} />
-			);
-		}
-		default: {
-			viewProps = {
-				sideBarAllowed: true,
-				loginAccount: p.loginAccount,
-				createMarketLink: (p.links || {}).createMarketLink,
-				markets: p.markets,
-				marketsHeader: p.marketsHeader,
-				favoriteMarkets: p.favoriteMarkets,
-				pagination: p.pagination,
-				filterSort: p.filterSort,
-				keywords: p.keywords,
-				branch: p.branch
-			};
+	render() {
+		const s = this.state;
 
-			return (
-				<MarketsView {...viewProps} />
-			);
-		}
+		return <div>{s.viewComponent}</div>;
 	}
-};
-
-export default Routes;
+}

src/utils/should-component-update-pure.js

@@ -9,3 +9,8 @@ export default function (nextProps, nextState) {
 
+export function shouldComponentUpdateOnStateChangeOnly(nextProps, nextState) {
+	return isShallowUnEqual(nextState, this.state);
+}
+
 function isShallowUnEqual(obj1, obj2, log) {
+	// both arguments reference the same object
 	if (obj1 === obj2) {
@@ -15,3 +20,4 @@ return false;
 
-	if (typeof obj1 !== 'object' || obj1 === null || typeof obj2 !== 'object' || obj2 === null) {
+	// arguments are either not objects or undefined/null
+	if (typeof obj1 !== 'object' || obj1 == null || typeof obj2 !== 'object' || obj2 == null) {
 		return true;
@@ -24,2 +30,3 @@ }
 
+	// keys don't match
 	if (keysALen !== keysB.length) {
@@ -30,2 +37,3 @@ return true;
 	for (let i = 0; i < keysALen; i++) {
+		// actual values are different + not functions
 		if (obj1[keysA[i]] !== obj2[keysA[i]] && typeof obj1[keysA[i]] !== 'function') {
@@ -37,3 +45,4 @@ log && console.log('------->', keysA[i], obj1[keysA[i]], obj2[keysA[i]]);
 
+	// nothing needs to be updated
 	return false;
 }

No alert changes

Improved metrics

Total package byte prevSize

2311334

increased by0.19%

Lines of code

43156

increased by0.17%

No dependency changes