#29 Reorganize market open orders code:

 - add "empty" checks
 - clean CSS

src/modules/market/components/market-open-orders.jsx

@@ -0,0 +1,34 @@
+import React from 'react';
+
+import OpenOrdersSummary from '../../open-orders/components/open-orders-summary';
+import OpenOrdersGroup from '../../open-orders/components/open-orders-group';
+
+const OpenOrders = (p) => (
+	<div className="market-open-orders">
+		<OpenOrdersSummary
+			userOpenOrdersSummary={p.userOpenOrdersSummary}
+		/>
+
+		<div className="open-orders-list">
+			{
+				p.outcomes.map(outcome => (
+					<OpenOrdersGroup
+						key={outcome.id}
+						id={outcome.id}
+						name={outcome.name}
+						userOpenOrders={outcome.userOpenOrders}
+						cancelOrder={p.cancelOrder}
+					/>
+				))
+			}
+		</div>
+	</div>
+);
+
+OpenOrders.propTypes = {
+	userOpenOrdersSummary: React.PropTypes.object,
+	outcomes: React.PropTypes.array,
+	cancelOrder: React.PropTypes.func.isRequired
+};
+
+export default OpenOrders;

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

@@ -6,7 +6,7 @@ import Basics from '../../market/components/basics';
 import TradePanel from '../../../modules/trade/components/trade-panel';
 import ReportPanel from '../../reports/components/report-panel';
 import MarketPositions from '../../market/components/market-positions';
-import OpenOrders from '../../market/components/open-orders';
+import MarketOpenOrders from '../../market/components/market-open-orders';
 import Chart from '../../market/components/chart';
 
 export default class MarketPage extends Component {
@@ -17,9 +17,7 @@ export default class MarketPage extends Component {
 		market: PropTypes.object,
 		priceTimeSeries: PropTypes.array,
 		numPendingReports: PropTypes.number,
-		updateSelectedUserOpenOrdersGroup: PropTypes.func.isRequired,
-		cancelOrder: PropTypes.func.isRequired,
-		selectedUserOpenOrdersGroupID: PropTypes.string
+		cancelOrder: PropTypes.func.isRequired
 	};
 	constructor(props) {
 		super(props);
@@ -79,14 +77,16 @@ export default class MarketPage extends Component {
 					);
 				}
 
-				nodes.push(
-					<OpenOrders
-						key="open-orders"
-						outcomes={p.market.outcomes}
-						userOpenOrdersSummary={p.market.userOpenOrdersSummary}
-						cancelOrder={p.cancelOrder}
-					/>
-				);
+				if (p.market.userOpenOrdersSummary != null && p.market.userOpenOrdersSummary.openOrdersCount > 0) {
+					nodes.push(
+						<MarketOpenOrders
+							key="market-open-orders"
+							userOpenOrdersSummary={p.market.userOpenOrdersSummary}
+							outcomes={p.market.outcomes}
+							cancelOrder={p.cancelOrder}
+						/>
+					);
+				}
 
 				// chart
 				nodes.push(

src/modules/open-orders/components/open-orders-group.jsx

@@ -6,32 +6,37 @@ import React from 'react';
 
 import OpenOrder from '../../open-orders/components/open-order';
 
-const OpenOrdersGroup = (p) => (
-	<div>
-		<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}
-						/>
+const OpenOrdersGroup = (p) => {
+	if (p.userOpenOrders == null || p.userOpenOrders.length === 0) {
+		return null;
+	}
+	return (
+		<div>
+			<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>
-	</div>
-);
+					}
+				</tbody>
+			</table>
+		</div>
+	);
+};
 
 OpenOrdersGroup.propTypes = {
 	userOpenOrders: React.PropTypes.arrayOf(React.PropTypes.object).isRequired,

src/modules/open-orders/components/open-orders-summary.jsx

@@ -0,0 +1,22 @@
+/*
+ * Author: priecint
+ */
+
+import React from 'react';
+
+const OpenOrdersSummary = (p) => {
+	const hasOpenOrders = p.userOpenOrdersSummary != null && p.userOpenOrdersSummary.openOrdersCount > 0;
+	return (
+		<div className="market-section-header">
+			{
+				hasOpenOrders ? `${p.userOpenOrdersSummary.openOrdersCount} Open Orders` : 'No Open Orders'
+			}
+		</div>
+	);
+};
+
+OpenOrdersSummary.propTypes = {
+	userOpenOrdersSummary: React.PropTypes.object
+};
+
+export default OpenOrdersSummary;

src/modules/open-orders/less/open-order.less

@@ -1,8 +1,8 @@
-.market {
-  .open-orders {
-    padding: 4vmin 6vmin;
-  }
+.open-orders-list {
+  padding: 4vmin 6vmin;
+}
 
+.market-open-orders {
   .open-order {
     height: 27px; // same height as when action is visible
   }