From b9963f4c7839687ed0953314bb36dee1ba4336ea Mon Sep 17 00:00:00 2001
From: Akmal Djumakhodjaev <akmal@binary.com>
Date: Mon, 16 Jan 2023 21:18:38 +0800
Subject: [PATCH] Akmal / chore: migrate data-table-constants to typescript
 (#33)

* chore: migrate data-table-constants to typescript

* fix: refactor types
---
 .../components/src/components/label/label.tsx |   2 +-
 ...-constants.js => data-table-constants.tsx} | 130 +++++++++++-------
 2 files changed, 80 insertions(+), 52 deletions(-)
 rename packages/reports/src/Constants/{data-table-constants.js => data-table-constants.tsx} (76%)

diff --git a/packages/components/src/components/label/label.tsx b/packages/components/src/components/label/label.tsx
index 8bb0c5f953f8..922998e40da7 100644
--- a/packages/components/src/components/label/label.tsx
+++ b/packages/components/src/components/label/label.tsx
@@ -18,7 +18,7 @@ const available_sizes = ['regular', 'large'] as const;
 
 type TLabel = {
     mode: typeof available_modes[number];
-    size: typeof available_sizes[number];
+    size?: typeof available_sizes[number];
     className?: string;
 };
 
diff --git a/packages/reports/src/Constants/data-table-constants.js b/packages/reports/src/Constants/data-table-constants.tsx
similarity index 76%
rename from packages/reports/src/Constants/data-table-constants.js
rename to packages/reports/src/Constants/data-table-constants.tsx
index 52505da6305a..34b9f8d2a8b3 100644
--- a/packages/reports/src/Constants/data-table-constants.js
+++ b/packages/reports/src/Constants/data-table-constants.tsx
@@ -11,34 +11,58 @@ import IndicativeCell from '../Components/indicative-cell.jsx';
 import MarketSymbolIconRow from '../Components/market-symbol-icon-row.jsx';
 import ProfitLossCell from '../Components/profit_loss_cell.jsx';
 import CurrencyWrapper from '../Components/currency-wrapper';
+import { ITransformer } from 'mobx-utils';
 
