From 0e07079a84ffd1e09846830846c3e51d87949209 Mon Sep 17 00:00:00 2001
From: aizad-deriv <103104395+aizad-deriv@users.noreply.github.com>
Date: Thu, 16 Feb 2023 19:59:16 +0800
Subject: [PATCH] chore: migrated indicative cell to tsx (#44)

* chore: migrated indicative cell to tsx

* fix: added types to usestate

* fix: change type

* fix: change function type to boolean

* fix: imported TContractInfo from shared file into indicative-cell
---
 ...ndicative-cell.jsx => indicative-cell.tsx} | 36 +++++++++++--------
 .../src/Constants/data-table-constants.tsx    |  2 +-
 2 files changed, 23 insertions(+), 15 deletions(-)
 rename packages/reports/src/Components/{indicative-cell.jsx => indicative-cell.tsx} (71%)

diff --git a/packages/reports/src/Components/indicative-cell.jsx b/packages/reports/src/Components/indicative-cell.tsx
similarity index 71%
rename from packages/reports/src/Components/indicative-cell.jsx
rename to packages/reports/src/Components/indicative-cell.tsx
index 622cab8bfc18..e291253310c5 100644
--- a/packages/reports/src/Components/indicative-cell.jsx
+++ b/packages/reports/src/Components/indicative-cell.tsx
@@ -1,11 +1,29 @@
-import PropTypes from 'prop-types';
 import React from 'react';
 import { Icon, Money, DesktopWrapper, ContractCard } from '@deriv/components';
 import { getCardLabels } from '_common/contract';
 import { connect } from 'Stores/connect';
+import { TRootStore } from 'Stores/index';
+import { TContractInfo } from '@deriv/shared';
 
-const IndicativeCell = ({ amount, currency, contract_info, is_footer, onClickSell, is_sell_requested }) => {
-    const [movement, setMovement] = React.useState(null);
+type TIndicativeCell = {
+    amount: number;
+    contract_info: TContractInfo;
+    currency: string;
+    status: string;
+    is_footer: boolean;
+    is_sell_requested: boolean;
+    onClickSell: () => void;
+};
+
+const IndicativeCell = ({
+    amount,
+    currency,
+    contract_info,
+    is_footer,
+    onClickSell,
+    is_sell_requested,
+}: TIndicativeCell) => {
+    const [movement, setMovement] = React.useState<string | null>(null);
     const [amount_state, setAmountState] = React.useState(0);
 
     React.useEffect(() => {
@@ -40,16 +58,6 @@ const IndicativeCell = ({ amount, currency, contract_info, is_footer, onClickSel
     );
 };
 
-IndicativeCell.propTypes = {
-    amount: PropTypes.number,
-    contract_info: PropTypes.object,
-    currency: PropTypes.string,
-    status: PropTypes.string,
-    is_footer: PropTypes.bool,
-    is_sell_requested: PropTypes.func,
-    onClickSell: PropTypes.func,
-};
-
-export default connect(({ portfolio }) => ({
+export default connect(({ portfolio }: TRootStore) => ({
     onClickSell: portfolio.onClickSell,
 }))(IndicativeCell);
diff --git a/packages/reports/src/Constants/data-table-constants.tsx b/packages/reports/src/Constants/data-table-constants.tsx
index 6d25f78d0b87..0ea840c7de14 100644
--- a/packages/reports/src/Constants/data-table-constants.tsx
+++ b/packages/reports/src/Constants/data-table-constants.tsx
@@ -7,7 +7,7 @@ import ProgressSliderStream from '../Containers/progress-slider-stream';
 
 import { getCardLabels } from '_common/contract';
 import { getProfitOrLoss } from '../Helpers/profit-loss';
-import IndicativeCell from '../Components/indicative-cell.jsx';
+import IndicativeCell from '../Components/indicative-cell';
 import MarketSymbolIconRow from '../Components/market-symbol-icon-row';
 import ProfitLossCell from '../Components/profit_loss_cell.jsx';
 import CurrencyWrapper from '../Components/currency-wrapper';