AG-420 Improve React implementation

src-trader-dashboard/components/ControlPanel.jsx

@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import React, {Component} from "react";
 
 export default class extends Component {
     constructor(props) {

src-trader-dashboard/components/FxQuoteMatrix.jsx

@@ -48,7 +48,7 @@ class FxQuoteMatrix extends Component {
                     updated = true;
                 }
             }
-            if(updated) {
+            if (updated) {
                 assign(data, newRow);
                 updatedNodes.push(node);
             }

src-trader-dashboard/components/StockDetailPanel.jsx

@@ -21,7 +21,7 @@ export default class extends Component {
         }
     }
 
-    componentWillReceiveProps(nextProps, nextState) {
+    componentWillReceiveProps(nextProps) {
         if (nextProps.selectedSymbol &&
             nextProps.selectedSymbol !== this.props.selectedSymbol) {
             let stockDetail = this.exchangeService.getTickerDetail(nextProps.selectedSymbol);
@@ -35,7 +35,7 @@ export default class extends Component {
         }
     }
 
-    shouldComponentUpdate(nextProps, nextState) {
+    shouldComponentUpdate(nextProps) {
         return nextProps.selectedSymbol !== this.props.selectedSymbol;
     }
 

src-trader-dashboard/components/StockPriceDeltaPanel.jsx

@@ -18,7 +18,7 @@ export default class extends Component {
         this.updatePriceDelta(this.props.pricingDelta);
     }
 
-    componentWillReceiveProps(nextProps, nextState) {
+    componentWillReceiveProps(nextProps) {
         if (!isEqual(this.props.pricingDelta, nextProps.pricingDelta)) {
             this.updatePriceDelta(nextProps.pricingDelta);
         }
@@ -73,7 +73,7 @@ export default class extends Component {
 
         let swingStyle = this.state.delta >= 0 ? positiveSwingStyle : negativeSwingStyle;
 
-        if(!this.props.pricingDelta) {
+        if (!this.props.pricingDelta) {
             return null;
         } else {
             return (

src-trader-dashboard/services/ExchangeService.jsx

@@ -8,19 +8,49 @@ import keys from "lodash/keys";
 export default class {
     constructor() {
         this.subscribers = {};
-
-        this.exchanges = [
-            {name: 'Nasdaq Stock Market', symbol: 'NASDAQ', supportedStocks: NASDAQ_SYMBOLS},
-            {name: 'London Stock Exchange', symbol: 'LSE', supportedStocks: LSE_SYMBOLS},
-            {name: 'Japan Exchange Group', symbol: 'JSE', supportedStocks: JSE_SYMBOLS},
-            {name: 'Deutsche Börse', symbol: 'DE', supportedStocks: DE_SYMBOLS}
-        ];
-
-        this.initialiseTickerData();
-
         this.timestamp = new Date();
+
+        // create the initial state of data
+        this.initialiseTickerData();
     }
 
+    addSubscriber(subscriber, symbol) {
+        if (!this.subscribers[symbol]) {
+            this.subscribers[symbol] = [];
+        }
+        this.subscribers[symbol].push(subscriber);
+
+        if (!this.updateInterval) {
+            this.updateInterval = setInterval(this.applyDeltasToTickerData.bind(this), 500);
+        }
+    }
+
+    removeSubscriber(subscriber, symbol) {
+        remove(this.subscribers[symbol], subscriber);
+    }
+
+    getTicker(symbol) {
+        return this.tickerData[symbol];
+    }
+
+    getExchanges() {
+        return EXCHANGES;
+    }
+
+    getExchangeInformation(exchangeName) {
+        return find(EXCHANGES, (exchange) => {
+            return exchange.symbol === exchangeName;
+        })
+    }
+
+    getTickerDetail(symbol) {
+        return this.createTickerDetail(symbol);
+    }
+
+    /*
+     * the rest of this class exists primarily to create mock data - it can safely be ignored
+     * as it is secondary to the main ideas being demonstrated by the rest of the application
+     */
     initialiseTickerData() {
         this.tickerData = {};
 
@@ -37,7 +67,7 @@ export default class {
             price,
             bid: price - this.random(1, 3),
             ask: price + this.random(1, 3),
-            recommendation: ['Buy','Hold','Sell'][Math.floor(this.random(0, 2))]
+            recommendation: ['Buy', 'Hold', 'Sell'][Math.floor(this.random(0, 2))]
         }
     }
 
@@ -45,17 +75,6 @@ export default class {
         return parseFloat((Math.random() * (max - min + 1) + min))
     }
 
-    addSubscriber(subscriber, symbol) {
-        if (!this.subscribers[symbol]) {
-            this.subscribers[symbol] = [];
-        }
-        this.subscribers[symbol].push(subscriber);
-
-        if (!this.updateInterval) {
-            this.updateInterval = setInterval(this.applyDeltasToTickerData.bind(this), 500);
-        }
-    }
-
     applyDeltasToTickerData() {
         let symbols = keys(this.subscribers);
         let properties = ['price', 'bid', 'ask'];
@@ -81,24 +100,6 @@ export default class {
         });
     }
 
-    removeSubscriber(subscriber, symbol) {
-        remove(this.subscribers[symbol], subscriber);
-    }
-
-    getTicker(symbol) {
-        return this.tickerData[symbol];
-    }
-
-    getExchanges() {
-        return this.exchanges;
-    }
-
-    getExchangeInformation(exchangeName) {
-        return find(this.exchanges, (exchange) => {
-            return exchange.symbol === exchangeName;
-        })
-    }
-
     formatNumber(input) {
         return input.toFixed(2);
     }
@@ -107,7 +108,7 @@ export default class {
         return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
     }
 
-    getTickerDetail(symbol) {
+    createTickerDetail(symbol) {
         let ticker = this.getTicker(symbol);
         let currentPrice = ticker.price;
         let tenthOfCurrentPrice = currentPrice / 10;
@@ -326,4 +327,11 @@ const DE_SYMBOLS = [
     "STS.L",
     "BKIR.L",
     "AFMF.L",
-];
+];
+
+const EXCHANGES = [
+    {name: 'Nasdaq Stock Market', symbol: 'NASDAQ', supportedStocks: NASDAQ_SYMBOLS},
+    {name: 'London Stock Exchange', symbol: 'LSE', supportedStocks: LSE_SYMBOLS},
+    {name: 'Japan Exchange Group', symbol: 'JSE', supportedStocks: JSE_SYMBOLS},
+    {name: 'Deutsche Börse', symbol: 'DE', supportedStocks: DE_SYMBOLS}
+];

src-trader-dashboard/services/FxDataService.jsx

@@ -10,12 +10,19 @@ export default class {
     constructor() {
         this.store = StoreService.STORE;
 
+        // create the initial state of the fx data
         this.createFxMatrixSnapshot();
         this.calculateTopMovers();
 
+        // and dispatch it
         this.store.dispatch(fxDataUpdated(this.fxData));
         this.store.dispatch(fxTopMoversUpdated(this.fxTopMovers));
 
+        // periodically update the fx and top mover information
+        this.kickOffPeriodicUpdates();
+    }
+
+    kickOffPeriodicUpdates() {
         setInterval(() => {
             this.applyDeltasToFxData();
 
@@ -29,6 +36,10 @@ export default class {
         }, 2500);
     }
 
+    /*
+     * the rest of this class exists primarily to create mock data - it can safely be ignored
+     * as it is secondary to the main ideas being demonstrated by the rest of the application
+     */
     calculateTopMovers() {
         let fxData = cloneDeep(this.fxData);
         fxData.sort((a, b) => {