From 06f06adce812cd419671b17c13ff1754976bc329 Mon Sep 17 00:00:00 2001 From: aizad-deriv Date: Tue, 31 Jan 2023 11:59:50 +0800 Subject: [PATCH 1/5] chore: migrate statement to tsx --- .../{statement.jsx => statement.tsx} | 119 +++++++++++------- 1 file changed, 72 insertions(+), 47 deletions(-) rename packages/reports/src/Containers/{statement.jsx => statement.tsx} (80%) diff --git a/packages/reports/src/Containers/statement.jsx b/packages/reports/src/Containers/statement.tsx similarity index 80% rename from packages/reports/src/Containers/statement.jsx rename to packages/reports/src/Containers/statement.tsx index 7d16b06ab0d9..4debacab2ea1 100644 --- a/packages/reports/src/Containers/statement.jsx +++ b/packages/reports/src/Containers/statement.tsx @@ -1,5 +1,3 @@ -import { PropTypes as MobxPropTypes } from 'mobx-react'; -import PropTypes from 'prop-types'; import React from 'react'; import { withRouter } from 'react-router-dom'; import { DesktopWrapper, MobileWrapper, DataList, DataTable, Text, Clipboard } from '@deriv/components'; @@ -14,6 +12,53 @@ import AccountStatistics from '../Components/account-statistics'; import FilterComponent from '../Components/filter-component.jsx'; import { ReportsMeta } from '../Components/reports-meta'; import EmptyTradeHistoryMessage from '../Components/empty-trade-history-message'; +import { TPassthrough } from '../Types'; +import { TRootStore } from 'Stores/index'; + +type TData = { + action: string; + action_type: string; + amount: string; + app_id: number; + balance: string; + date: string; + desc: string; + display_name: string; + id: number; + payout: string; + purchase_time: number; + refid: number; + shortcode: string; + transaction_time: number; +}; + +type TMobileRenderer = { + row: TData; + passthrough: TPassthrough; +}; + +type TStatements = { + action_type: string; + account_statistics: object; + component_icon: string; + currency: string; + data: Array; + date_from: number; + date_to: number; + error: string; + filtered_date_range: object; + handleDateChange: () => void; + handleFilterChange: () => void; + handleScroll: () => void; + has_selected_date: boolean; + is_empty: boolean; + is_loading: boolean; + is_mx_mlt: boolean; + is_switching: boolean; + is_virtual: boolean; + onMount: () => void; + onUnmount: () => void; +}; const DetailsComponent = ({ message = '', action_type = '' }) => { const address_hash_match = /:\s([0-9a-zA-Z]+.{25,28})/gm.exec(message.split(/,\s/)[0]); @@ -53,7 +98,7 @@ const DetailsComponent = ({ message = '', action_type = '' }) => { }; const getRowAction = row_obj => { - let action; + let action: any; if (row_obj.id && ['buy', 'sell'].includes(row_obj.action_type)) { action = getSupportedContracts()[extractInfoFromShortcode(row_obj.shortcode).category.toUpperCase()] && @@ -122,7 +167,7 @@ const Statement = ({ is_virtual, onMount, onUnmount, -}) => { +}: TStatements) => { React.useEffect(() => { onMount(); return () => { @@ -136,28 +181,31 @@ const Statement = ({ const columns = getStatementTableColumnsTemplate(currency); const columns_map = columns.reduce((map, item) => { map[item.col_index] = item; + // console.log('map', map); return map; }, {}); - const mobileRowRenderer = ({ row, passthrough }) => ( - -
- - -
-
- - -
-
- - -
-
- -
- - ); + const mobileRowRenderer = ({ row, passthrough }: TMobileRenderer) => { + return ( + +
+ + +
+
+ + +
+
+ + +
+
+ +
+ + ); + }; return ( @@ -235,30 +283,7 @@ const Statement = ({ ); }; -Statement.propTypes = { - action_type: PropTypes.string, - account_statistics: PropTypes.object, - component_icon: PropTypes.string, - currency: PropTypes.string, - data: MobxPropTypes.arrayOrObservableArray, - date_from: PropTypes.number, - date_to: PropTypes.number, - error: PropTypes.string, - filtered_date_range: PropTypes.object, - handleDateChange: PropTypes.func, - handleFilterChange: PropTypes.func, - handleScroll: PropTypes.func, - has_selected_date: PropTypes.bool, - is_empty: PropTypes.bool, - is_loading: PropTypes.bool, - is_mx_mlt: PropTypes.bool, - is_switching: PropTypes.bool, - is_virtual: PropTypes.bool, - onMount: PropTypes.func, - onUnmount: PropTypes.func, -}; - -export default connect(({ modules, client }) => ({ +export default connect(({ modules, client }: TRootStore) => ({ action_type: modules.statement.action_type, account_statistics: modules.statement.account_statistics, currency: client.currency, From 9550cfa63290e62f4b556267a5d0f6408a2ade8f Mon Sep 17 00:00:00 2001 From: aizad-deriv Date: Fri, 3 Feb 2023 09:46:58 +0800 Subject: [PATCH 2/5] fix: use Statement props from api-types than declaring it in ts file --- .../src/Components/market-symbol-icon-row.tsx | 6 +-- .../src/Components/placeholder-component.tsx | 12 ++--- .../src/Constants/data-table-constants.tsx | 18 ++++--- packages/reports/src/Containers/statement.tsx | 53 +++++++++---------- 4 files changed, 43 insertions(+), 46 deletions(-) diff --git a/packages/reports/src/Components/market-symbol-icon-row.tsx b/packages/reports/src/Components/market-symbol-icon-row.tsx index e44bd64f965c..e39173000993 100644 --- a/packages/reports/src/Components/market-symbol-icon-row.tsx +++ b/packages/reports/src/Components/market-symbol-icon-row.tsx @@ -4,14 +4,14 @@ import { Icon, Popover, IconTradeTypes } from '@deriv/components'; import { getMarketName, getTradeTypeName } from '../Helpers/market-underlying'; type TMarketSymbolIconRow = { - icon: string; + icon?: string | null; payload: { shortcode: string; display_name: string; action_type: string; }; - show_description: boolean; - should_show_multiplier: boolean; + show_description?: boolean; + should_show_multiplier?: boolean; }; const MarketSymbolIconRow = ({ diff --git a/packages/reports/src/Components/placeholder-component.tsx b/packages/reports/src/Components/placeholder-component.tsx index c7c4c170b794..234dbcc25ec1 100644 --- a/packages/reports/src/Components/placeholder-component.tsx +++ b/packages/reports/src/Components/placeholder-component.tsx @@ -2,13 +2,13 @@ import React from 'react'; import Loading from '_common/components/loading'; type TPlaceholderComponent = { - component_icon: string; - empty_message_component: React.ElementType; - has_selected_date: boolean; - is_empty: boolean; + component_icon?: string; + empty_message_component?: React.ElementType; + has_selected_date?: boolean; + is_empty?: boolean; is_loading: boolean; - localized_message: string; - localized_period_message: string; + localized_message?: string; + localized_period_message?: string; }; const PlaceholderComponent = ({ diff --git a/packages/reports/src/Constants/data-table-constants.tsx b/packages/reports/src/Constants/data-table-constants.tsx index 01013820fa3f..73a42746f104 100644 --- a/packages/reports/src/Constants/data-table-constants.tsx +++ b/packages/reports/src/Constants/data-table-constants.tsx @@ -46,6 +46,13 @@ type TColumnTemplateType = { col_index?: string; renderCellContent?: (props: TCellContentProps) => React.ReactNode; renderHeader?: (props: THeaderProps) => React.ReactNode; + icon?: string; + action_type?: string; + refid?: string; + date?: string; + balance?: string; + item?: any; + map?: any; }; type TMultiplierOpenPositionstemplateProps = { @@ -131,7 +138,7 @@ export const getProfitTableColumnsTemplate = (currency: string, items_count: num if (is_footer) { return localize('Profit/loss on the last {{item_count}} contracts', { item_count: items_count }); } - return ; + return ; }, }, { @@ -196,7 +203,7 @@ export const getOpenPositionsColumnsTemplate = (currency: string): TColumnTempla renderCellContent: ({ cell_value, row_obj, is_footer }: TCellContentProps) => { if (is_footer) return localize('Total'); - return ; + return ; }, }, { @@ -279,12 +286,7 @@ export const getMultiplierOpenPositionsColumnsTemplate = ({ if (is_footer) return localize('Total'); return ( - + ); }, }, diff --git a/packages/reports/src/Containers/statement.tsx b/packages/reports/src/Containers/statement.tsx index 266806f57265..fe6cbac45a28 100644 --- a/packages/reports/src/Containers/statement.tsx +++ b/packages/reports/src/Containers/statement.tsx @@ -14,35 +14,24 @@ import { ReportsMeta } from '../Components/reports-meta'; import EmptyTradeHistoryMessage from '../Components/empty-trade-history-message'; import { TPassthrough } from '../Types'; import { TRootStore } from 'Stores/index'; - -type TData = { - action: string; - action_type: string; - amount: string; - app_id: number; - balance: string; - date: string; - desc: string; - display_name: string; - id: number; - payout: string; - purchase_time: number; - refid: number; - shortcode: string; - transaction_time: number; -}; +import { Statement as TStatement } from '@deriv/api-types'; type TMobileRenderer = { - row: TData; + row: TStatement; passthrough: TPassthrough; }; -type TStatements = { +type TAction = { + message: string; + component?: React.ReactElement; +}; + +type TStatementsProps = { action_type: string; account_statistics: object; component_icon: string; currency: string; - data: Array; + data: Array; date_from: number; date_to: number; error: string; @@ -97,14 +86,21 @@ const DetailsComponent = ({ message = '', action_type = '' }) => { ); }; -const getRowAction = row_obj => { - let action: any; +const getRowAction = (row_obj: TStatement) => { + let action: TAction | string = { + message: '', + component: <>, + }; if (row_obj.id && ['buy', 'sell'].includes(row_obj.action_type)) { action = - getSupportedContracts()[extractInfoFromShortcode(row_obj.shortcode).category.toUpperCase()] && - !isForwardStarting(row_obj.shortcode, row_obj.purchase_time || row_obj.transaction_time) + getSupportedContracts()[ + extractInfoFromShortcode(row_obj.shortcode).category.toUpperCase() as keyof ReturnType< + typeof getSupportedContracts + > + ] && !isForwardStarting(row_obj.shortcode, row_obj.purchase_time || row_obj.transaction_time) ? getContractPath(row_obj.id) : { + message: '', component: ( { }; } - if (action?.message) { + if (typeof action !== 'string' && action?.message) { action.component = ; } @@ -167,7 +163,7 @@ const Statement = ({ is_virtual, onMount, onUnmount, -}: TStatements) => { +}: TStatementsProps) => { React.useEffect(() => { onMount(); return () => { @@ -181,7 +177,6 @@ const Statement = ({ const columns = getStatementTableColumnsTemplate(currency); const columns_map = columns.reduce((map, item) => { map[item.col_index] = item; - // console.log('map', map); return map; }, {}); @@ -254,7 +249,7 @@ const Statement = ({ getRowAction={row => getRowAction(row)} onScroll={handleScroll} passthrough={{ - isTopUp: item => is_virtual && item.action === 'Deposit', + isTopUp: (item: { action: string }) => is_virtual && item.action === 'Deposit', }} > @@ -269,7 +264,7 @@ const Statement = ({ rowRenderer={mobileRowRenderer} row_gap={8} passthrough={{ - isTopUp: item => is_virtual && item.action === 'Deposit', + isTopUp: (item: { action: string }) => is_virtual && item.action === 'Deposit', }} > From bec5c80108c3fe77eb66026842954d021111a66d Mon Sep 17 00:00:00 2001 From: aizad-deriv Date: Wed, 8 Mar 2023 16:34:49 +0800 Subject: [PATCH 3/5] fix: imported TAccountStatistics inside statement --- packages/reports/src/Containers/statement.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/reports/src/Containers/statement.tsx b/packages/reports/src/Containers/statement.tsx index cd9602521924..ac2fee4961ee 100644 --- a/packages/reports/src/Containers/statement.tsx +++ b/packages/reports/src/Containers/statement.tsx @@ -8,7 +8,7 @@ import { getSupportedContracts } from '_common/contract'; import { connect } from 'Stores/connect'; import { getStatementTableColumnsTemplate } from '../Constants/data-table-constants'; import PlaceholderComponent from '../Components/placeholder-component'; -import AccountStatistics from '../Components/account-statistics'; +import AccountStatistics, { TAccountStatistics } from '../Components/account-statistics'; import FilterComponent from '../Components/filter-component'; import { ReportsMeta } from '../Components/reports-meta'; import EmptyTradeHistoryMessage from '../Components/empty-trade-history-message'; From 75c2b4ab23489ea630cc5948291fb5f589a15c64 Mon Sep 17 00:00:00 2001 From: aizad-deriv Date: Wed, 8 Mar 2023 17:49:39 +0800 Subject: [PATCH 4/5] fix: made changes based on comments --- packages/reports/src/Components/filter-component.tsx | 2 +- packages/reports/src/Components/market-symbol-icon-row.tsx | 2 +- packages/reports/src/Containers/statement.tsx | 6 +++--- 3 files changed, 5 insertions(+), 5 deletions(-) diff --git a/packages/reports/src/Components/filter-component.tsx b/packages/reports/src/Components/filter-component.tsx index 608c1e6de178..285dafcf2131 100644 --- a/packages/reports/src/Components/filter-component.tsx +++ b/packages/reports/src/Components/filter-component.tsx @@ -5,7 +5,7 @@ import { connect } from 'Stores/connect'; import CompositeCalendar from './Form/CompositeCalendar'; import { TRootStore } from 'Stores/index'; -type TFilterComponent = { +export type TFilterComponent = { action_type: string; date_from: number; date_to: number; diff --git a/packages/reports/src/Components/market-symbol-icon-row.tsx b/packages/reports/src/Components/market-symbol-icon-row.tsx index 8897d312f496..662844cf84ca 100644 --- a/packages/reports/src/Components/market-symbol-icon-row.tsx +++ b/packages/reports/src/Components/market-symbol-icon-row.tsx @@ -4,7 +4,7 @@ import { Icon, Popover, IconTradeTypes } from '@deriv/components'; import { getMarketName, getTradeTypeName } from '../Helpers/market-underlying'; type TMarketSymbolIconRow = { - icon?: string | null; + icon?: string; payload: { shortcode: string; display_name: string; diff --git a/packages/reports/src/Containers/statement.tsx b/packages/reports/src/Containers/statement.tsx index ac2fee4961ee..375af1819bbf 100644 --- a/packages/reports/src/Containers/statement.tsx +++ b/packages/reports/src/Containers/statement.tsx @@ -9,7 +9,7 @@ import { connect } from 'Stores/connect'; import { getStatementTableColumnsTemplate } from '../Constants/data-table-constants'; import PlaceholderComponent from '../Components/placeholder-component'; import AccountStatistics, { TAccountStatistics } from '../Components/account-statistics'; -import FilterComponent from '../Components/filter-component'; +import FilterComponent, { TFilterComponent } from '../Components/filter-component'; import { ReportsMeta } from '../Components/reports-meta'; import EmptyTradeHistoryMessage from '../Components/empty-trade-history-message'; import { TRootStore } from 'Stores/index'; @@ -54,7 +54,7 @@ type TStatement = { date_from: number | null; date_to: number | null; error: string; - filtered_date_range: Record; + filtered_date_range: Pick; handleDateChange: () => void; handleFilterChange: () => void; handleScroll: () => void; @@ -203,7 +203,7 @@ const Statement = ({ return map; }, {} as Record); - // export type instead of any from 'DataList' component when it migrates to tsx + // TODO: Export type instead of any from 'DataList' component when it migrates to tsx const mobileRowRenderer = ({ row, passthrough }: any) => (
From 6e631617c406b65624b8b9a25b58c854ddbae5c8 Mon Sep 17 00:00:00 2001 From: aizad-deriv Date: Wed, 8 Mar 2023 18:13:38 +0800 Subject: [PATCH 5/5] fix: refactor based on suggestions --- packages/reports/src/Components/account-statistics.tsx | 2 +- packages/reports/src/Components/filter-component.tsx | 2 +- packages/reports/src/Containers/statement.tsx | 8 ++++---- 3 files changed, 6 insertions(+), 6 deletions(-) diff --git a/packages/reports/src/Components/account-statistics.tsx b/packages/reports/src/Components/account-statistics.tsx index aba01b328e91..2a1b605c4e51 100644 --- a/packages/reports/src/Components/account-statistics.tsx +++ b/packages/reports/src/Components/account-statistics.tsx @@ -3,7 +3,7 @@ import { MobileWrapper, Money, Text } from '@deriv/components'; import { localize } from '@deriv/translations'; import { connect } from 'Stores/connect'; -export type TAccountStatistics = { +type TAccountStatistics = { account_statistics: { total_withdrawals: number; total_deposits: number; diff --git a/packages/reports/src/Components/filter-component.tsx b/packages/reports/src/Components/filter-component.tsx index 285dafcf2131..608c1e6de178 100644 --- a/packages/reports/src/Components/filter-component.tsx +++ b/packages/reports/src/Components/filter-component.tsx @@ -5,7 +5,7 @@ import { connect } from 'Stores/connect'; import CompositeCalendar from './Form/CompositeCalendar'; import { TRootStore } from 'Stores/index'; -export type TFilterComponent = { +type TFilterComponent = { action_type: string; date_from: number; date_to: number; diff --git a/packages/reports/src/Containers/statement.tsx b/packages/reports/src/Containers/statement.tsx index 375af1819bbf..94ce32bafe56 100644 --- a/packages/reports/src/Containers/statement.tsx +++ b/packages/reports/src/Containers/statement.tsx @@ -8,8 +8,8 @@ import { getSupportedContracts } from '_common/contract'; import { connect } from 'Stores/connect'; import { getStatementTableColumnsTemplate } from '../Constants/data-table-constants'; import PlaceholderComponent from '../Components/placeholder-component'; -import AccountStatistics, { TAccountStatistics } from '../Components/account-statistics'; -import FilterComponent, { TFilterComponent } from '../Components/filter-component'; +import AccountStatistics from '../Components/account-statistics'; +import FilterComponent from '../Components/filter-component'; import { ReportsMeta } from '../Components/reports-meta'; import EmptyTradeHistoryMessage from '../Components/empty-trade-history-message'; import { TRootStore } from 'Stores/index'; @@ -47,14 +47,14 @@ type TGetSupportedContractsReturn = ReturnType; type TStatement = { action_type: string; - account_statistics: Pick; + account_statistics: React.ComponentProps['account_statistics']; component_icon: string; currency: string; data: TFormatStatementTransaction[]; date_from: number | null; date_to: number | null; error: string; - filtered_date_range: Pick; + filtered_date_range: React.ComponentProps['filtered_date_range']; handleDateChange: () => void; handleFilterChange: () => void; handleScroll: () => void;