#29 Improve open orders:

- add cancel all orders/asks/bids buttons - add assertions
tinybike · Jul 13, 2016 · 9497d66 · 9497d66
1 parent b26ccec
commit 9497d66
Show file tree

Hide file tree

Showing 8 changed files with 137 additions and 44 deletions.
diff --git a/build/components.jsx b/build/components.jsx
diff --git a/build/styles.css b/build/styles.css
diff --git a/src/modules/market/components/market-page.jsx b/src/modules/market/components/market-page.jsx
@@ -75,7 +75,7 @@ export default class MarketPage extends Component {
 					);
 				}
 
-				if (p.market.openOrders && p.market.openOrders.length > 0) {
+				if (p.market.openOrders && p.market.openOrders.items.length > 0) {
 					nodes.push(
 						<OpenOrders
 							key="open-orders"

diff --git a/src/modules/market/components/open-orders.jsx b/src/modules/market/components/open-orders.jsx
@@ -8,28 +8,49 @@ const OpenOrders = (p) => (
 			<tbody>
 				<tr>
 					<th>Type</th>
-					<th>Qty.</th>
+					<th>Shares</th>
 					<th>Price</th>
 					<th>Matched</th>
 					<th>Unmatched</th>
+					<th>&nbsp;</th>
 				</tr>
 				{
-					p.openOrders.map(openOrder => (
+					p.openOrders.items.map(openOrder => (
 						<OpenOrder
 							key={openOrder.id}
 							{...openOrder}
-							onCancelOrder={p.onCancelOrder}
+							onCancelOrder={p.openOrders.onCancelOrder}
 						/>
 						)
 					)
 				}
 			</tbody>
+			<tfoot>
+				{
+					p.openOrders.items.length > 0 &&
+						<button className="button" onClick={(event) => { p.openOrders.onCancelAllOrders(); }}>
+							Cancel all
+						</button>
+				}
+				{
+					p.openOrders.bidsCount > 0 &&
+						<button className="button" onClick={(event) => { p.openOrders.onCancelAllBids(); }}>
+							Cancel all bids
+						</button>
+				}
+				{
+					p.openOrders.asksCount > 0 &&
+						<button className="button" onClick={(event) => { p.openOrders.onCancelAllAsks(); }}>
+							Cancel all asks
+						</button>
+				}
+			</tfoot>
 		</table>
 	</div>
 );
 
 OpenOrders.propTypes = {
-	openOrders: React.PropTypes.array
+	openOrders: React.PropTypes.object
 };
 
 export default OpenOrders;
diff --git a/src/modules/open-orders/components/open-order.jsx b/src/modules/open-orders/components/open-order.jsx
@@ -3,26 +3,35 @@
  */
 
 import React from 'react';
+import classnames from 'classnames';
 
 import ValueDenomination from '../../common/components/value-denomination';
 
 const OpenOrder = (p) => (
-	<tr className="open-order">
+	<tr className={classnames('open-order', { isCancelling: p.isCancelling })}>
 		<td>
 			{p.type}
 		</td>
 		<td>
-			<ValueDenomination {...p.originalShares}/>
+			<ValueDenomination {...p.originalShares} />
 		</td>
 		<td>
-			<ValueDenomination {...p.avgPrice}/>
+			<ValueDenomination {...p.avgPrice} />
 		</td>
 		<td>
-			<ValueDenomination {...p.matchedShares}/>
+			<ValueDenomination {...p.matchedShares} />
 		</td>
 		<td>
-			<ValueDenomination {...p.unmatchedShares}/>
-			<button className="cancel-order-action" disabled={p.isCancelling} title="Cancel order" onClick={p.onCancelOrder(p.id)}>x</button>
+			<ValueDenomination {...p.unmatchedShares} />
+		</td>
+		<td>
+			<button
+				className="button cancel-order-action"
+				disabled={p.isCancelling}
+				title="Cancel order"
+				onClick={(event) => { p.onCancelOrder(p.id); }}
+			>x</button>
+
 		</td>
 	</tr>
 );
@@ -37,4 +46,4 @@ OpenOrder.propTypes = {
 	isCancelling: React.PropTypes.bool
 };
 
-export default OpenOrder;
+export default OpenOrder;
diff --git a/src/modules/open-orders/less/open-order.less b/src/modules/open-orders/less/open-order.less
@@ -1,3 +1,8 @@
+
 .open-order:not(:hover) .cancel-order-action {
   display: none;
 }
+
+.open-order.isCancelling {
+  text-decoration: line-through;
+}
diff --git a/src/selectors/markets.js b/src/selectors/markets.js
@@ -36,7 +36,7 @@ function makeMarkets(numMarkets = 25) {
 			makerFeePercent: makeNumber(randomInt(1, 5), '%', true),
 			volume: makeNumber(randomInt(0, 10000), 'shares', true),
 			isOpen: Math.random() > 0.1,
-			isPendingReport: false,
+			isPendingReport: Math.random() < 0.5,
 			marketLink: {
 				text: 'Trade',
 				className: 'trade',
@@ -129,8 +129,31 @@ function makeMarkets(numMarkets = 25) {
 			}
 		];
 
-		m.openOrders = [
-			{
+		m.openOrders = {
+			onCancelOrder: (orderId) => {
+				console.log('cancelling order %o', orderId);
+				setTimeout(() => {
+					require('../selectors').market.openOrders.items.find(openOrder => openOrder.id === orderId).isCancelling = true;
+					require('../selectors').update({});
+					setTimeout(() => {
+						const index = require('../selectors').market.openOrders.items.findIndex(openOrder => openOrder.id === orderId);
+						require('../selectors').market.openOrders.items.splice(index, 1);
+						require('../selectors').update({});
+					}, 2000);
+				}, 1);
+			},
+			onCancelAllOrders: () => {
+				console.log('todo: onCancelAllOrders');
+			},
+			onCancelAllBids: () => {
+				console.log('todo: onCancelAllBids');
+			},
+			onCancelAllAsks: () => {
+				console.log('todo: onCancelAllAsks');
+			},
+			bidsCount: 2,
+			asksCount: 1,
+			items: [{
 				id: 'order1',
 				type: 'sell',
 				originalShares: makeNumber(5, 'shares'),
@@ -159,14 +182,7 @@ function makeMarkets(numMarkets = 25) {
 				unmatchedShares: makeNumber(2, 'shares'),
 				outcome: 'outcomeasdf123',
 				owner: '0x45a153fdd97836c2b349a5f53970dc44b0ef1efa'
-			},
-		];
-
-		m.onCancelOrder = (orderId) => {
-			setTimeout(() => {
-				require('../selectors').market.openOrders.find(openOrder => openOrder.id === orderId).isCancelling = true;
-				require('../selectors').update({});
-			}, 1);
+			}]
 		};
 
 		// positions summary

diff --git a/test/assertions/market.js b/test/assertions/market.js
@@ -499,7 +499,49 @@ export default function(market) {
 		});
 
 		describe('openOrders', () => {
+			it('should exist', () => {
+				assert.isDefined(market.openOrders);
+			});
+
+			it('should be object', () => {
+				assert.isObject(market.openOrders);
+			});
 
+			describe('onCancelOrder', () => {
+				it('should be function', () => {
+					assert.isFunction(market.openOrders.onCancelOrder);
+				});
+			});
+
+			describe('onCancelAllOrders', () => {
+				it('should be function', () => {
+					assert.isFunction(market.openOrders.onCancelAllOrders);
+				});
+			});
+
+			describe('onCancelAllBids', () => {
+				it('should be function', () => {
+					assert.isFunction(market.openOrders.onCancelAllBids);
+				});
+			});
+
+			describe('onCancelAllAsks', () => {
+				it('should be function', () => {
+					assert.isFunction(market.openOrders.onCancelAllAsks);
+				});
+			});
+
+			describe('items', () => {
+				assert.isArray(market.openOrders.items);
+			});
+
+			describe('asksCount', () => {
+				assert.isNumber(market.openOrders.asksCount);
+			});
+
+			describe('bidsCount', () => {
+				assert.isNumber(market.openOrders.bidsCount);
+			});
 		});
 
 		describe('priceTimeSeries', () => {