Merge pull request #1435 from mozmorris/perf/tiles-1.3

Remove setting default notional in selector [ARTP-991]

src/client/src/apps/MainRoute/widgets/spotTile/components/SpotTile.tsx

@@ -27,14 +27,14 @@ export default class SpotTile extends PureComponent<SpotTileProps> {
     const {
       currencyPair,
       spotTileData: {
-        notional,
         isTradeExecutionInFlight,
         price,
         rfqState,
         rfqPrice,
         rfqReceivedTime,
         rfqTimeout,
         lastTradeExecutionStatus,
+        notional: spotTileNotional,
       },
       updateNotional,
       resetNotional,
@@ -46,6 +46,9 @@ export default class SpotTile extends PureComponent<SpotTileProps> {
       rfq,
       displayCurrencyChart,
     } = this.props
+    const defaultNotional = getDefaultNotionalValue(currencyPair)
+    const notional =
+      spotTileNotional !== undefined ? spotTileNotional : getDefaultNotionalValue(currencyPair)
 
     const spotDate = dateFomatter(price.valueDate, false, localZoneName)
     const date = spotDate && `SPT (${spotDate})`
@@ -59,7 +62,7 @@ export default class SpotTile extends PureComponent<SpotTileProps> {
 
     const showResetButton =
       !isTradeExecutionInFlight &&
-      getDefaultNotionalValue(currencyPair) !== notional &&
+      defaultNotional !== notional &&
       (isRfqStateNone || isRfqStateCanRequest || isRfqStateExpired)
 
     const showTimer = isRfqStateReceived && rfqTimeout

src/client/src/apps/MainRoute/widgets/spotTile/components/Tile/Tile.tsx

@@ -1,11 +1,6 @@
 import React from 'react'
 import { CurrencyPair, Direction, ServiceConnectionStatus } from 'rt-types'
-import {
-  createTradeRequest,
-  ExecuteTradeRequest,
-  SpotTileDataWithNotional,
-  TradeRequest,
-} from '../../model'
+import { createTradeRequest, ExecuteTradeRequest, SpotTileData, TradeRequest } from '../../model'
 import SpotTile from '../SpotTile'
 import { AnalyticsTile } from '../analyticsTile/index'
 import { TileViews } from '../../../workspace/workspaceHeader'
@@ -22,7 +17,7 @@ import { CurrencyPairNotional } from '../../model/spotTileData'
 
 export interface TileProps {
   currencyPair: CurrencyPair
-  spotTileData: SpotTileDataWithNotional
+  spotTileData: SpotTileData
   executionStatus: ServiceConnectionStatus
   executeTrade: (tradeRequestObj: ExecuteTradeRequest) => void
   setTradingMode: (tradingMode: TradingMode) => void
@@ -67,10 +62,13 @@ class Tile extends React.PureComponent<TileProps, TileState> {
   // be in the RFQ range.
   componentDidMount() {
     const {
-      spotTileData: { notional, rfqState },
+      spotTileData: { rfqState, notional: spotTileNotional },
       setTradingMode,
-      currencyPair: { symbol },
+      currencyPair,
     } = this.props
+    const { symbol } = currencyPair
+    const notional =
+      spotTileNotional !== undefined ? spotTileNotional : getDefaultNotionalValue(currencyPair)
     const { isRfqStateNone } = getConstsFromRfqState(rfqState)
 
     if (isRfqStateNone && isValueInRfqRange(notional)) {
@@ -83,8 +81,11 @@ class Tile extends React.PureComponent<TileProps, TileState> {
       currencyPair,
       executeTrade,
       rfq,
-      spotTileData: { notional, rfqState },
+      spotTileData: { rfqState, notional: spotTileNotional },
     } = this.props
+    const notional =
+      spotTileNotional !== undefined ? spotTileNotional : getDefaultNotionalValue(currencyPair)
+
     const { isRfqStateReceived } = getConstsFromRfqState(rfqState)
     if (typeof notional === 'undefined') {
       console.error(`Error executing trade with no notional`)

src/client/src/apps/MainRoute/widgets/spotTile/components/Tile/TileBusinessLogic.ts

@@ -2,7 +2,7 @@ import numeral from 'numeral'
 import { CurrencyPair, ServiceConnectionStatus } from 'rt-types'
 import { TileProps, TileState } from './Tile'
 import { getConstsFromRfqState } from '../../model/spotTileUtils'
-import { SpotTileDataWithNotional } from '../../model'
+import { SpotTileData } from '../../model'
 
 // Constants
 export const NUMERAL_FORMAT = '0,000,000[.]00'
@@ -66,14 +66,16 @@ export const getDerivedStateFromUserInput = ({
   currencyPair,
 }: {
   prevState: TileState
-  spotTileData: SpotTileDataWithNotional
+  spotTileData: SpotTileData
   actions: {
     setTradingMode: TileProps['setTradingMode']
   }
   currencyPair: CurrencyPair
 }): TileState => {
   const { symbol } = currencyPair
-  const { rfqState, notional } = spotTileData
+  const { rfqState, notional: spotTileNotional } = spotTileData
+  const notional =
+    spotTileNotional !== undefined ? spotTileNotional : getDefaultNotionalValue(currencyPair)
 
   const defaultNextState: TileState = {
     ...prevState,

src/client/src/apps/MainRoute/widgets/spotTile/components/TileSwitch.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import { CurrencyPair, ServiceConnectionStatus } from 'rt-types'
-import { ExecuteTradeRequest, SpotTileDataWithNotional } from '../model'
+import { ExecuteTradeRequest, SpotTileData } from '../model'
 import NotificationContainer from './notifications'
 import Tile from './Tile'
 import TileControls from './TileControls'
@@ -10,7 +10,7 @@ import { CurrencyPairNotional } from '../model/spotTileData'
 
 interface Props {
   currencyPair?: CurrencyPair
-  spotTileData: SpotTileDataWithNotional
+  spotTileData: SpotTileData
   canPopout: boolean
   executionStatus: ServiceConnectionStatus
   executeTrade: (tradeRequestObj: ExecuteTradeRequest) => void

src/client/src/apps/MainRoute/widgets/spotTile/components/analyticsTile/AnalyticsTile.tsx

@@ -29,11 +29,11 @@ const AnalyticsWrapperWithPlatform: FC = props => {
 }
 class AnalyticsTile extends React.PureComponent<SpotTileProps> {
   private handleRfqRejected = () => this.props.rfq.reject({ currencyPair: this.props.currencyPair })
+
   render() {
     const {
       currencyPair,
       spotTileData: {
-        notional,
         isTradeExecutionInFlight,
         price,
         historicPrices,
@@ -42,6 +42,7 @@ class AnalyticsTile extends React.PureComponent<SpotTileProps> {
         rfqTimeout,
         rfqReceivedTime,
         lastTradeExecutionStatus,
+        notional: spotTileNotional,
       },
       updateNotional,
       resetNotional,
@@ -53,6 +54,9 @@ class AnalyticsTile extends React.PureComponent<SpotTileProps> {
       displayCurrencyChart,
       rfq,
     } = this.props
+    const defaultNotional = getDefaultNotionalValue(currencyPair)
+    const notional =
+      spotTileNotional !== undefined ? spotTileNotional : getDefaultNotionalValue(currencyPair)
 
     const spotDate = dateFomatter(price.valueDate, false, localZoneName)
     const date = spotDate && `SPT (${spotDate})`
@@ -64,7 +68,7 @@ class AnalyticsTile extends React.PureComponent<SpotTileProps> {
     } = getConstsFromRfqState(rfqState)
     const showResetButton =
       !isTradeExecutionInFlight &&
-      getDefaultNotionalValue(currencyPair) !== notional &&
+      defaultNotional !== notional &&
       (isRfqStateNone || isRfqStateCanRequest || isRfqStateExpired)
     const showTimer = isRfqStateReceived && rfqTimeout
     const isTimerOn = Boolean(showTimer) && rfqTimeout !== null && rfqReceivedTime !== null

src/client/src/apps/MainRoute/widgets/spotTile/components/stories/HorizontalTileSwitch.stories.tsx

@@ -5,7 +5,7 @@ import { Story, Centered, spotTileStories } from './Initialise.stories'
 import SpotTile from '../SpotTile'
 import { ServiceConnectionStatus } from 'rt-types'
 import { currencyPair, spotTileDataWithRfq, switchOptions } from '../test-resources/spotTileProps'
-import { SpotTileDataWithNotional } from '../../model'
+import { SpotTileData } from '../../model'
 
 const executeTrade = action('executeTrade')
 const updateNotional = action('updateNotional')
@@ -168,7 +168,7 @@ spotTileStories.add('RFQ Switch', () => {
                 ...spotTileDataWithRfq,
                 rfqState: rfqStatesSwitch,
                 isTradeExecutionInFlight: boolean('Booking', false),
-              } as SpotTileDataWithNotional
+              } as SpotTileData
             }
             executeTrade={executeTrade}
             executionStatus={ServiceConnectionStatus.CONNECTED}

src/client/src/apps/MainRoute/widgets/spotTile/components/stories/VerticalViewSwitch..stories.tsx

@@ -4,7 +4,7 @@ import { boolean, select } from '@storybook/addon-knobs'
 import { Story, Centered, analyticsTileStories } from './Initialise.stories'
 import { currencyPair, spotTileDataWithRfq, switchOptions } from '../test-resources/spotTileProps'
 import { AnalyticsTile } from '../analyticsTile'
-import { SpotTileDataWithNotional } from '../../model'
+import { SpotTileData } from '../../model'
 import { ServiceConnectionStatus } from 'rt-types'
 
 const executeTrade = action('executeTrade')
@@ -168,7 +168,7 @@ analyticsTileStories.add('RFQ Switch', () => {
                 ...spotTileDataWithRfq,
                 rfqState: rfqStatesSwitch,
                 isTradeExecutionInFlight: boolean('Booking', false),
-              } as SpotTileDataWithNotional
+              } as SpotTileData
             }
             executeTrade={executeTrade}
             executionStatus={ServiceConnectionStatus.CONNECTED}

src/client/src/apps/MainRoute/widgets/spotTile/components/test-resources/spotTileProps.ts

@@ -1,5 +1,5 @@
 import { Direction } from 'rt-types'
-import { SpotPriceTick, SpotTileDataWithNotional } from '../../model'
+import { SpotPriceTick, SpotTileData } from '../../model'
 import { PriceMovementTypes } from '../../model/priceMovementTypes'
 
 const currencyPair = {
@@ -29,7 +29,7 @@ const generateHistoricPrices: (totalPricePrick: number) => SpotPriceTick[] = tot
   return historicPrices
 }
 
-const spotTileData: SpotTileDataWithNotional = {
+const spotTileData: SpotTileData = {
   notional: 1000000,
   isTradeExecutionInFlight: false,
   price: {
@@ -83,7 +83,7 @@ const tradeRejected = {
   trade: { ...trade, status: 'rejected' },
 }
 
-const spotTileDataWithRfq: SpotTileDataWithNotional = {
+const spotTileDataWithRfq: SpotTileData = {
   notional: 100000000,
   isTradeExecutionInFlight: false,
   price: {

src/client/src/apps/MainRoute/widgets/spotTile/components/types.ts

@@ -1,7 +1,14 @@
 import { CurrencyPair, Direction, ServiceConnectionStatus } from 'rt-types'
-import { SpotTileDataWithNotional } from '../model'
+import { SpotTileData } from '../model'
 import { ValidationMessage } from './notional'
-import { RfqCancel, RfqExpired, RfqReject, RfqRequest, RfqRequote, RfqReset, } from '../model/rfqRequest'
+import {
+  RfqCancel,
+  RfqExpired,
+  RfqReject,
+  RfqRequest,
+  RfqRequote,
+  RfqReset,
+} from '../model/rfqRequest'
 
 export interface TradingMode {
   symbol: CurrencyPair['symbol']
@@ -26,7 +33,7 @@ export interface TileSwitchChildrenProps {
 
 export interface SpotTileProps {
   currencyPair: CurrencyPair
-  spotTileData: SpotTileDataWithNotional
+  spotTileData: SpotTileData
   executionStatus: ServiceConnectionStatus
   executeTrade: (direction: Direction, rawSpotRate: number) => void
   updateNotional: (notional: number) => void

src/client/src/apps/MainRoute/widgets/spotTile/model/index.ts

@@ -1,10 +1,10 @@
-import { SpotTileData, SpotTileDataWithNotional } from './spotTileData'
+import { SpotTileData } from './spotTileData'
 import { ExecuteTradeRequest } from './executeTradeRequest'
 import { createTradeRequest, DEFAULT_NOTIONAL, TradeRequest } from './spotTileUtils'
 import { SpotPriceTick } from './spotPriceTick'
+
+export { createTradeRequest, DEFAULT_NOTIONAL }
 export type SpotTileData = SpotTileData
-export type SpotTileDataWithNotional = SpotTileDataWithNotional
 export type ExecuteTradeRequest = ExecuteTradeRequest
-export { createTradeRequest, DEFAULT_NOTIONAL }
 export type TradeRequest = TradeRequest
 export type SpotPriceTick = SpotPriceTick

src/client/src/apps/MainRoute/widgets/spotTile/model/spotTileData.ts

@@ -21,21 +21,6 @@ export interface SpotTileData {
   rfqPrice: SpotPriceTick | null
   notional?: number
 }
-
-type SpotTileDataNotional = Pick<SpotTileData, 'notional'>
-
-/**
- `SpotTileData` has optional `notional` field, but notice that `SpotTileDataWithNotional` has required notional field.
- This has been done because we don't know notional when we create `SpotTileData`, default `notional`
- will change from currency to currency.
- We are adding a default `notional` in the spotData selector based on currency (see `spotTile/selectors.ts`).
- I can't say that I like this approach - I would prefer to control this data dependency
- in a high-level reducer. But it would have been much bigger change - resetting reference
- data would need to create new tiles in reducer, then new tiles will need to reset all records in
- `tileData` slice. I'd like to address that some other time and left some TODOs
- */
-export type SpotTileDataWithNotional = SpotTileData & Required<SpotTileDataNotional>
-
 export interface CurrencyPairNotional {
   currencyPair: string
   notional: number