BT history: move some component state properties to redux store

src/components/BacktestOptionsPanel/BacktestOptionsPanel.js

@@ -3,20 +3,25 @@ import { useTranslation } from 'react-i18next'
 import PropTypes from 'prop-types'
 import _toUpper from 'lodash/toUpper'
 import { Icon } from 'react-fa'
+import { useDispatch, useSelector } from 'react-redux'
 import BacktestOptionsNewTest from './tabs/NewTest'
 import HistoryButton from '../../ui/HistoryButton/HistoryButton'
 import BacktestHistoryList from './tabs/BacktestHistoryList'
 import PanelButton from '../../ui/Panel/Panel.Button'
 import BacktestDetails from './tabs/BacktestDetails'
-import { BACKTEST_TAB_SECTIONS } from '../StrategyEditor/tabs/BacktestTab'
+import { BACKTEST_TAB_SECTIONS } from '../../redux/reducers/ui'
+import UIActions from '../../redux/actions/ui'
+import WSActions from '../../redux/actions/ws'
+import { getBacktestActiveSection } from '../../redux/selectors/ui'
 
 import './style.css'
 
 const BacktestOptionsPanel = (props) => {
-  const { setActiveSection, activeSection, setBtHistoryId } = props
-
   const { t } = useTranslation()
+  const dispatch = useDispatch()
+  const activeSection = useSelector(getBacktestActiveSection)
 
+  const setActiveSection = (section) => dispatch(UIActions.setBacktestActiveSection(section))
   const onNewTestTabClick = () => setActiveSection(BACKTEST_TAB_SECTIONS.NEW_BT)
   const onHistoryTabClick = () => {
     if (activeSection !== BACKTEST_TAB_SECTIONS.NEW_BT) {
@@ -27,7 +32,7 @@ const BacktestOptionsPanel = (props) => {
   const onBackButtonClick = () => setActiveSection(BACKTEST_TAB_SECTIONS.HISTORY_BT_LIST)
 
   const onBacktestRowClick = ({ rowData }) => {
-    setBtHistoryId(rowData.executionId)
+    dispatch(WSActions.setHistoryBacktestId(rowData.executionId))
     setActiveSection(BACKTEST_TAB_SECTIONS.HISTORY_BT_DETAILS)
   }
 
@@ -63,16 +68,10 @@ const BacktestOptionsPanel = (props) => {
         <BacktestHistoryList onBacktestRowClick={onBacktestRowClick} />
       )}
       {activeSection === BACKTEST_TAB_SECTIONS.HISTORY_BT_DETAILS && (
-        <BacktestDetails {...props} />
+        <BacktestDetails />
       )}
     </div>
   )
 }
 
-BacktestOptionsPanel.propTypes = {
-  activeSection: PropTypes.string.isRequired,
-  setActiveSection: PropTypes.func.isRequired,
-  setBtHistoryId: PropTypes.func.isRequired,
-}
-
 export default BacktestOptionsPanel

src/components/BacktestOptionsPanel/BacktestResultsOptionsPanel.js

@@ -1,27 +1,32 @@
 import React from 'react'
 import _toUpper from 'lodash/toUpper'
+import _get from 'lodash/get'
 import PropTypes from 'prop-types'
 import { useTranslation } from 'react-i18next'
 import { useDispatch, useSelector } from 'react-redux'
 import { Icon } from 'react-fa'
 import Button from '../../ui/Button'
-import { getFormatTimeFn } from '../../redux/selectors/ui'
+import {
+  getBacktestActiveSection,
+  getFormatTimeFn,
+} from '../../redux/selectors/ui'
 import { renderDate } from '../../util/ui'
 import PanelButton from '../../ui/Panel/Panel.Button'
-import { BACKTEST_TAB_SECTIONS } from '../StrategyEditor/tabs/BacktestTab'
+
+import UIActions from '../../redux/actions/ui'
 import WSActions from '../../redux/actions/ws'
+import { BACKTEST_TAB_SECTIONS } from '../../redux/reducers/ui'
+import { getCurrentHistoryBacktest } from '../../redux/selectors/ws'
 
-const BacktestResultsOptionsPanel = ({
-  showFullscreenChart,
-  backtestTimestamp,
-  activeSection,
-  setActiveSection,
-}) => {
+const BacktestResultsOptionsPanel = ({ showFullscreenChart }) => {
   const formatTime = useSelector(getFormatTimeFn)
+  const backtest = useSelector(getCurrentHistoryBacktest)
+  const activeSection = useSelector(getBacktestActiveSection)
 
   const { t } = useTranslation()
   const dispatch = useDispatch()
 
+  const setActiveSection = (section) => dispatch(UIActions.setBacktestActiveSection(section))
   const onBackButtonClick = () => setActiveSection(BACKTEST_TAB_SECTIONS.HISTORY_BT_DETAILS)
   const onNewTestButtonClick = () => {
     dispatch(WSActions.purgeBacktestData())
@@ -43,7 +48,9 @@ const BacktestResultsOptionsPanel = ({
           <p>
             {t('strategyEditor.backtestHistoryResults')}
             &nbsp;
-            <b>{renderDate(backtestTimestamp, formatTime, false)}</b>
+            <b>
+              {renderDate(_get(backtest, 'timestamp', 0), formatTime, false)}
+            </b>
           </p>
           <Button
             className='hfui-strategy-options__option-btn'
@@ -76,13 +83,6 @@ const BacktestResultsOptionsPanel = ({
 
 BacktestResultsOptionsPanel.propTypes = {
   showFullscreenChart: PropTypes.func.isRequired,
-  setActiveSection: PropTypes.func.isRequired,
-  activeSection: PropTypes.string.isRequired,
-  backtestTimestamp: PropTypes.number,
-}
-
-BacktestResultsOptionsPanel.defaultProps = {
-  backtestTimestamp: null,
 }
 
 export default BacktestResultsOptionsPanel

src/components/BacktestOptionsPanel/tabs/BacktestDetails.js

@@ -1,5 +1,4 @@
 import React, { useMemo } from 'react'
-import PropTypes from 'prop-types'
 import _map from 'lodash/map'
 import _delay from 'lodash/delay'
 import { useDispatch, useSelector } from 'react-redux'
@@ -9,23 +8,25 @@ import { getSymbols } from '@ufx-ui/utils'
 import { Button, Intent } from '@ufx-ui/core'
 import { getFormatTimeFn } from '../../../redux/selectors/ui'
 import getBacktestDetailsFields from './BacktestDetails.fields'
+import UIActions from '../../../redux/actions/ui'
 import WSActions from '../../../redux/actions/ws'
-import { BACKTEST_TAB_SECTIONS } from '../../StrategyEditor/tabs/BacktestTab'
-import { getBacktestById } from '../../../redux/selectors/ws'
+import { getCurrentHistoryBacktest } from '../../../redux/selectors/ws'
+import { BACKTEST_TAB_SECTIONS } from '../../../redux/reducers/ui'
 
 const { getCurrencySymbolMemo } = reduxSelectors
 
-const BacktestDetails = ({ btHistoryId, setActiveSection }) => {
+const BacktestDetails = () => {
   const formatTime = useSelector(getFormatTimeFn)
   const getCurrencySymbol = useSelector(getCurrencySymbolMemo)
-  const backtest = useSelector(getBacktestById(btHistoryId))
+  const backtest = useSelector(getCurrentHistoryBacktest)
 
   const [, quote] = getSymbols(backtest.symbol)
   const quoteCcy = getCurrencySymbol(quote)
 
   const { t } = useTranslation()
   const dispatch = useDispatch()
 
+  const setActiveSection = (section) => dispatch(UIActions.setBacktestActiveSection(section))
   const backtestDetails = useMemo(
     () => getBacktestDetailsFields({
       t,
@@ -37,12 +38,7 @@ const BacktestDetails = ({ btHistoryId, setActiveSection }) => {
   )
 
   const onButtonClick = () => {
-    dispatch(
-      WSActions.recvBacktestResults({
-        ...backtest.btResult,
-        timestamp: backtest.timestamp,
-      }),
-    )
+    dispatch(WSActions.recvBacktestResults({ ...backtest.btResult }, false))
     _delay(setActiveSection, 500, BACKTEST_TAB_SECTIONS.HISTORY_BT_RESULTS)
   }
 
@@ -69,9 +65,4 @@ const BacktestDetails = ({ btHistoryId, setActiveSection }) => {
   )
 }
 
-BacktestDetails.propTypes = {
-  btHistoryId: PropTypes.string.isRequired,
-  setActiveSection: PropTypes.func.isRequired,
-}
-
 export default BacktestDetails

src/components/Navbar/Navbar.Link.js

@@ -6,7 +6,7 @@ import ClassNames from 'clsx'
 import PropTypes from 'prop-types'
 import { useLocation } from 'react-router'
 import {
-  getBacktestResults,
+  getBacktestState,
   getCurrentStrategyExecutionState,
   getExecutionConnectionState,
 } from '../../redux/selectors/ws'
@@ -26,7 +26,7 @@ const NavbarButton = ({
   )
   const { isExecutionConnected } = useSelector(getExecutionConnectionState)
 
-  const { loading: btLoading, finished } = useSelector(getBacktestResults)
+  const { loading: btLoading, finished } = useSelector(getBacktestState)
 
   const getIndicator = () => {
     if (route !== strategyEditor.path || pathname === strategyEditor.path) {

src/components/StrategyEditor/StrategyEditor.container.js

@@ -9,7 +9,7 @@ import GAActions from '../../redux/actions/google_analytics'
 import WSTypes from '../../redux/constants/ws'
 import {
   getAuthToken,
-  getBacktestResults,
+  getBacktestState,
   getCurrentStrategyExecutionState,
   getSavedStrategies,
 } from '../../redux/selectors/ws'
@@ -31,7 +31,7 @@ import { LOG_LEVELS } from '../../constants/logging'
 const mapStateToProps = (state = {}) => {
   return {
     authToken: getAuthToken(state),
-    backtestResults: getBacktestResults(state),
+    backtestState: getBacktestState(state),
     executionState: getCurrentStrategyExecutionState(state),
     settingsTheme: getThemeSetting(state),
     isPaperTrading: getIsPaperTrading(state),

src/components/StrategyEditor/StrategyEditor.js

@@ -71,7 +71,7 @@ const StrategyEditor = (props) => {
     onRemove,
     authToken,
     gaCreateStrategy,
-    backtestResults,
+    backtestState,
     strategyDirty,
     setStrategyDirty,
     setStrategy,
@@ -335,13 +335,13 @@ const StrategyEditor = (props) => {
   )
 
   const _cancelProcess = useCallback(() => {
-    const { gid } = backtestResults
+    const { gid } = backtestState
 
     cancelProcess(authToken, isPaperTrading, gid, loadingGid)
     closeCancelProcessModal()
   }, [
     authToken,
-    backtestResults,
+    backtestState,
     cancelProcess,
     closeCancelProcessModal,
     isPaperTrading,
@@ -634,11 +634,11 @@ const StrategyEditor = (props) => {
   const sbtitleBacktest = useCallback(
     ({ sidebarOpened }) => (
       <BacktestTabTitle
-        results={backtestResults}
+        backtestState={backtestState}
         sidebarOpened={sidebarOpened}
       />
     ),
-    [backtestResults],
+    [backtestState],
   )
 
   const sbtitleSettings = useCallback(
@@ -683,7 +683,6 @@ const StrategyEditor = (props) => {
               <BacktestTab
                 htmlKey='backtest'
                 sbtitle={sbtitleBacktest}
-                results={backtestResults}
                 onBacktestStart={onBacktestStart}
                 saveStrategyOptions={saveStrategyOptions}
                 onCancelProcess={onCancelProcess}
@@ -792,9 +791,8 @@ StrategyEditor.propTypes = {
   onRemove: PropTypes.func.isRequired,
   authToken: PropTypes.string.isRequired,
   setStrategy: PropTypes.func,
-  backtestResults: PropTypes.shape({
+  backtestState: PropTypes.shape({
     gid: PropTypes.number,
-    strategy: PropTypes.object, // eslint-disable-line
   }).isRequired,
   strategy: PropTypes.shape(STRATEGY_SHAPE),
   dsStopLiveStrategy: PropTypes.func.isRequired,

src/components/StrategyEditor/tabs/BacktestTab.Title.js

@@ -4,10 +4,10 @@ import PropTypes from 'prop-types'
 import { Icon } from 'react-fa'
 import Indicator from '../../../ui/Indicator'
 
-const BacktestTabTitle = ({ results, sidebarOpened }) => {
+const BacktestTabTitle = ({ backtestState, sidebarOpened }) => {
   const { t } = useTranslation()
 
-  const { loading, finished } = results
+  const { loading, finished } = backtestState
 
   const indicatorClassName = !sidebarOpened ? 'indicator-near-icon' : null
 
@@ -26,7 +26,7 @@ const BacktestTabTitle = ({ results, sidebarOpened }) => {
 }
 
 BacktestTabTitle.propTypes = {
-  results: PropTypes.shape({
+  backtestState: PropTypes.shape({
     loading: PropTypes.bool,
     finished: PropTypes.bool,
   }).isRequired,