account summary, order cancel support

Author: gourisk

src/components/card.jsx

@@ -29,10 +29,12 @@ class Card extends Component {
  <div className="row no-gutters align-items-center">
  <div className="col mr-2">
  <div className="text-xs font-weight-bold text-primary text-uppercase mb-1">
- {this.state.header}
+ {this.props.header}
  </div>
  <div className="h5 mb-0 font-weight-bold text-gray-800">
- {this.props.result}
+ {this.props.result === undefined
+ ? ""
+ : this.props.result.toLocaleString()}
  </div>
  </div>
  </div>

src/components/createOrder.jsx

@@ -2,13 +2,16 @@ import React, { Component } from "react";
 import InstBlotter from "./instBlotter";
 import AppConfig from "../utils/constants";
 
+var _ = require("lodash");
+
 class OrderComponent extends Component {
  state = {
  accountId: 1,
  favTickers: ["AAPL", "MSFT"],
  customTicker: "",
  prices: [],
  lastOrder: {},
+ bookingErrors: {},
  tradeDate: "",
  buySell: "B",
  ticker: "",
@@ -37,7 +40,7 @@ class OrderComponent extends Component {
  };
  console.log("input order to be sent: ", inputOrder);
  /* Post Order to server */
- fetch(baseUrl + "/orders/create", {
+ fetch(baseUrl + "/orders/new", {
  method: "POST",
  mode: "cors",
  cache: "no-cache",
@@ -48,7 +51,13 @@ class OrderComponent extends Component {
  body: JSON.stringify(inputOrder),
  })
  .then((resp) => resp.json())
- .then((data) => this.setState({ lastOrder: data || {} }));
+ .then((result) => {
+ if (result.success) {
+ this.setState({ bookingErrors: {}, lastOrder: result.data || {} });
+ } else {
+ this.setState({ bookingErrors: result.errors, lastOrder: {} });
+ }
+ });
  return;
  };
 
@@ -86,6 +95,19 @@ class OrderComponent extends Component {
  };
 
  render() {
+ var footer = "";
+ const { bookingErrors } = this.state;
+ if (!_.isEmpty(bookingErrors)) {
+ const notes = Object.keys(bookingErrors).map((k) => (
+ <li>
+ {k} : {bookingErrors[k]}
+ </li>
+ ));
+ footer = <ul>{notes}</ul>;
+ } else if (this.state.lastOrder) {
+ footer = <h4>Order created with Id= {this.state.lastOrder.orderId}</h4>;
+ }
+
  return (
  <div className="card o-hidden border-0 shadow-lg my-2">
  <div className="card-body">
@@ -172,9 +194,7 @@ class OrderComponent extends Component {
  </div>
  </div>
  </div>
- <div>
- <h4>Order created with Id= {this.state.lastOrder.orderId}</h4>
- </div>
+ <div>{footer}</div>
  </div>
  </div>
  );

src/components/dashboard.jsx

@@ -7,6 +7,7 @@ import AppConfig from "../utils/constants";
 class Dashboard extends Component {
  state = {
  accountId: 1,
+ accountSummary: {},
  results: {
  daily: 0,
  mtd: 0,
@@ -17,7 +18,7 @@ class Dashboard extends Component {
 
  constructor(props) {
  super(props);
- this.reloadTradeCount();
+ this.reloadSummary();
  }
 
  tradeChanged = (e) => {
@@ -33,9 +34,22 @@ class Dashboard extends Component {
  mode: "cors",
  })
  .then((resp) => resp.json())
- .then((data) =>
- this.setState({ results: { ...results, orderCount: data.result } })
- );
+ .then((result) => {
+ if (result.success)
+ this.setState({ results: { ...results, orderCount: result.data } });
+ });
+ };
+
+ reloadSummary = () => {
+ fetch(AppConfig.serverUrl + "/acctsummary/" + this.state.accountId, {
+ mode: "cors",
+ })
+ .then((resp) => resp.json())
+ .then((result) => {
+ if (result.success) {
+ this.setState({ accountSummary: result.data });
+ }
+ });
  };
 
  render() {
@@ -45,9 +59,12 @@ class Dashboard extends Component {
  <h1 className="h3 mb-0 text-primary">Dashboard</h1>
  </div>
 
- <DashboardSummary results={this.state.results} />
+ <DashboardSummary
+ results={this.state.results}
+ summary={this.state.accountSummary}
+ />
  <div className="row">
- <PositionBlotter reloadTradeCount={this.reloadTradeCount} />
+ <PositionBlotter reloadTradeCount={this.reloadSummary} />
  <InstBlotteer />
  </div>
  </div>

src/components/dashboardSummary.jsx

@@ -16,28 +16,31 @@ class DashboardSummary extends Component {
  <React.Fragment>
  <div className="row">
  <Card
- header="Monthly Earning"
+ header="Account Balance"
  url="/acctsummary"
  id="mtd"
- result={this.props.results["mtd"]}
- />
- <Card
- header="Daily P/L"
- url="/acctsummary"
- id="daily"
- result={this.props.results["daily"]}
+ result={this.props.summary.accountBalance}
  />
+
  <Card
  header="Order Count"
  url="/orders/count/1"
  id="orderCount"
- result={this.props.results["orderCount"]}
+ result={this.props.summary.orderCount}
  />
+
+ <Card
+ header="Daily P/L"
+ url="/acctsummary"
+ id="daily"
+ result={this.props.summary.dailyPL}
+ />
+
  <Card
- header="Some Other"
+ header="MTD P/L"
  url="/acctsummary"
  id="test"
- result={this.props.results["test"]}
+ result={this.props.summary.mtdPL}
  />
  </div>
  </React.Fragment>

src/components/positionBlotter.jsx

@@ -30,8 +30,9 @@ class PositionBlotter extends Component {
  <td>{order.quantity}</td>
  <td>{order.price}</td>
  <td>{order.marketValue}</td>
- <td>{order.tradeDate}</td>
+ <td>{order.buySellFlag}</td>
  <td>{order.executedTime}</td>
+ <td>{order.status}</td>
  </tr>
  );
  });
@@ -47,7 +48,18 @@ class PositionBlotter extends Component {
  if (msg.orderId) {
  //check if valid message
  const { orders } = this.state;
- this.setState({ orders: [msg, ...orders] });
+ const orderId = msg.orderId;
+ if ("OPEN" === msg.status) {
+ //new trade
+ this.setState({ orders: [msg, ...orders] });
+ } else {
+ //Edited trade
+ const newOrders = orders.map((order) =>
+ order.orderId === orderId ? msg : order
+ );
+ this.setState({ orders: newOrders });
+ }
+
  this.props.reloadTradeCount();
  }
  }}
@@ -107,8 +119,9 @@ class PositionBlotter extends Component {
  <th>Quanity</th>
  <th>Price</th>
  <th>Market Value</th>
+ <th>Buy/Sell</th>
  <th>Trade Date</th>
- <th>Exec Date</th>
+ <th>Status</th>
  </tr>
  </thead>
  <tbody>{tableRows}</tbody>