henry/matin/feq-79/remove-connect-from-reports (deriv-com#9446)

* fix: initial commit * fix: initial setup for useReportsStore * chore: remove connect from account-statistics (#2) * chore: remove connect from filter-component (#3) * fix: refactor useReportsStores * chore: remove connect from Indicative-cell (#4) * fix: reduce typescript errors * fix: sonarcloud * fix: resolve typescript errors * chore: remove connect from composite-calendar * fix: type fix * fix: remove connect files and mobx providers * fix: resolve comments * fix: resolve comment * fix: remove unused files * fix: fix types * fix: resolve comments * fix: resolve comments * fix: snoarcloud * fix: comment * fix: comment * fix: resolve comment * fix: add onclick to test * fix: reset with master * fix: resolve comment --------- Co-authored-by: Matin shafiei <matin@binary.com> Co-authored-by: “Matin-deriv” <matin@deriv.com>
shayan-deriv · Sep 26, 2023 · 76bddeb · 76bddeb
1 parent b830843
commit 76bddeb
Show file tree

Hide file tree

Showing 42 changed files with 553 additions and 771 deletions.
diff --git a/packages/components/src/components/contract-card/contract-card-items/contract-card-body.tsx b/packages/components/src/components/contract-card/contract-card-items/contract-card-body.tsx
@@ -26,7 +26,7 @@ export type TGeneralContractCardBodyProps = {
     current_focus?: string | null;
     error_message_alignment?: string;
     getCardLabels: TGetCardLables;
-    getContractById: (contract_id?: number) => TContractStore;
+    getContractById: (contract_id: number) => TContractStore;
     should_show_cancellation_warning: boolean;
     has_progress_slider: boolean;
     is_mobile: boolean;

diff --git a/packages/components/src/components/contract-card/contract-card-items/toggle-card-dialog.tsx b/packages/components/src/components/contract-card/contract-card-items/toggle-card-dialog.tsx
@@ -60,7 +60,7 @@ const ToggleCardDialog = ({
 
     const toggle_ref = React.useRef<HTMLDivElement>(null);
     const dialog_ref = React.useRef<HTMLDivElement>(null);
-    const contract = getContractById(contract_id);
+    const contract = getContractById(Number(contract_id));
 
     React.useEffect(() => {
         ContractUpdateFormWrapper = connectWithContractUpdate?.(ContractUpdateForm) || ContractUpdateForm;

diff --git a/packages/components/src/components/contract-card/contract-card.tsx b/packages/components/src/components/contract-card/contract-card.tsx
@@ -18,7 +18,7 @@ type TContractCardProps = {
     is_multiplier: boolean;
     is_positions: boolean;
     is_unsupported: boolean;
-    onClickRemove: (contract_id?: number) => void;
+    onClickRemove: (contract_id: number) => void;
     profit_loss: number;
     result: string;
     should_show_result_overlay: boolean;

diff --git a/packages/components/src/components/contract-card/result-overlay/result-overlay.tsx b/packages/components/src/components/contract-card/result-overlay/result-overlay.tsx
@@ -14,7 +14,7 @@ type TResultOverlayProps = {
     is_unsupported: boolean;
     is_visible: boolean;
     onClick: () => void;
-    onClickRemove: (contract_id?: number) => void;
+    onClickRemove: (contract_id: number) => void;
     result: string;
 };
 
@@ -88,7 +88,7 @@ const ResultOverlay = ({
                         <span
                             id={`dc_contract_card_${contract_id}_result_close_icon`}
                             className='dc-result__close-btn'
-                            onClick={() => onClickRemove(contract_id)}
+                            onClick={() => onClickRemove(Number(contract_id))}
                         />
                     )}
                     {getContractPath && (

diff --git a/packages/components/src/components/data-list/data-list-cell.tsx b/packages/components/src/components/data-list/data-list-cell.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import classNames from 'classnames';
 import { isTurbosContract, isVanillaContract } from '@deriv/shared';
-import { TPassThrough, TRow } from './data-list';
+import { TPassThrough, TRow } from '../types/common.types';
 
 export type TColIndex =
     | 'type'
@@ -36,22 +36,24 @@ export type TDataListCell = {
     className?: string;
     column?: {
         key?: string;
-        title?: React.ReactNode;
-        col_index: TColIndex;
+        title?: string;
+        col_index?: TColIndex;
         renderCellContent?: (props: TRenderCellContent) => React.ReactNode;
-        renderHeader?: (props: THeaderProps) => React.ReactNode;
+        renderHeader?: (prop: renderHeaderType) => React.ReactNode;
     };
     is_footer?: boolean;
     passthrough?: TPassThrough;
-    row: TRow;
+    row?: TRow;
 };
 
+type renderHeaderType = { title?: string; is_vanilla?: boolean };
+
 const DataListCell = ({ className, column, is_footer, passthrough, row }: TDataListCell) => {
     if (!column) return null;
     const { col_index, title } = column;
-    const cell_value = row[col_index];
-    const is_turbos = isTurbosContract(row.contract_info?.contract_type);
-    const is_vanilla = isVanillaContract(row.contract_info?.contract_type);
+    const cell_value = row?.[col_index as TColIndex];
+    const is_turbos = isTurbosContract(row?.contract_info?.contract_type);
+    const is_vanilla = isVanillaContract(row?.contract_info?.contract_type);
 
     return (
         <div className={classNames(className, column.col_index)}>
@@ -66,7 +68,7 @@ const DataListCell = ({ className, column, is_footer, passthrough, row }: TDataL
                           cell_value,
                           is_footer,
                           passthrough,
-                          row_obj: row,
+                          row_obj: row as TRow,
                           is_vanilla,
                           is_turbos,
                       })

diff --git a/packages/components/src/components/data-list/data-list-row.tsx b/packages/components/src/components/data-list/data-list-row.tsx
@@ -2,7 +2,9 @@ import classNames from 'classnames';
 import React from 'react';
 import { NavLink } from 'react-router-dom';
 import { useIsMounted } from '@deriv/shared';
-import { TPassThrough, TRow, TRowRenderer } from './data-list';
+import { TRowRenderer } from './data-list';
+import { TPassThrough } from '../types/common.types';
+import { TSource } from '../data-table/data-table';
 
 type TDataListRow = {
     action_desc?: {
@@ -17,7 +19,7 @@ type TDataListRow = {
     is_new_row: boolean;
     is_scrolling: boolean;
     passthrough?: TPassThrough;
-    row: TRow;
+    row: TSource;
 };
 
 const DataListRow = ({

diff --git a/packages/components/src/components/data-list/data-list.tsx b/packages/components/src/components/data-list/data-list.tsx
@@ -17,6 +17,12 @@ import DataListCell, { TColIndex, TDataListCell } from './data-list-cell';
 import DataListRow from './data-list-row';
 import ThemedScrollbars from '../themed-scrollbars';
 import { MeasuredCellParent } from 'react-virtualized/dist/es/CellMeasurer';
+import { TTableRowItem, TPassThrough, TRow } from '../types/common.types';
+
+const List = _List as unknown as React.FC<ListProps>;
+const AutoSizer = _AutoSizer as unknown as React.FC<AutoSizerProps>;
+const CellMeasurer = _CellMeasurer as unknown as React.FC<CellMeasurerProps>;
+export type TRowRenderer = (params: Partial<TMobileRowRenderer>) => React.ReactNode;
 
 type TMobileRowRenderer = {
     row?: TRow;
@@ -26,19 +32,14 @@ type TMobileRowRenderer = {
     onClickCancel: (contract_id?: number) => void;
     onClickSell: (contract_id?: number) => void;
     measure?: () => void;
+    passthrough?: TPassThrough;
 };
-const List = _List as unknown as React.FC<ListProps>;
-const AutoSizer = _AutoSizer as unknown as React.FC<AutoSizerProps>;
-const CellMeasurer = _CellMeasurer as unknown as React.FC<CellMeasurerProps>;
-export type TRowRenderer = (params: Partial<TMobileRowRenderer>) => React.ReactNode;
-export type TPassThrough = { isTopUp: (item: TRow) => boolean };
-export type TRow = { [key: string]: any };
 
 export type TDataList = {
     className?: string;
     data_source: TRow[];
     footer?: TRow;
-    getRowAction?: (row: TRow) => { component: JSX.Element } | string;
+    getRowAction?: (row: TRow) => TTableRowItem;
     getRowSize?: (params: { index: number }) => number;
     keyMapper?: (row: TRow) => number | string;
     onRowsRendered?: (params: IndexRange) => void;
@@ -121,6 +122,7 @@ const DataList = React.memo(
 
             const getContent = ({ measure }: GetContentType = {}) => (
                 <DataListRow
+                    //@ts-expect-error needs refactor
                     action_desc={action_desc}
                     destination_link={destination_link}
                     is_new_row={!items_transition_map_ref.current[row_key]}

diff --git a/packages/components/src/components/data-table/data-table.tsx b/packages/components/src/components/data-table/data-table.tsx
@@ -44,14 +44,14 @@ type TDataTable = {
     getActionColumns?: (params: { row_obj?: TSource; is_header?: boolean; is_footer: boolean }) => TTableRowItem[];
     getRowSize?: ((params: { index: number }) => number) | number;
     measure?: () => void;
-    getRowAction?: (row: Record<string, unknown>) => { component: JSX.Element } | string;
+    getRowAction?: (item: TSource) => TTableRowItem;
     onScroll?: React.UIEventHandler<HTMLDivElement>;
     id?: number;
-    passthrough?: (item: TSource) => boolean;
+    passthrough?: React.ComponentProps<typeof TableRow>['passthrough'];
     autoHide?: boolean;
-    footer: Record<string, unknown>;
-    preloaderCheck: (param: TSource) => boolean;
-    data_source: TSource[];
+    footer?: Record<string, unknown> | React.ReactNode;
+    preloaderCheck?: (param: TSource) => boolean;
+    data_source?: TSource[];
     keyMapper?: (row: TSource) => number | string;
 };
 
@@ -82,7 +82,8 @@ const DataTable = ({
             cache_ref.current = new CellMeasurerCache({
                 fixedWidth: true,
                 keyMapper: row_index => {
-                    if (row_index < data_source.length) return keyMapper?.(data_source[row_index]) || row_index;
+                    if (data_source && row_index < data_source.length)
+                        return keyMapper?.(data_source[row_index]) || row_index;
                     return row_index;
                 },
             });
@@ -101,10 +102,13 @@ const DataTable = ({
     };
 
     const rowRenderer = ({ style, index, key, parent }: TRowRenderer) => {
-        const item = data_source[index];
-        const action = getRowAction && getRowAction(item);
-        const contract_id = item.contract_id || item.id;
-        const row_key = keyMapper?.(item) || key;
+        const item = data_source?.[index];
+        const contract_id = (item?.contract_id || item?.id) as string;
+        let action: TTableRowItem | undefined, row_key;
+        if (item) {
+            action = getRowAction && getRowAction(item);
+            row_key = keyMapper?.(item) || key;
+        }
 
         // If row content is complex, consider rendering a light-weight placeholder while scrolling.
         const getContent = ({ measure }: TMeasure) => (
@@ -119,7 +123,7 @@ const DataTable = ({
                 passthrough={passthrough}
                 replace={typeof action === 'object' ? action : undefined}
                 row_obj={item}
-                show_preloader={typeof preloaderCheck === 'function' ? preloaderCheck(item) : false}
+                show_preloader={typeof preloaderCheck === 'function' && item ? preloaderCheck(item) : false}
                 to={typeof action === 'string' ? action : undefined}
                 is_dynamic_height={is_dynamic_height}
                 is_footer={false}
@@ -185,7 +189,7 @@ const DataTable = ({
                                     height={height}
                                     overscanRowCount={1}
                                     ref={(ref: Grid) => (list_ref.current = ref)}
-                                    rowCount={data_source.length}
+                                    rowCount={data_source?.length || 0}
                                     rowHeight={
                                         is_dynamic_height && cache_ref?.current?.rowHeight
                                             ? cache_ref?.current?.rowHeight

diff --git a/packages/components/src/components/data-table/table-row-info.tsx b/packages/components/src/components/data-table/table-row-info.tsx
@@ -31,7 +31,7 @@ const TableRowInfo = ({ replace, is_footer, cells, className, is_dynamic_height,
                 onClick={is_footer || !replace ? undefined : toggleDetails}
                 className={classNames(className, { 'statement__row--detail': show_details })}
             >
-                {show_details ? <div>{replace?.component}</div> : cells}
+                {show_details && typeof replace === 'object' ? <div>{replace?.component}</div> : cells}
             </div>
         );
     }
@@ -40,7 +40,7 @@ const TableRowInfo = ({ replace, is_footer, cells, className, is_dynamic_height,
             onClick={is_footer || !replace ? undefined : toggleDetails}
             className={classNames(className, { 'statement__row--detail': show_details })}
         >
-            {show_details ? (
+            {show_details && typeof replace === 'object' ? (
                 <ThemedScrollbars height='80px'>
                     <div>{replace?.component}</div>
                 </ThemedScrollbars>

diff --git a/packages/components/src/components/data-table/table-row.tsx b/packages/components/src/components/data-table/table-row.tsx
@@ -11,7 +11,7 @@ type TTableRow<T> = {
     id?: string;
     is_footer: boolean;
     is_header?: boolean;
-    passthrough?: (item: TSource) => boolean;
+    passthrough?: { isTopUp: (item: TSource) => boolean };
     replace?: TTableRowItem;
     to?: string;
     show_preloader?: boolean;

diff --git a/packages/components/src/components/dialog/dialog.tsx b/packages/components/src/components/dialog/dialog.tsx
@@ -26,7 +26,7 @@ type TDialog = {
     onConfirm: () => void;
     onEscapeButtonCancel?: () => void;
     portal_element_id?: string;
-    title?: string;
+    title?: string | JSX.Element;
 };
 
 const Dialog = ({

diff --git a/packages/components/src/components/filter-dropdown/filter-dropdown.tsx b/packages/components/src/components/filter-dropdown/filter-dropdown.tsx
@@ -13,14 +13,14 @@ type TListItem = {
 };
 
 type TFilterDropdown = {
-    dropdown_className: string;
+    dropdown_className?: string;
     dropdown_display_className: string;
     filter_list: Array<TListItem>;
     handleFilterChange: (e: string) => void;
-    initial_filter: string;
+    initial_filter?: string;
     initial_selected_filter: string;
-    label: string;
-    hide_top_placeholder: boolean;
+    label?: string;
+    hide_top_placeholder?: boolean;
 };
 
 const FilterDropdown = ({

diff --git a/packages/components/src/components/infinite-data-list/infinite-data-list.tsx b/packages/components/src/components/infinite-data-list/infinite-data-list.tsx
@@ -1,20 +1,20 @@
 import React from 'react';
 import { InfiniteLoader as _InfiniteLoader, InfiniteLoaderProps, Index, IndexRange } from 'react-virtualized';
-import DataList, { TRow, TRowRenderer } from '../data-list/data-list';
+import DataList from '../data-list/data-list';
 
 const InfiniteLoader = _InfiniteLoader as unknown as React.FC<InfiniteLoaderProps>;
-type TInfiniteDatalist = {
+
+type TInfiniteDatalist = Pick<
+    React.ComponentProps<typeof DataList>,
+    'getRowSize' | 'onRowsRendered' | 'onScroll' | 'overscanRowCount' | 'rowRenderer'
+> & {
     className: string;
     data_list_className: string;
     has_more_items_to_load: boolean;
-    items: TRow[];
-    keyMapperFn?: (row: TRow) => number | string;
-    loadMoreRowsFn: <T>(params: IndexRange) => Promise<T>;
-    onScroll: () => void;
-    rowRenderer: TRowRenderer;
     has_filler: boolean;
-    overscanRowCount: number;
-    getRowSize?: (params: { index: number }) => number;
+    items: React.ComponentProps<typeof DataList>['data_source'];
+    keyMapperFn: React.ComponentProps<typeof DataList>['keyMapper'];
+    loadMoreRowsFn: <T>(params: IndexRange) => Promise<T>;
 };
 
 const InfiniteDataList = ({

diff --git a/packages/components/src/components/input-field/input-field.tsx b/packages/components/src/components/input-field/input-field.tsx
@@ -23,7 +23,7 @@ type TInputField = {
     classNamePrefix?: string;
     classNameWrapper?: string; // CSS class for the component wrapper
     currency: string;
-    current_focus: string;
+    current_focus?: string | null;
     data_testid?: string;
     data_tip?: string;
     data_value?: string;

diff --git a/packages/components/src/components/input-field/input.tsx b/packages/components/src/components/input-field/input.tsx
@@ -13,7 +13,7 @@ type TInputProps = {
     className?: string;
     classNameDynamicSuffix?: string;
     classNameInlinePrefix?: string;
-    current_focus: string;
+    current_focus?: string | null;
     data_testid?: string;
     data_tip?: string;
     data_value?: number | string;

diff --git a/packages/components/src/components/positions-drawer-card/positions-drawer-card.tsx b/packages/components/src/components/positions-drawer-card/positions-drawer-card.tsx
@@ -23,17 +23,17 @@ type TPositionsDrawerCardProps = {
     contract_info: TContractInfo;
     contract_update?: TContractInfo['contract_update'];
     currency: string;
-    current_focus: string;
+    current_focus: string | null;
     display_name?: string;
-    getContractById: (contract_id?: number) => TContractStore;
+    getContractById: (contract_id: number) => TContractStore;
     is_mobile?: boolean;
     is_sell_requested?: boolean;
     is_unsupported?: boolean;
     is_link_disabled: boolean;
     profit_loss?: number;
     onClickCancel: (contract_id?: number) => void;
     onClickSell: (contract_id?: number) => void;
-    onClickRemove: (contract_id?: number) => void;
+    onClickRemove: (contract_id: number) => void;
     onFooterEntered?: () => void;
     onMouseEnter?: () => void;
     onMouseLeave?: () => void;

diff --git a/packages/components/src/components/types/common.types.ts b/packages/components/src/components/types/common.types.ts
@@ -13,4 +13,13 @@ export type TItem = {
     value: Array<TItem> | string;
 };
 
-export type TTableRowItem = { component: React.ReactNode };
+export type TTableRowItem =
+    | {
+          message?: string;
+          component?: React.ReactElement;
+      }
+    | string;
+
+export type TRow = { [key: string]: any };
+
+export type TPassThrough = { isTopUp: (item: TRow) => boolean };
diff --git a/packages/components/src/components/types/contract.types.ts b/packages/components/src/components/types/contract.types.ts
@@ -1,11 +1,11 @@
 export type TGetContractPath = (contract_id?: number) => string;
 
 export type TToastConfig = {
-    key?: string;
-    content: string;
-    timeout?: number;
+    key: string;
+    content: string | React.ReactNode;
     is_bottom?: boolean;
-    type?: string;
+    timeout?: number;
+    type: string;
 };
 
 export type TErrorMessages = Readonly<{

diff --git a/packages/reports/build/webpack.config.js b/packages/reports/build/webpack.config.js
@@ -40,7 +40,6 @@ module.exports = function (env) {
                 'react-router-dom': 'react-router-dom',
                 'react-router': 'react-router',
                 mobx: 'mobx',
-                'mobx-react': 'mobx-react',
                 '@deriv/shared': '@deriv/shared',
                 '@deriv/components': '@deriv/components',
                 '@deriv/translations': '@deriv/translations',