From ce5d9f1143cb438dd3eb26bacbf97507cc4dacc6 Mon Sep 17 00:00:00 2001 From: tay suisin Date: Wed, 11 Jan 2023 14:19:46 +0800 Subject: [PATCH 1/4] refactor: ts migration for reset-trading-password-modal --- ...l.jsx => reset-trading-password-modal.tsx} | 49 ++++++++++++------- .../src/components/dialog/dialog.tsx | 2 +- 2 files changed, 31 insertions(+), 20 deletions(-) rename packages/account/src/Components/reset-trading-password-modal/{reset-trading-password-modal.jsx => reset-trading-password-modal.tsx} (89%) diff --git a/packages/account/src/Components/reset-trading-password-modal/reset-trading-password-modal.jsx b/packages/account/src/Components/reset-trading-password-modal/reset-trading-password-modal.tsx similarity index 89% rename from packages/account/src/Components/reset-trading-password-modal/reset-trading-password-modal.jsx rename to packages/account/src/Components/reset-trading-password-modal/reset-trading-password-modal.tsx index 5d08673b84e0..576594f9be55 100644 --- a/packages/account/src/Components/reset-trading-password-modal/reset-trading-password-modal.jsx +++ b/packages/account/src/Components/reset-trading-password-modal/reset-trading-password-modal.tsx @@ -1,13 +1,25 @@ -import React from 'react'; +import React, { ChangeEvent } from 'react'; import PropTypes from 'prop-types'; -import { Formik, Form } from 'formik'; +import { Formik, Form, FormikValues, FormikErrors } from 'formik'; import { useHistory } from 'react-router-dom'; import { Button, Dialog, Icon, PasswordInput, PasswordMeter, Text, FormSubmitButton } from '@deriv/components'; import { getErrorMessages, validPassword, validLength, WS, getCFDPlatformLabel } from '@deriv/shared'; import { localize, Localize } from '@deriv/translations'; -const ResetTradingPassword = ({ setDialogTitleFunc, toggleResetTradingPasswordModal, verification_code, platform }) => { - const handleSubmit = (values, actions) => { +type TResetTradingPassword = { + setDialogTitleFunc?: (value: boolean) => void; + toggleResetTradingPasswordModal: (value: boolean) => void; + verification_code: string; + platform: 'dxtrade' | 'mt5' | 'derivez'; +}; + +const ResetTradingPassword = ({ + setDialogTitleFunc, + toggleResetTradingPasswordModal, + verification_code, + platform, +}: TResetTradingPassword) => { + const handleSubmit = (values: FormikValues, actions: FormikValues) => { actions.setSubmitting(true); const params = { @@ -16,10 +28,10 @@ const ResetTradingPassword = ({ setDialogTitleFunc, toggleResetTradingPasswordMo platform, }; - WS.tradingPlatformPasswordReset(params).then(async response => { + WS.tradingPlatformPasswordReset(params).then(async (response: FormikValues) => { if (response.error) { actions.setStatus({ error_msg: response.error.message, error_code: response.error.code }); - setDialogTitleFunc(true); + setDialogTitleFunc?.(true); } else { actions.resetForm({ password: '' }); actions.setStatus({ reset_complete: true }); @@ -29,8 +41,8 @@ const ResetTradingPassword = ({ setDialogTitleFunc, toggleResetTradingPasswordMo }); }; - const validateReset = values => { - const errors = {}; + const validateReset = (values: FormikValues) => { + const errors: FormikErrors = {}; if ( !validLength(values.password, { @@ -146,12 +158,12 @@ const ResetTradingPassword = ({ setDialogTitleFunc, toggleResetTradingPasswordMo label={localize('{{platform}} password', { platform: getCFDPlatformLabel(platform), })} - onChange={e => { + onChange={(e: ChangeEvent) => { setFieldTouched('password', true); handleChange(e); }} onBlur={handleBlur} - error={touched.password && errors.password} + error={touched.password ? errors.password : ''} value={values.password} data-lpignore='true' required @@ -179,13 +191,12 @@ const ResetTradingPassword = ({ setDialogTitleFunc, toggleResetTradingPasswordMo ); }; -ResetTradingPassword.propTypes = { - is_dxtrade_allowed: PropTypes.bool, - setDialogTitleFunc: PropTypes.func, - toggleResetTradingPasswordModal: PropTypes.func, - verification_code: PropTypes.string, - platform: PropTypes.string, -}; +type TResetTradingPasswordModal = { + disableApp: () => void; + enableApp: () => void; + is_loading: boolean; + is_visible: boolean; +} & TResetTradingPassword; const ResetTradingPasswordModal = ({ disableApp, @@ -195,7 +206,7 @@ const ResetTradingPasswordModal = ({ toggleResetTradingPasswordModal, verification_code, platform, -}) => { +}: TResetTradingPasswordModal) => { const [dialog_title, setDialogTitle] = React.useState(''); const history = useHistory(); React.useEffect(() => { @@ -207,7 +218,7 @@ const ResetTradingPasswordModal = ({ } }, [history, is_visible]); - const setDialogTitleFunc = is_invalid_token => { + const setDialogTitleFunc = (is_invalid_token: boolean) => { setDialogTitle( is_invalid_token ? localize('Reset {{platform}} password', { diff --git a/packages/components/src/components/dialog/dialog.tsx b/packages/components/src/components/dialog/dialog.tsx index 0d84c2aa4819..cea840c7eed0 100644 --- a/packages/components/src/components/dialog/dialog.tsx +++ b/packages/components/src/components/dialog/dialog.tsx @@ -11,7 +11,7 @@ type TDialog = { cancel_button_text?: string; className?: string; confirm_button_text?: string; - dismissable: boolean; + dismissable?: boolean; disableApp?: () => void; enableApp?: () => void; has_close_icon: boolean; From d03b4e542991378052dd4d17f91873534106075d Mon Sep 17 00:00:00 2001 From: tay suisin Date: Wed, 11 Jan 2023 15:35:11 +0800 Subject: [PATCH 2/4] chore: ts migration for test case --- ...odal.spec.js => reset-trading-password-modal.spec.tsx} | 8 ++++---- .../reset-trading-password-modal.tsx | 2 +- 2 files changed, 5 insertions(+), 5 deletions(-) rename packages/account/src/Components/reset-trading-password-modal/__tests__/{reset-trading-password-modal.spec.js => reset-trading-password-modal.spec.tsx} (94%) diff --git a/packages/account/src/Components/reset-trading-password-modal/__tests__/reset-trading-password-modal.spec.js b/packages/account/src/Components/reset-trading-password-modal/__tests__/reset-trading-password-modal.spec.tsx similarity index 94% rename from packages/account/src/Components/reset-trading-password-modal/__tests__/reset-trading-password-modal.spec.js rename to packages/account/src/Components/reset-trading-password-modal/__tests__/reset-trading-password-modal.spec.tsx index cc92d1a8cff5..2893b83d02ab 100644 --- a/packages/account/src/Components/reset-trading-password-modal/__tests__/reset-trading-password-modal.spec.js +++ b/packages/account/src/Components/reset-trading-password-modal/__tests__/reset-trading-password-modal.spec.tsx @@ -2,7 +2,7 @@ import React from 'react'; import { screen, render, act, fireEvent, waitForElementToBeRemoved, waitFor } from '@testing-library/react'; import { Router } from 'react-router'; import { createBrowserHistory } from 'history'; -import ResetTradingPasswordModal from '../reset-trading-password-modal'; +import ResetTradingPasswordModal, { TResetTradingPasswordModal } from '../reset-trading-password-modal'; import { WS } from '@deriv/shared'; const mock_promise = Promise.resolve(); @@ -40,7 +40,7 @@ const interactWithPasswordField = async (trigger_click = true) => { }; describe('', () => { - const props = { + const props: TResetTradingPasswordModal = { disableApp: jest.fn(), enableApp: jest.fn(), toggleResetTradingPasswordModal: mockFn, @@ -152,7 +152,7 @@ describe('', () => { fireEvent.click(screen.getByTestId('dt_password_input_visibility_icon')); await waitFor(() => { - expect(screen.getByDisplayValue('hN795jCWkDtPy5').getAttribute('type')).toBe('text'); + expect(screen.getByDisplayValue('hN795jCWkDtPy5')).toHaveAttribute('type', 'text'); }); }); @@ -167,7 +167,7 @@ describe('', () => { fireEvent.click(el_visibility_icon); await waitFor(() => { - expect(screen.getByDisplayValue('hN795jCWkDtPy5').getAttribute('type')).toBe('text'); + expect(screen.getByDisplayValue('hN795jCWkDtPy5')).toHaveAttribute('type', 'text'); }); }); diff --git a/packages/account/src/Components/reset-trading-password-modal/reset-trading-password-modal.tsx b/packages/account/src/Components/reset-trading-password-modal/reset-trading-password-modal.tsx index 576594f9be55..c6088383c901 100644 --- a/packages/account/src/Components/reset-trading-password-modal/reset-trading-password-modal.tsx +++ b/packages/account/src/Components/reset-trading-password-modal/reset-trading-password-modal.tsx @@ -191,7 +191,7 @@ const ResetTradingPassword = ({ ); }; -type TResetTradingPasswordModal = { +export type TResetTradingPasswordModal = { disableApp: () => void; enableApp: () => void; is_loading: boolean; From a39a8cc8d3d78f14641215ce11ae523868273f70 Mon Sep 17 00:00:00 2001 From: tay suisin Date: Wed, 11 Jan 2023 15:53:57 +0800 Subject: [PATCH 3/4] chore: remove .jsx --- .../src/Components/reset-trading-password-modal/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/account/src/Components/reset-trading-password-modal/index.js b/packages/account/src/Components/reset-trading-password-modal/index.js index 5e7494430f55..ec36c380ecba 100644 --- a/packages/account/src/Components/reset-trading-password-modal/index.js +++ b/packages/account/src/Components/reset-trading-password-modal/index.js @@ -1,3 +1,3 @@ import './reset-trading-password-modal.scss'; -export default from './reset-trading-password-modal.jsx'; +export default from './reset-trading-password-modal'; From ac373aa9d46b8b68e10bfa4bd202cd69699e5163 Mon Sep 17 00:00:00 2001 From: tay suisin Date: Wed, 11 Jan 2023 17:11:56 +0800 Subject: [PATCH 4/4] chore: update to use React.ComponentProps --- .../__tests__/reset-trading-password-modal.spec.tsx | 4 ++-- .../reset-trading-password-modal.tsx | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/account/src/Components/reset-trading-password-modal/__tests__/reset-trading-password-modal.spec.tsx b/packages/account/src/Components/reset-trading-password-modal/__tests__/reset-trading-password-modal.spec.tsx index 2893b83d02ab..149d104d7530 100644 --- a/packages/account/src/Components/reset-trading-password-modal/__tests__/reset-trading-password-modal.spec.tsx +++ b/packages/account/src/Components/reset-trading-password-modal/__tests__/reset-trading-password-modal.spec.tsx @@ -2,7 +2,7 @@ import React from 'react'; import { screen, render, act, fireEvent, waitForElementToBeRemoved, waitFor } from '@testing-library/react'; import { Router } from 'react-router'; import { createBrowserHistory } from 'history'; -import ResetTradingPasswordModal, { TResetTradingPasswordModal } from '../reset-trading-password-modal'; +import ResetTradingPasswordModal from '../reset-trading-password-modal'; import { WS } from '@deriv/shared'; const mock_promise = Promise.resolve(); @@ -40,7 +40,7 @@ const interactWithPasswordField = async (trigger_click = true) => { }; describe('', () => { - const props: TResetTradingPasswordModal = { + const props: React.ComponentProps = { disableApp: jest.fn(), enableApp: jest.fn(), toggleResetTradingPasswordModal: mockFn, diff --git a/packages/account/src/Components/reset-trading-password-modal/reset-trading-password-modal.tsx b/packages/account/src/Components/reset-trading-password-modal/reset-trading-password-modal.tsx index c6088383c901..576594f9be55 100644 --- a/packages/account/src/Components/reset-trading-password-modal/reset-trading-password-modal.tsx +++ b/packages/account/src/Components/reset-trading-password-modal/reset-trading-password-modal.tsx @@ -191,7 +191,7 @@ const ResetTradingPassword = ({ ); }; -export type TResetTradingPasswordModal = { +type TResetTradingPasswordModal = { disableApp: () => void; enableApp: () => void; is_loading: boolean;