From 758a4e47fdee61e1a0924a1ad324279ce97507c3 Mon Sep 17 00:00:00 2001 From: Dmytro Shcherbonos Date: Fri, 18 Aug 2023 02:29:48 +0300 Subject: [PATCH] BT history: move some component state properties to redux store --- .../BacktestOptionsPanel.js | 21 +++-- .../BacktestResultsOptionsPanel.js | 32 +++---- .../tabs/BacktestDetails.js | 23 ++--- src/components/Navbar/Navbar.Link.js | 4 +- .../StrategyEditor.container.js | 4 +- .../StrategyEditor/StrategyEditor.js | 14 ++- .../StrategyEditor/tabs/BacktestTab.Title.js | 6 +- .../StrategyEditor/tabs/BacktestTab.js | 89 +++++++------------ .../StrategyPerfomanceMetrics.js | 3 +- src/redux/actions/ui.js | 6 ++ src/redux/actions/ws.js | 8 +- src/redux/constants/ui.js | 2 + src/redux/constants/ws.js | 1 + src/redux/middleware/ws/on_message.js | 2 +- src/redux/reducers/ui/index.js | 37 +++++++- src/redux/reducers/ws/backtest.js | 32 ++++--- src/redux/reducers/ws/backtestHistory.js | 18 ++++ .../ui/get_backtest_active_section.js | 13 +++ src/redux/selectors/ui/index.js | 2 + src/redux/selectors/ws/get_backtest_by_id.js | 10 --- .../selectors/ws/get_backtest_results.js | 2 +- src/redux/selectors/ws/get_backtest_state.js | 9 +- .../ws/get_current_history_backtest.js | 10 +++ src/redux/selectors/ws/index.js | 4 +- 24 files changed, 200 insertions(+), 152 deletions(-) create mode 100644 src/redux/selectors/ui/get_backtest_active_section.js delete mode 100644 src/redux/selectors/ws/get_backtest_by_id.js create mode 100644 src/redux/selectors/ws/get_current_history_backtest.js diff --git a/src/components/BacktestOptionsPanel/BacktestOptionsPanel.js b/src/components/BacktestOptionsPanel/BacktestOptionsPanel.js index eb0dfa629..f3408f059 100644 --- a/src/components/BacktestOptionsPanel/BacktestOptionsPanel.js +++ b/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) => { )} {activeSection === BACKTEST_TAB_SECTIONS.HISTORY_BT_DETAILS && ( - + )} ) } -BacktestOptionsPanel.propTypes = { - activeSection: PropTypes.string.isRequired, - setActiveSection: PropTypes.func.isRequired, - setBtHistoryId: PropTypes.func.isRequired, -} - export default BacktestOptionsPanel diff --git a/src/components/BacktestOptionsPanel/BacktestResultsOptionsPanel.js b/src/components/BacktestOptionsPanel/BacktestResultsOptionsPanel.js index fc98906e0..1d290f4c1 100644 --- a/src/components/BacktestOptionsPanel/BacktestResultsOptionsPanel.js +++ b/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 = ({

{t('strategyEditor.backtestHistoryResults')}   - {renderDate(backtestTimestamp, formatTime, false)} + + {renderDate(_get(backtest, 'timestamp', 0), formatTime, false)} +