-const getModeFromValue = key => {
-    const map = {
-        buy: 'success',
-        deposit: 'success',
-        hold: 'warn',
-        release: 'success',
-        sell: 'danger',
-        withdrawal: 'info',
-        default: 'default',
-        adjustment: 'adjustment',
-        transfer: 'transfer',
-    };
+const map = {
+    buy: 'success',
+    deposit: 'success',
+    hold: 'warn',
+    release: 'success',
+    sell: 'danger',
+    withdrawal: 'info',
+    default: 'default',
+    adjustment: 'adjustment',
+    transfer: 'transfer',
+} as const;
 
-    if (Object.keys(map).find(x => x === key)) {
-        return map[key];
-    }
+type TKeys = keyof typeof map;
 
-    return map.default;
+const getModeFromValue = (key: TKeys) => map[key] || map.default;
+
+type TCellContentProps = {
+    cell_value: TKeys;
+    passthrough: any;
+    row_obj: any;
+    is_footer: boolean;
+};
+
+type THeaderProps = {
+    title: React.ReactNode;
+};
+
+type TColumnTemplateType = {
+    key?: string;
+    title?: React.ReactNode;
+    col_index?: string;
+    renderCellContent?: (props: TCellContentProps) => React.ReactNode;
+    renderHeader?: (props: THeaderProps) => React.ReactNode;
+};
+
+type TMultiplierOpenPositionstemplateProps = {
+    currency: string;
+    onClickCancel: () => void;
+    onClickSell: () => void;
+    getPositionById: (id: string) => ITransformer<any, any>;
+    server_time: moment.Moment;
 };
 
 /* eslint-disable react/display-name, react/prop-types */
-export const getStatementTableColumnsTemplate = currency => [
+export const getStatementTableColumnsTemplate = (currency: string): TColumnTemplateType[] => [
     {
         key: 'icon',
         title: isMobile() ? '' : localize('Type'),
         col_index: 'icon',
-        renderCellContent: ({ cell_value, passthrough, row_obj }) => {
+        renderCellContent: ({ cell_value, passthrough, row_obj }: TCellContentProps) => {
             const icon = passthrough.isTopUp(row_obj) ? 'icCashierTopUp' : null;
             return (
                 <MarketSymbolIconRow action={cell_value} icon={icon} key={row_obj.transaction_id} payload={row_obj} />
@@ -48,7 +72,7 @@ export const getStatementTableColumnsTemplate = currency => [
     {
         title: localize('Ref. ID'),
         col_index: 'refid',
-        renderCellContent: ({ cell_value, row_obj }) => {
+        renderCellContent: ({ cell_value, row_obj }: TCellContentProps) => {
             return (
                 <Popover
                     alignment={'top'}
@@ -67,7 +91,7 @@ export const getStatementTableColumnsTemplate = currency => [
     {
         title: localize('Transaction time'),
         col_index: 'date',
-        renderCellContent: ({ cell_value }) => {
+        renderCellContent: ({ cell_value }: TCellContentProps) => {
             return <span>{cell_value} GMT</span>;
         },
     },
@@ -75,7 +99,7 @@ export const getStatementTableColumnsTemplate = currency => [
         key: 'mode',
         title: localize('Transaction'),
         col_index: 'action_type',
-        renderCellContent: ({ cell_value, passthrough, row_obj }) => (
+        renderCellContent: ({ cell_value, passthrough, row_obj }: TCellContentProps) => (
             <Label mode={getModeFromValue(cell_value)}>
                 {(passthrough.isTopUp(row_obj) && localize('Top up')) || row_obj.action}
             </Label>
@@ -84,7 +108,7 @@ export const getStatementTableColumnsTemplate = currency => [
     {
         title: localize('Credit/Debit'),
         col_index: 'amount',
-        renderCellContent: ({ cell_value }) => (
+        renderCellContent: ({ cell_value }: TCellContentProps) => (
             <div className={`amount--${getProfitOrLoss(cell_value)}`}>
                 <Money has_sign amount={cell_value.replace(/[,]+/g, '')} currency={currency} />
             </div>
@@ -93,15 +117,17 @@ export const getStatementTableColumnsTemplate = currency => [
     {
         title: localize('Balance'),
         col_index: 'balance',
-        renderCellContent: ({ cell_value }) => <Money amount={cell_value.replace(/[,]+/g, '')} currency={currency} />,
+        renderCellContent: ({ cell_value }: TCellContentProps) => (
+            <Money amount={cell_value.replace(/[,]+/g, '')} currency={currency} />
+        ),
     },
 ];
-export const getProfitTableColumnsTemplate = (currency, items_count) => [
+export const getProfitTableColumnsTemplate = (currency: string, items_count: number): TColumnTemplateType[] => [
     {
         key: 'icon',
         title: isMobile() ? '' : localize('Type'),
         col_index: 'action_type',
-        renderCellContent: ({ cell_value, row_obj, is_footer }) => {
+        renderCellContent: ({ cell_value, row_obj, is_footer }: TCellContentProps) => {
             if (is_footer) {
                 return localize('Profit/loss on the last {{item_count}} contracts', { item_count: items_count });
             }
@@ -115,13 +141,13 @@ export const getProfitTableColumnsTemplate = (currency, items_count) => [
     {
         title: localize('Currency'),
         col_index: 'currency',
-        renderCellContent: ({ is_footer }) =>
+        renderCellContent: ({ is_footer }: TCellContentProps) =>
             is_footer ? '' : <CurrencyWrapper currency={getCurrencyDisplayCode(currency)} />,
     },
     {
         title: localize('Buy time'),
         col_index: 'purchase_time',
-        renderCellContent: ({ cell_value, is_footer }) => {
+        renderCellContent: ({ cell_value, is_footer }: TCellContentProps) => {
             if (is_footer) return '';
             return <span>{cell_value} GMT</span>;
         },
@@ -129,7 +155,7 @@ export const getProfitTableColumnsTemplate = (currency, items_count) => [
     {
         title: localize('Buy price'),
         col_index: 'buy_price',
-        renderCellContent: ({ cell_value, is_footer }) => {
+        renderCellContent: ({ cell_value, is_footer }: TCellContentProps) => {
             if (is_footer) return '';
 
             return <Money amount={cell_value} currency={currency} />;
@@ -138,8 +164,8 @@ export const getProfitTableColumnsTemplate = (currency, items_count) => [
     {
         title: localize('Sell time'),
         col_index: 'sell_time',
-        renderHeader: ({ title }) => <span>{title}</span>,
-        renderCellContent: ({ cell_value, is_footer }) => {
+        renderHeader: ({ title }: THeaderProps) => <span>{title}</span>,
+        renderCellContent: ({ cell_value, is_footer }: TCellContentProps) => {
             if (is_footer) return '';
             return <span>{cell_value} GMT</span>;
         },
@@ -147,7 +173,7 @@ export const getProfitTableColumnsTemplate = (currency, items_count) => [
     {
         title: localize('Sell price'),
         col_index: 'sell_price',
-        renderCellContent: ({ cell_value, is_footer }) => {
+        renderCellContent: ({ cell_value, is_footer }: TCellContentProps) => {
             if (is_footer) return '';
 
             return <Money amount={cell_value} currency={currency} />;
@@ -156,18 +182,18 @@ export const getProfitTableColumnsTemplate = (currency, items_count) => [
     {
         title: localize('Profit / Loss'),
         col_index: 'profit_loss',
-        renderCellContent: ({ cell_value }) => (
+        renderCellContent: ({ cell_value }: TCellContentProps) => (
             <ProfitLossCell value={cell_value}>
                 <Money has_sign amount={cell_value.replace(/[,]+/g, '')} currency={currency} />
             </ProfitLossCell>
         ),
     },
 ];
-export const getOpenPositionsColumnsTemplate = currency => [
+export const getOpenPositionsColumnsTemplate = (currency: string): TColumnTemplateType[] => [
     {
         title: isMobile() ? '' : localize('Type'),
         col_index: 'type',
-        renderCellContent: ({ cell_value, row_obj, is_footer }) => {
+        renderCellContent: ({ cell_value, row_obj, is_footer }: TCellContentProps) => {
             if (is_footer) return localize('Total');
 
             return <MarketSymbolIconRow action={cell_value} key={row_obj.id} payload={row_obj.contract_info} />;
@@ -180,25 +206,25 @@ export const getOpenPositionsColumnsTemplate = currency => [
     {
         title: localize('Currency'),
         col_index: 'currency',
-        renderCellContent: ({ row_obj }) => (
+        renderCellContent: ({ row_obj }: TCellContentProps) => (
             <CurrencyWrapper currency={getCurrencyDisplayCode(row_obj.contract_info?.currency)} />
         ),
     },
     {
         title: localize('Buy price'),
         col_index: 'purchase',
-        renderCellContent: ({ cell_value }) => <Money amount={cell_value} currency={currency} />,
+        renderCellContent: ({ cell_value }: TCellContentProps) => <Money amount={cell_value} currency={currency} />,
     },
     {
         title: localize('Payout limit'),
         col_index: 'payout',
-        renderCellContent: ({ cell_value }) =>
+        renderCellContent: ({ cell_value }: TCellContentProps) =>
             cell_value ? <Money amount={cell_value} currency={currency} /> : <span>-</span>,
     },
     {
         title: localize('Indicative profit/loss'),
         col_index: 'profit',
-        renderCellContent: ({ row_obj }) => {
+        renderCellContent: ({ row_obj }: TCellContentProps) => {
             if (!row_obj.profit_loss && (!row_obj.contract_info || !row_obj.contract_info.profit)) return;
             const profit = row_obj.profit_loss || row_obj.contract_info.profit;
             // eslint-disable-next-line consistent-return
@@ -220,7 +246,7 @@ export const getOpenPositionsColumnsTemplate = currency => [
     {
         title: localize('Indicative price'),
         col_index: 'indicative',
-        renderCellContent: ({ cell_value, row_obj, is_footer }) => (
+        renderCellContent: ({ cell_value, row_obj, is_footer }: TCellContentProps) => (
             <IndicativeCell
                 amount={+cell_value}
                 currency={currency}
@@ -233,7 +259,9 @@ export const getOpenPositionsColumnsTemplate = currency => [
     {
         title: localize('Remaining time'),
         col_index: 'id',
-        renderCellContent: ({ row_obj }) => <ProgressSliderStream contract_info={row_obj.contract_info} />,
+        renderCellContent: ({ row_obj }: TCellContentProps) => (
+            <ProgressSliderStream contract_info={row_obj.contract_info} />
+        ),
     },
 ];
 
@@ -243,11 +271,11 @@ export const getMultiplierOpenPositionsColumnsTemplate = ({
     onClickSell,
     getPositionById,
     server_time,
-}) => [
+}: TMultiplierOpenPositionstemplateProps): TColumnTemplateType[] => [
     {
         title: isMobile() ? '' : localize('Type'),
         col_index: 'type',
-        renderCellContent: ({ cell_value, row_obj, is_footer }) => {
+        renderCellContent: ({ cell_value, row_obj, is_footer }: TCellContentProps) => {
             if (is_footer) return localize('Total');
 
             return (
@@ -263,20 +291,20 @@ export const getMultiplierOpenPositionsColumnsTemplate = ({
     {
         title: localize('Multiplier'),
         col_index: 'multiplier',
-        renderCellContent: ({ row_obj }) =>
+        renderCellContent: ({ row_obj }: TCellContentProps) =>
             row_obj.contract_info && row_obj.contract_info.multiplier ? `x${row_obj.contract_info.multiplier}` : '',
     },
     {
         title: localize('Currency'),
         col_index: 'currency',
-        renderCellContent: ({ row_obj }) => (
+        renderCellContent: ({ row_obj }: TCellContentProps) => (
             <CurrencyWrapper currency={getCurrencyDisplayCode(row_obj.contract_info?.currency)} />
         ),
     },
     {
         title: localize('Stake'),
         col_index: 'buy_price',
-        renderCellContent: ({ row_obj }) => {
+        renderCellContent: ({ row_obj }: TCellContentProps) => {
             if (row_obj.contract_info) {
                 const { ask_price: cancellation_price = 0 } = row_obj.contract_info.cancellation || {};
                 return <Money amount={row_obj.contract_info.buy_price - cancellation_price} currency={currency} />;
@@ -287,7 +315,7 @@ export const getMultiplierOpenPositionsColumnsTemplate = ({
     {
         title: localize('Deal cancel. fee'),
         col_index: 'cancellation',
-        renderCellContent: ({ row_obj }) => {
+        renderCellContent: ({ row_obj }: TCellContentProps) => {
             if (!row_obj.contract_info || !row_obj.contract_info.underlying) return '-';
 
             if (!shouldShowCancellation(row_obj.contract_info.underlying)) return localize('N/A');
@@ -305,12 +333,12 @@ export const getMultiplierOpenPositionsColumnsTemplate = ({
             <Localize i18n_default_text='Buy price' />
         ),
         col_index: 'purchase',
-        renderCellContent: ({ cell_value }) => <Money amount={cell_value} currency={currency} />,
+        renderCellContent: ({ cell_value }: TCellContentProps) => <Money amount={cell_value} currency={currency} />,
     },
     {
         title: <Localize i18n_default_text='Take profit<0 />Stop loss' components={[<br key={0} />]} />,
         col_index: 'limit_order',
-        renderCellContent: ({ row_obj, is_footer }) => {
+        renderCellContent: ({ row_obj, is_footer }: TCellContentProps) => {
             if (is_footer) {
                 return '';
             }
@@ -339,7 +367,7 @@ export const getMultiplierOpenPositionsColumnsTemplate = ({
     {
         title: localize('Current stake'),
         col_index: 'bid_price',
-        renderCellContent: ({ row_obj, is_footer }) => {
+        renderCellContent: ({ row_obj, is_footer }: TCellContentProps) => {
             if (is_footer) {
                 return '';
             }
@@ -366,7 +394,7 @@ export const getMultiplierOpenPositionsColumnsTemplate = ({
             <Localize i18n_default_text='Total<0 />profit/loss' components={[<br key={0} />]} />
         ),
         col_index: 'profit',
-        renderCellContent: ({ row_obj }) => {
+        renderCellContent: ({ row_obj }: TCellContentProps) => {
             if (!row_obj.contract_info || !row_obj.contract_info.profit) return null;
             const total_profit = getTotalProfit(row_obj.contract_info);
             // eslint-disable-next-line consistent-return
@@ -388,7 +416,7 @@ export const getMultiplierOpenPositionsColumnsTemplate = ({
     {
         title: localize('Action'),
         col_index: 'action',
-        renderCellContent: ({ row_obj, is_footer }) => {
+        renderCellContent: ({ row_obj, is_footer }: TCellContentProps) => {
             if (is_footer) {
                 return <div className='open-positions__row-action' />;
             }