#29 Open orders section changes:

- remove collapsible section - display number of open orders in title - make the section working without data - remove fields for which there are no data - add assertions
tinybike · Jul 22, 2016 · bca0443 · bca0443
1 parent dceaae2
commit bca0443
Show file tree

Hide file tree

Showing 10 changed files with 150 additions and 111 deletions.
diff --git a/build/components.jsx b/build/components.jsx
diff --git a/src/app.jsx b/src/app.jsx
@@ -94,8 +94,6 @@ export default function (appElement, selectors) {
 				sideOptions={p.sideOptions}
 				updateSelectedOutcome={p.selectedOutcome.updateSelectedOutcome}
 				selectedOutcomeID={p.selectedOutcome.selectedOutcomeID}
-				updateSelectedUserOpenOrdersGroup={p.selectedUserOpenOrdersGroup.updateSelectedUserOpenOrdersGroup}
-				selectedUserOpenOrdersGroupID={p.selectedUserOpenOrdersGroup.selectedUserOpenOrdersGroupID}
 				cancelOrder={p.cancelOrder}
 				market={p.market}
 				numPendingReports={p.marketsTotals.numPendingReports}

diff --git a/src/modules/market/components/market-page.jsx b/src/modules/market/components/market-page.jsx
@@ -83,8 +83,7 @@ export default class MarketPage extends Component {
 					<OpenOrders
 						key="open-orders"
 						outcomes={p.market.outcomes}
-						selectedUserOpenOrdersGroupID={p.selectedUserOpenOrdersGroupID}
-						updateSelectedUserOpenOrdersGroup={p.updateSelectedUserOpenOrdersGroup}
+						userOpenOrdersSummary={p.market.userOpenOrdersSummary}
 						cancelOrder={p.cancelOrder}
 					/>
 				);

diff --git a/src/modules/market/components/open-orders.jsx b/src/modules/market/components/open-orders.jsx
@@ -2,32 +2,35 @@ import React from 'react';
 
 import OpenOrdersGroup from '../../open-orders/components/open-orders-group';
 
-const OpenOrders = (p) => (
-	<div className="open-orders">
-		<h2>Open orders</h2>
-		{
-			p.outcomes.map(outcome => {
-				if (outcome.userOpenOrders.length === 0) {
-					return null;
-				}
+const OpenOrders = (p) => {
+	const hasOpenOrders = p.userOpenOrdersSummary != null && p.userOpenOrdersSummary.openOrdersCount > 0;
+	const title = hasOpenOrders ? `${p.userOpenOrdersSummary.openOrdersCount} Open Orders` : 'No Open Orders';
+	return (
+		<div className="open-orders">
+			<h2>{title}</h2>
+			{
+				p.outcomes.map(outcome => {
+					if (outcome.userOpenOrders == null || outcome.userOpenOrders.length === 0) {
+						return null;
+					}
 
-				return (
-					<OpenOrdersGroup
-						key={outcome.id}
-						id={outcome.id}
-						name={outcome.name}
-						userOpenOrders={outcome.userOpenOrders}
-						selectedUserOpenOrdersGroupID={p.selectedUserOpenOrdersGroupID}
-						updateSelectedUserOpenOrdersGroup={p.updateSelectedUserOpenOrdersGroup}
-						cancelOrder={p.cancelOrder}
-					/>
-				);
-			})
-		}
-	</div>
-);
+					return (
+						<OpenOrdersGroup
+							key={outcome.id}
+							id={outcome.id}
+							name={outcome.name}
+							userOpenOrders={outcome.userOpenOrders}
+							cancelOrder={p.cancelOrder}
+						/>
+					);
+				})
+			}
+		</div>
+	);
+};
 
 OpenOrders.propTypes = {
+	userOpenOrdersSummary: React.PropTypes.object,
 	outcomes: React.PropTypes.array,
 	updateSelectedUserOpenOrdersGroup: React.PropTypes.func.isRequired,
 	cancelOrder: React.PropTypes.func.isRequired,

diff --git a/src/modules/open-orders/components/open-order.jsx b/src/modules/open-orders/components/open-order.jsx
@@ -10,19 +10,16 @@ import ValueDenomination from '../../common/components/value-denomination';
 const OpenOrder = (p) => (
 	<tr className={classnames('open-order', { isDisabled: p.isCancelling || p.isCancelled })}>
 		<td>
-			{p.type}
-		</td>
-		<td>
-			<ValueDenomination {...p.originalShares} />
+			{p.outcomeName}
 		</td>
 		<td>
-			<ValueDenomination {...p.avgPrice} />
+			{p.type}
 		</td>
 		<td>
-			<ValueDenomination {...p.matchedShares} />
+			<ValueDenomination {...p.unmatchedShares} />
 		</td>
 		<td>
-			<ValueDenomination {...p.unmatchedShares} />
+			<ValueDenomination {...p.avgPrice} />
 		</td>
 		<td>
 			<button
@@ -39,10 +36,9 @@ const OpenOrder = (p) => (
 OpenOrder.propTypes = {
 	id: React.PropTypes.string.isRequired,
 	marketID: React.PropTypes.string.isRequired,
+	outcomeName: React.PropTypes.string.isRequired,
 	type: React.PropTypes.string.isRequired,
-	originalShares: React.PropTypes.object.isRequired,
 	avgPrice: React.PropTypes.object.isRequired,
-	matchedShares: React.PropTypes.object.isRequired,
 	unmatchedShares: React.PropTypes.object.isRequired,
 	isCancelling: React.PropTypes.bool.isRequired,
 	isCancelled: React.PropTypes.bool.isRequired,

diff --git a/src/modules/open-orders/components/open-orders-group.jsx b/src/modules/open-orders/components/open-orders-group.jsx
@@ -4,50 +4,39 @@
 
 import React from 'react';
 
-import Collapse from '../../common/components/collapse';
-import Clickable from '../../common/components/clickable';
-
 import OpenOrder from '../../open-orders/components/open-order';
 
 const OpenOrdersGroup = (p) => (
 	<div>
-		<Clickable component="h3" onClick={(event) => p.updateSelectedUserOpenOrdersGroup(p.id)}>
-			{p.name}
-		</Clickable>
-
-		<Collapse isOpen={p.id === p.selectedUserOpenOrdersGroupID}>
-			<table>
-				<tbody>
-					<tr>
-						<th>Type</th>
-						<th>Shares</th>
-						<th>Price</th>
-						<th>Matched</th>
-						<th>Unmatched</th>
-						<th>&nbsp;</th>
-					</tr>
-					{
-						p.userOpenOrders.map(openOrder => (
-							<OpenOrder
-								key={openOrder.id}
-								{...openOrder}
-								cancelOrder={p.cancelOrder}
-							/>
-							)
+		<table>
+			<tbody>
+				<tr>
+					<th>Outcome</th>
+					<th>Type</th>
+					<th>Shares</th>
+					<th>Price</th>
+					<th>&nbsp;</th>
+				</tr>
+				{
+					p.userOpenOrders.map(openOrder => (
+						<OpenOrder
+							key={openOrder.id}
+							outcomeName={p.name}
+							{...openOrder}
+							cancelOrder={p.cancelOrder}
+						/>
 						)
-					}
-				</tbody>
-			</table>
-		</Collapse>
+					)
+				}
+			</tbody>
+		</table>
 	</div>
 );
 
 OpenOrdersGroup.propTypes = {
 	userOpenOrders: React.PropTypes.arrayOf(React.PropTypes.object).isRequired,
 	name: React.PropTypes.string.isRequired,
-	updateSelectedUserOpenOrdersGroup: React.PropTypes.func.isRequired,
-	cancelOrder: React.PropTypes.func.isRequired,
-	selectedUserOpenOrdersGroupID: React.PropTypes.string
+	cancelOrder: React.PropTypes.func.isRequired
 };
 
 export default OpenOrdersGroup;
diff --git a/src/selectors.js b/src/selectors.js
@@ -10,7 +10,6 @@ import marketsTotals from './selectors/markets-totals';
 import positionsMarkets from './selectors/positions-markets';
 import positionsSummary from './selectors/positions-summary';
 import url from './selectors/url';
-import selectedUserOpenOrdersGroup from './selectors/selected-user-open-orders-group';
 
 import { BID, ASK } from './modules/transactions/constants/types';
 
@@ -27,8 +26,7 @@ const selectors = {
 	marketsTotals,
 	positionsSummary,
 	positionsMarkets,
-	url,
-	selectedUserOpenOrdersGroup
+	url
 };
 
 // add update helper fn to selectors object

diff --git a/src/selectors/markets.js b/src/selectors/markets.js
@@ -143,6 +143,12 @@ function makeMarkets(numMarkets = 25) {
 			gainPercent: makeNumber(15, '%')
 		};
 
+		m.userOpenOrdersSummary = {
+			openOrdersCount: m.outcomes.reduce((openOrdersCount, outcome) => (
+				openOrdersCount + outcome.userOpenOrders.length
+			), 0)
+		};
+
 		// report
 		m.report = {
 			isUnethical: true,
@@ -315,9 +321,7 @@ function makeMarkets(numMarkets = 25) {
 						marketID: m.id,
 						isCancelling: false,
 						isCancelled: false,
-						originalShares: makeNumber(5, 'shares'),
 						avgPrice: makeNumber(0.7, 'ether'),
-						matchedShares: makeNumber(3, 'shares'),
 						unmatchedShares: makeNumber(2, 'shares'),
 						outcome: 'outcomeasdf123',
 						owner: '0x45a153fdd97836c2b349a5f53970dc44b0ef1efa'
@@ -328,9 +332,7 @@ function makeMarkets(numMarkets = 25) {
 						marketID: m.id,
 						isCancelling: false,
 						isCancelled: false,
-						originalShares: makeNumber(5, 'shares'),
 						avgPrice: makeNumber(0.7, 'ether'),
-						matchedShares: makeNumber(3, 'shares'),
 						unmatchedShares: makeNumber(2, 'shares'),
 						outcome: 'outcomeasdf123',
 						owner: '0x45a153fdd97836c2b349a5f53970dc44b0ef1efa'
@@ -341,9 +343,7 @@ function makeMarkets(numMarkets = 25) {
 						marketID: m.id,
 						isCancelling: false,
 						isCancelled: false,
-						originalShares: makeNumber(5, 'shares'),
 						avgPrice: makeNumber(0.7, 'ether'),
-						matchedShares: makeNumber(3, 'shares'),
 						unmatchedShares: makeNumber(2, 'shares'),
 						outcome: 'outcomeasdf123',
 						owner: '0x45a153fdd97836c2b349a5f53970dc44b0ef1efa'

diff --git a/src/selectors/selected-user-open-orders-group.js b/src/selectors/selected-user-open-orders-group.js
diff --git a/test/assertions/market.js b/test/assertions/market.js
@@ -187,6 +187,65 @@ export default function (market) {
 					assert.isDefined(userOpenOrders);
 					assert.isArray(userOpenOrders);
 				});
+
+				it(`market.outcomes[${i}].userOpenOrders`, () => {
+					assert.isDefined(userOpenOrders);
+					assert.isArray(userOpenOrders);
+				});
+
+				userOpenOrders.forEach((openOrder, j) => {
+					it(`market.outcomes[${i}].userOpenOrders[${j}]`, () => {
+						assert.isDefined(openOrder);
+						assert.isObject(openOrder);
+					});
+
+					it(`market.outcomes[${i}].userOpenOrders[${j}].id`, () => {
+						assert.isDefined(openOrder.id);
+						assert.isObject(openOrder.id);
+					});
+
+					it(`market.outcomes[${i}].userOpenOrders[${j}].marketID`, () => {
+						assert.isDefined(openOrder.marketID);
+						assert.isString(openOrder.marketID);
+					});
+
+					it(`market.outcomes[${i}].userOpenOrders[${j}].outcomeName`, () => {
+						assert.isDefined(openOrder.outcomeName);
+						assert.isString(openOrder.outcomeName);
+					});
+
+					it(`market.outcomes[${i}].userOpenOrders[${j}].type`, () => {
+						assert.isDefined(openOrder.type);
+						assert.isString(openOrder.type);
+					});
+
+					it(`market.outcomes[${i}].userOpenOrders[${j}].avgPrice`, () => {
+						assert.isDefined(openOrder.avgPrice);
+						assert.isObject(openOrder.avgPrice);
+						assertFormattedNumber(openOrder.avgPrice);
+					});
+
+					it(`market.outcomes[${i}].userOpenOrders[${j}].unmatchedShares`, () => {
+						assert.isDefined(openOrder.unmatchedShares);
+						assert.isObject(openOrder.unmatchedShares);
+						assertFormattedNumber(openOrder.unmatchedShares);
+					});
+
+					it(`market.outcomes[${i}].userOpenOrders[${j}].isCancelling`, () => {
+						assert.isDefined(openOrder.isCancelling);
+						assert.isBoolean(openOrder.isCancelling);
+					});
+
+					it(`market.outcomes[${i}].userOpenOrders[${j}].isCancelled`, () => {
+						assert.isDefined(openOrder.isCancelled);
+						assert.isBoolean(openOrder.isCancelled);
+					});
+
+					it(`market.outcomes[${i}].userOpenOrders[${j}].cancelOrder`, () => {
+						assert.isDefined(openOrder.cancelOrder);
+						assert.isFunction(openOrder.cancelOrder);
+					});
+				});
 			});
 		});
 
@@ -334,7 +393,16 @@ export default function (market) {
 			assert.isArray(market.priceTimeSeries);
 		});
 
+		const userOpenOrdersSummary = market.userOpenOrdersSummary;
+		it('market.userOpenOrdersSummary', () => {
+			assert.isDefined(market.userOpenOrdersSummary);
+			assert.isObject(market.userOpenOrdersSummary);
+		});
 
+		it('market.userOpenOrdersSummary.openOrdersCount', () => {
+			assert.isDefined(market.userOpenOrdersSummary.openOrdersCount);
+			assert.isNumber(market.userOpenOrdersSummary.openOrdersCount);
+		});
 
 		const positionsSummary = market.positionsSummary;
 		it('market.positionSummary', () => {