farrah/ fixed cfd lint errors (#5607)

* ci/ exclude dist files from eslint scan * ci/ disable spaced-comment * ci/ exclude lib dir from eslint scan * fixed cfd eslint errors * renamed variables and fixed types * fixed missing return function * refactor code * fixed cleanup function * fixed invalid property document_file on submit Co-authored-by: Ali(Ako) Hosseini <ali.hosseini@firstsource.tech>
binary-com · Jul 13, 2022 · 1860575 · 1860575 · vercel · Jul 13, 2022
1 parent 6f133b7
commit 1860575
Show file tree

Hide file tree

Showing 19 changed files with 85 additions and 31 deletions.
diff --git a/packages/cfd/package.json b/packages/cfd/package.json
@@ -10,7 +10,7 @@
         "build": "f () { webpack --config \"./build/webpack.config.js\" --env base=$1;}; f",
         "build:travis": "echo \"No build:travis specified\"",
         "test": "echo \"No mocha:test specified\"",
-        "test:eslint": "eslint \"./src/**/*.?(js|jsx)\"",
+        "test:eslint": "eslint \"./src/**/*.?(js|jsx|ts|tsx)\"",
         "test:mocha": "mochapack -r babel-polyfill -r jsdom-global/register -r mock-local-storage --webpack-config \"./build/webpack.config-test.js\" \"src/**/__tests__/*.js\" --webpack-env.mocha_only --require ignore-styles",
         "deploy": "echo \"No deploy specified\"",
         "deploy:clean": "echo \"No deploy:clean specified\"",

diff --git a/packages/cfd/src/Components/Errors/error-component.jsx b/packages/cfd/src/Components/Errors/error-component.jsx
@@ -39,7 +39,12 @@ const ErrorComponent = ({
 };
 
 ErrorComponent.propTypes = {
+    header: PropTypes.string,
+    is_dialog: PropTypes.bool,
     message: PropTypes.oneOfType([PropTypes.node, PropTypes.string, PropTypes.object]),
+    redirect_label: PropTypes.string,
+    redirectOnClick: PropTypes.func,
+    should_show_refresh: PropTypes.bool,
     type: PropTypes.string,
 };
 

diff --git a/packages/cfd/src/Components/Routes/binary-routes.jsx b/packages/cfd/src/Components/Routes/binary-routes.jsx
@@ -3,7 +3,7 @@ import { Switch } from 'react-router-dom';
 import { PlatformContext } from '@deriv/shared';
 import { Localize } from '@deriv/translations';
 import getRoutesConfig from '../../Constants/routes-config';
-import RouteWithSubRoutes from './route-with-sub-routes';
+import RouteWithSubRoutes from './route-with-sub-routes.jsx';
 
 const BinaryRoutes = props => {
     const { is_dashboard } = React.useContext(PlatformContext);

diff --git a/packages/cfd/src/Components/cfd-account-card.tsx b/packages/cfd/src/Components/cfd-account-card.tsx
@@ -187,7 +187,9 @@ const CFDAccountCardComponent = ({
     toggleShouldShowRealAccountsList,
 }: TCFDAccountCard) => {
     const platform_icon = is_eu ? 'cfd' : type.type;
-    const icon: any = type.type ? <Icon icon={account_icons[type.platform][platform_icon]} size={64} /> : null;
+    const icon: React.ReactElement | null = type.type ? (
+        <Icon icon={account_icons[type.platform][platform_icon]} size={64} />
+    ) : null;
     const has_popular_banner: boolean =
         type.type === 'synthetic' &&
         type.category === 'real' &&

diff --git a/packages/cfd/src/Components/cfd-financial-stp-pending-dialog.tsx b/packages/cfd/src/Components/cfd-financial-stp-pending-dialog.tsx
@@ -3,6 +3,7 @@ import { Modal, Button } from '@deriv/components';
 import { Localize, localize } from '@deriv/translations';
 import { connect } from 'Stores/connect';
 import { TCFDFinancialStpPendingDialog } from './props.types';
+import RootStore from 'Stores/index';
 
 const CFDFinancialStpPendingDialog = ({
     enableApp,
@@ -34,7 +35,7 @@ const CFDFinancialStpPendingDialog = ({
     </Modal>
 );
 
-export default connect(({ ui, client, modules: { cfd } }: any) => ({
+export default connect(({ ui, client, modules: { cfd } }: RootStore) => ({
     is_fully_authenticated: client.is_fully_authenticated,
     enableApp: ui.enableApp,
     disableApp: ui.disableApp,

diff --git a/packages/cfd/src/Components/cfd-poa.tsx b/packages/cfd/src/Components/cfd-poa.tsx
@@ -56,7 +56,7 @@ type TFormValuesInputs = {
 };
 
 type TDocumentFile = {
-    document_file: Array<TObjDocumentFile>;
+    document_file?: Array<TObjDocumentFile>;
     files?: Array<TObjDocumentFile>;
 };
 
@@ -182,7 +182,7 @@ const CFDPOA = ({ onSave, onCancel, index, onSubmit, refreshNotifications, ...pr
         files: TObjDocumentFile,
         error_message: string,
         setFieldTouched: (field: string, isTouched?: boolean, shouldValidate?: boolean) => void,
-        setFieldValue: (field: string, files: TObjDocumentFile) => void,
+        setFieldValue: (field: string, value: TObjDocumentFile) => void,
         values: TFormValues
     ) => {
         setFieldTouched('document_file', true);
@@ -206,7 +206,8 @@ const CFDPOA = ({ onSave, onCancel, index, onSubmit, refreshNotifications, ...pr
     };
 
     const onSubmitValues = async (values: TFormValues, actions: FormikHelpers<TFormValues>) => {
-        const { document_file, ...uploadables } = values;
+        const uploadables = { ...values };
+        delete uploadables.document_file;
 
         actions.setSubmitting(true);
         const data = await WS.setSettings(uploadables);
@@ -249,8 +250,8 @@ const CFDPOA = ({ onSave, onCancel, index, onSubmit, refreshNotifications, ...pr
                 return;
             }
             const { identity } = get_account_status.authentication;
-            const _has_poi = !(identity && identity.status === 'none');
-            if (_has_poi) {
+            const has_poi = !(identity && identity.status === 'none');
+            if (has_poi) {
                 onProceed();
             } else {
                 setFormState({
@@ -278,9 +279,9 @@ const CFDPOA = ({ onSave, onCancel, index, onSubmit, refreshNotifications, ...pr
         WS.authorized.getAccountStatus().then((response: AccountStatusResponse) => {
             WS.wait('states_list').then(() => {
                 const { get_account_status } = response;
-                const { document, identity } = get_account_status?.authentication!;
-                const __has_poi = !!(identity && identity.status === 'none');
-                setFormState({ ...form_state, ...{ poa_status: document?.status, __has_poi } }, () => {
+                const { document, identity } = get_account_status?.authentication || {};
+                const has_poi = !!(identity && identity.status === 'none');
+                setFormState({ ...form_state, ...{ poa_status: document?.status, has_poi } }, () => {
                     setIsLoading(false);
                     refreshNotifications();
                 });

diff --git a/packages/cfd/src/Components/cfd-real-account-display.tsx b/packages/cfd/src/Components/cfd-real-account-display.tsx
@@ -7,7 +7,7 @@ import specifications, { TSpecifications } from '../Constants/cfd-specifications
 import { CFDAccountCard } from './cfd-account-card';
 import { general_messages } from '../Constants/cfd-shared-strings';
 import { DetailsOfEachMT5Loginid, ResidenceList, LandingCompany, GetSettings } from '@deriv/api-types';
-import { TExistingData, TTradingPlatformAccounts } from './props.types.js';
+import { TExistingData, TTradingPlatformAccounts } from './props.types';
 
 type TStandPoint = {
     financial_company: string;

diff --git a/packages/cfd/src/Components/success-dialog.jsx b/packages/cfd/src/Components/success-dialog.jsx
@@ -89,18 +89,21 @@ SuccessDialog.defaultProps = {
 SuccessDialog.propTypes = {
     classNameMessage: PropTypes.string,
     has_cancel: PropTypes.bool,
+    has_close_icon: PropTypes.bool,
     has_submit: PropTypes.bool,
     heading: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
     icon: PropTypes.object,
     icon_size: PropTypes.string,
     icon_type: PropTypes.string,
     is_medium_button: PropTypes.bool,
+    is_open: PropTypes.bool,
     message: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
     onCancel: PropTypes.func,
     onSubmit: PropTypes.func,
     text_cancel: PropTypes.string,
     text_submit: PropTypes.string,
     title: PropTypes.string,
+    toggleModal: PropTypes.func,
     width: PropTypes.string,
 };
 

diff --git a/packages/cfd/src/Containers/cfd-dashboard.tsx b/packages/cfd/src/Containers/cfd-dashboard.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { withRouter } from 'react-router';
+import { RouteComponentProps, withRouter } from 'react-router';
 import { Redirect } from 'react-router-dom';
 import { DesktopWrapper, Icon, MobileWrapper, Tabs, PageError, Loading, Text } from '@deriv/components';
 import {
@@ -32,7 +32,6 @@ import { getPlatformMt5DownloadLink, getPlatformDXTradeDownloadLink } from '../H
 import 'Sass/cfd-dashboard.scss';
 import RootStore from 'Stores/index';
 import { DetailsOfEachMT5Loginid, LandingCompany, ResidenceList } from '@deriv/api-types';
-import { History } from 'history';
 
 declare module 'react' {
     interface HTMLAttributes<T> extends React.AriaAttributes, React.DOMAttributes<T> {
@@ -84,7 +83,7 @@ type TMt5StatusServerType = {
 
 type TMt5StatusServer = Record<'demo' | 'real', TMt5StatusServerType[]>;
 
-type TCFDDashboardProps = {
+type TCFDDashboardProps = RouteComponentProps & {
     account_settings: { residence: string };
     account_status: object;
     beginRealSignupForMt5: () => void;
@@ -156,7 +155,6 @@ type TCFDDashboardProps = {
     disableCFDPasswordModal: () => void;
     openPasswordModal: (account_type?: TOpenAccountTransferMeta) => void;
     openTopUpModal: () => void;
-    history: History;
     setCurrentAccount: (data: DetailsOfEachMT5Loginid, meta: TOpenAccountTransferMeta) => void;
     setAccountType: (account_type: TOpenAccountTransferMeta) => void;
     mt5_status_server: TMt5StatusServer;

diff --git a/packages/cfd/src/Containers/cfd-password-manager-modal.tsx b/packages/cfd/src/Containers/cfd-password-manager-modal.tsx
@@ -43,15 +43,20 @@ const CountdownComponent = ({ count_from = 60, onTimeout }: TCountdownComponent)
     const [count, setCount] = React.useState<number>(count_from);
 
     React.useEffect(() => {
+        let interval: ReturnType<typeof setTimeout>;
+
         if (count !== 0) {
-            const interval = setTimeout(() => {
+            interval = setTimeout(() => {
                 setCount(count - 1);
             }, 1000);
-
-            return () => clearTimeout(interval);
+        } else {
+            onTimeout();
         }
 
-        onTimeout();
+        return () => {
+            clearTimeout(interval);
+        };
+
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [count]);
     return <span className='countdown'>{count}</span>;
@@ -396,11 +401,16 @@ const CFDPasswordManagerModal = ({
 };
 
 CFDPasswordManagerModal.propTypes = {
+    disableApp: PropTypes.func,
+    enableApp: PropTypes.func,
     email: PropTypes.string,
     is_visible: PropTypes.bool,
     selected_account: PropTypes.string,
+    selected_account_type: PropTypes.string,
+    selected_account_group: PropTypes.string,
     selected_server: PropTypes.string,
     selected_login: PropTypes.string,
+    sendVerifyEmail: PropTypes.func,
     toggleModal: PropTypes.func,
     platform: PropTypes.string,
 };

diff --git a/packages/cfd/src/Containers/cfd-password-modal.tsx b/packages/cfd/src/Containers/cfd-password-modal.tsx
@@ -630,7 +630,7 @@ const CFDServerForm = ({ ...props }: TCFDServerFormProps) => {
                     },
                 };
             })
-            .sort((a, _b) => (a.recommended ? -1 : 1))
+            .sort(a => (a.recommended ? -1 : 1))
             .sort((a, b) => (a.disabled ? a.disabled : 0) - (b.disabled ? b.disabled : 0));
     }, [props.mt5_trading_servers]);
 

diff --git a/packages/cfd/src/Containers/cfd-reset-password-modal.tsx b/packages/cfd/src/Containers/cfd-reset-password-modal.tsx
@@ -1,3 +1,4 @@
+import PropTypes from 'prop-types';
 import { Formik, FormikHelpers } from 'formik';
 import RootStore from 'Stores/index';
 import React from 'react';
@@ -276,6 +277,17 @@ const CFDResetPasswordModal = ({
     );
 };
 
+CFDResetPasswordModal.propTypes = {
+    current_list: PropTypes.oneOfType([PropTypes.array, PropTypes.object]),
+    email: PropTypes.string,
+    is_cfd_reset_password_modal_enabled: PropTypes.bool,
+    is_eu: PropTypes.bool,
+    is_logged_in: PropTypes.bool,
+    platform: PropTypes.string,
+    setCFDPasswordResetModal: PropTypes.func,
+    history: PropTypes.object,
+};
+
 export default React.memo(
     withRouter(
         connect(({ modules: { cfd }, client }: RootStore) => ({

diff --git a/packages/cfd/src/Containers/compare-accounts-content.tsx b/packages/cfd/src/Containers/compare-accounts-content.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { Table, Text, ThemedScrollbars, Div100vhContainer } from '@deriv/components';
 import { localize, Localize } from '@deriv/translations';
-import { isDesktop, CFD_PLATFORMS, isLandingCompanyEnabled, PlatformContext } from '@deriv/shared';
+import { isDesktop, CFD_PLATFORMS, isLandingCompanyEnabled } from '@deriv/shared';
 import { LandingCompany } from '@deriv/api-types';
 
 type TCFDAttributeDescriberProps = {
@@ -592,7 +592,6 @@ const ModalContent = ({
         platform,
         show_eu_related,
         residence,
-        is_uk,
     ]);
 
     const show_risk_message = platform === CFD_PLATFORMS.MT5 || !show_eu_related;

diff --git a/packages/cfd/src/Containers/investor-password-manager.tsx b/packages/cfd/src/Containers/investor-password-manager.tsx
@@ -1,3 +1,4 @@
+import PropTypes from 'prop-types';
 import React from 'react';
 import { Field, Form, Formik, FieldProps } from 'formik';
 import { PasswordInput, PasswordMeter, Text, Button, Icon } from '@deriv/components';
@@ -128,4 +129,14 @@ const InvestorPasswordManager = ({
     );
 };
 
+InvestorPasswordManager.propTypes = {
+    error_message_investor: PropTypes.string,
+    is_submit_success_investor: PropTypes.bool,
+    multi_step_ref: PropTypes.object,
+    onSubmit: PropTypes.func,
+    setPasswordType: PropTypes.func,
+    toggleModal: PropTypes.func,
+    validatePassword: PropTypes.func,
+};
+
 export default InvestorPasswordManager;
diff --git a/packages/cfd/src/Containers/mt5-account-opening-real-financial-stp-modal.tsx b/packages/cfd/src/Containers/mt5-account-opening-real-financial-stp-modal.tsx
@@ -4,6 +4,7 @@ import { localize } from '@deriv/translations';
 import { connect } from 'Stores/connect';
 import CFDFinancialStpRealAccountSignup from 'Containers/cfd-financial-stp-real-account-signup';
 import { TMT5AccountOpeningRealFinancialStpModal } from './props.types';
+import RootStore from 'Stores/index';
 
 const MT5AccountOpeningRealFinancialStpModal = ({
     disableApp,
@@ -42,7 +43,7 @@ const MT5AccountOpeningRealFinancialStpModal = ({
     </React.Fragment>
 );
 
-export default connect(({ ui, modules }: any) => ({
+export default connect(({ ui, modules }: RootStore) => ({
     disableApp: ui.disableApp,
     disableMt5FinancialStpModal: modules.cfd.disableMt5FinancialStpModal,
     enableApp: ui.enableApp,

diff --git a/packages/cfd/src/Containers/props.types.ts b/packages/cfd/src/Containers/props.types.ts
@@ -1,4 +1,4 @@
-import { History } from 'history';
+import { RouteComponentProps } from 'react-router';
 import { DetailsOfEachMT5Loginid, VerifyEmailResponse } from '@deriv/api-types';
 import { FormikHelpers as FormikActions } from 'formik';
 import { TCFDPasswordFormValues } from './cfd-password-modal';
@@ -58,15 +58,14 @@ export type TError = {
     message: string;
 };
 
-export type TCFDResetPasswordModal = {
+export type TCFDResetPasswordModal = RouteComponentProps & {
     current_list: Array<DetailsOfEachMT5Loginid> & Record<string, DetailsOfEachMT5Loginid>;
     email: string;
     is_cfd_reset_password_modal_enabled: boolean;
     is_eu: boolean;
     is_logged_in: boolean;
     platform: CFD_Platform;
     setCFDPasswordResetModal: (value: boolean) => void;
-    history: History;
 };
 
 export type TCFDPasswordSuccessMessage = {

diff --git a/packages/cfd/src/Containers/routes.jsx b/packages/cfd/src/Containers/routes.jsx
@@ -4,7 +4,7 @@ import React from 'react';
 import { withRouter } from 'react-router';
 import BinaryRoutes from '../Components/Routes';
 import { connect } from '../Stores/connect';
-import ErrorComponent from '../Components/Errors/error-component';
+import ErrorComponent from '../Components/Errors/error-component.jsx';
 
 const Routes = props => {
     if (props.has_error) {
@@ -24,7 +24,9 @@ Routes.propTypes = {
     error: MobxPropTypes.objectOrObservableObject,
     has_error: PropTypes.bool,
     is_logged_in: PropTypes.bool,
+    is_logging_in: PropTypes.bool,
     is_virtual: PropTypes.bool,
+    passthrough: PropTypes.object,
 };
 
 // need to wrap withRouter around connect

diff --git a/packages/cfd/src/app.tsx b/packages/cfd/src/app.tsx
@@ -1,10 +1,18 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
 import PropTypes from 'prop-types';
 import React from 'react';
-import Routes from './Containers/routes';
+import Routes from './Containers/routes.jsx';
 import { MobxContentProvider } from './Stores/connect';
 import initStore from './init-store'; // eslint-disable-line import/extensions
 
-const App = ({ passthrough }: any) => {
+type TAppProps = {
+    passthrough: {
+        root_store: any;
+        WS: any;
+    };
+};
+
+const App = ({ passthrough }: TAppProps) => {
     const [root_store] = React.useState(initStore(passthrough.root_store, passthrough.WS));
 
     return (

diff --git a/packages/cfd/src/templates/app/components/loading.jsx b/packages/cfd/src/templates/app/components/loading.jsx
@@ -36,7 +36,9 @@ const Loading = ({ className, id, is_fullscreen = true, is_slow_loading, status,
 };
 
 Loading.propTypes = {
+    className: PropTypes.string,
     id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+    is_fullscreen: PropTypes.bool,
     is_slow_loading: PropTypes.bool,
     status: PropTypes.array,
     theme: PropTypes.string,