From 816c7dd6b16581c27be936e970d1c810105a5e1c Mon Sep 17 00:00:00 2001 From: Likhith Kolayari Date: Wed, 7 Sep 2022 15:46:59 +0400 Subject: [PATCH 1/2] ref: migrated LeaveConfirm to Ts --- packages/account/build/constants.js | 51 ++++++++++--------- ...confirm.spec.js => leave-confirm.spec.tsx} | 22 ++++---- .../src/Components/leave-confirm/index.js | 2 +- .../{leave-confirm.jsx => leave-confirm.tsx} | 37 ++++++++------ .../account/src/Types/common-prop.types.ts | 4 ++ packages/account/src/Types/index.ts | 1 + packages/account/tsconfig.json | 8 ++- 7 files changed, 68 insertions(+), 57 deletions(-) rename packages/account/src/Components/leave-confirm/__tests__/{leave-confirm.spec.js => leave-confirm.spec.tsx} (91%) rename packages/account/src/Components/leave-confirm/{leave-confirm.jsx => leave-confirm.tsx} (77%) create mode 100644 packages/account/src/Types/common-prop.types.ts create mode 100644 packages/account/src/Types/index.ts diff --git a/packages/account/build/constants.js b/packages/account/build/constants.js index 6138b99c1127..68dedd83e21b 100644 --- a/packages/account/build/constants.js +++ b/packages/account/build/constants.js @@ -30,24 +30,25 @@ const ALIASES = { Services: path.resolve(__dirname, '../src/Services'), Stores: path.resolve(__dirname, '../src/Stores'), Styles: path.resolve(__dirname, '../src/Styles'), + Types: path.resolve(__dirname, '../src/Types'), }; const rules = (is_test_env = false, is_mocha_only = false) => [ ...(is_test_env && !is_mocha_only ? [ - { - test: /\.(js|jsx|ts|tsx)$/, - exclude: /node_modules|__tests__|(build\/.*\.js$)|(_common\/lib)/, - include: /src/, - loader: 'eslint-loader', - enforce: 'pre', - options: { - formatter: require('eslint-formatter-pretty'), - configFile: path.resolve(__dirname, '../.eslintrc.js'), - ignorePath: path.resolve(__dirname, '../.eslintignore'), - }, - }, - ] + { + test: /\.(js|jsx|ts|tsx)$/, + exclude: /node_modules|__tests__|(build\/.*\.js$)|(_common\/lib)/, + include: /src/, + loader: 'eslint-loader', + enforce: 'pre', + options: { + formatter: require('eslint-formatter-pretty'), + configFile: path.resolve(__dirname, '../.eslintrc.js'), + ignorePath: path.resolve(__dirname, '../.eslintignore'), + }, + }, + ] : []), { test: /\.(js|jsx|ts|tsx)$/, @@ -78,24 +79,24 @@ const rules = (is_test_env = false, is_mocha_only = false) => [ }, is_test_env ? { - test: /\.(sc|sa|c)ss$/, - loaders: 'null-loader', - } + test: /\.(sc|sa|c)ss$/, + loaders: 'null-loader', + } : { - test: /\.(sc|sa|c)ss$/, - use: css_loaders, - }, + test: /\.(sc|sa|c)ss$/, + use: css_loaders, + }, ]; const MINIMIZERS = !IS_RELEASE ? [] : [ - new TerserPlugin({ - test: /\.js$/, - parallel: 2, - }), - new CssMinimizerPlugin(), - ]; + new TerserPlugin({ + test: /\.js$/, + parallel: 2, + }), + new CssMinimizerPlugin(), + ]; const plugins = () => [ new CleanWebpackPlugin(), diff --git a/packages/account/src/Components/leave-confirm/__tests__/leave-confirm.spec.js b/packages/account/src/Components/leave-confirm/__tests__/leave-confirm.spec.tsx similarity index 91% rename from packages/account/src/Components/leave-confirm/__tests__/leave-confirm.spec.js rename to packages/account/src/Components/leave-confirm/__tests__/leave-confirm.spec.tsx index df68412fffc9..8a7c750463e2 100644 --- a/packages/account/src/Components/leave-confirm/__tests__/leave-confirm.spec.js +++ b/packages/account/src/Components/leave-confirm/__tests__/leave-confirm.spec.tsx @@ -28,7 +28,7 @@ const LeaveConfirmComponent = () => { return ( - + ); @@ -36,20 +36,20 @@ const LeaveConfirmComponent = () => { const withRouter = Component => { const history = createBrowserHistory(); - return props => { - return ( - - - - ); - }; + const WrapperComponent = props => ( + + + + ); + + return WrapperComponent; }; const TransitionBlockerComponent = withRouter(TransitionBlockerWithRouter); describe('LeaveConfirm', () => { it('should render LeaveConfirm component in desktop mode', () => { - jest.spyOn(React, 'useState').mockReturnValueOnce([true, () => {}]); + jest.spyOn(React, 'useState').mockReturnValueOnce([true, () => null]); render(); expect( screen.getByText('You have unsaved changes. Are you sure you want to discard changes and leave this page?') @@ -91,8 +91,8 @@ describe('LeaveConfirm', () => { }); it('should change pathname when user leaves form', () => { jest.spyOn(React, 'useState') - .mockReturnValueOnce([true, () => {}]) - .mockReturnValueOnce([{ pathname: '/' }, () => {}]); + .mockReturnValueOnce([true, () => null]) + .mockReturnValueOnce([{ pathname: '/' }, () => null]); render(); const el_leave_settings_btn = screen.getByRole('button', { name: 'Leave Settings' }); fireEvent.click(el_leave_settings_btn); diff --git a/packages/account/src/Components/leave-confirm/index.js b/packages/account/src/Components/leave-confirm/index.js index 149cf93c8bd7..6fbf5bb83344 100644 --- a/packages/account/src/Components/leave-confirm/index.js +++ b/packages/account/src/Components/leave-confirm/index.js @@ -1,3 +1,3 @@ -import LeaveConfirm from './leave-confirm.jsx'; +import LeaveConfirm from './leave-confirm'; export default LeaveConfirm; diff --git a/packages/account/src/Components/leave-confirm/leave-confirm.jsx b/packages/account/src/Components/leave-confirm/leave-confirm.tsx similarity index 77% rename from packages/account/src/Components/leave-confirm/leave-confirm.jsx rename to packages/account/src/Components/leave-confirm/leave-confirm.tsx index 9b6a1c8495cc..d72438aba6f6 100644 --- a/packages/account/src/Components/leave-confirm/leave-confirm.jsx +++ b/packages/account/src/Components/leave-confirm/leave-confirm.tsx @@ -1,14 +1,24 @@ import React from 'react'; -import { PropTypes } from 'prop-types'; import { useHistory, withRouter } from 'react-router-dom'; import { FormikConsumer } from 'formik'; import { Button, Icon, Modal } from '@deriv/components'; import { isMobile, PlatformContext } from '@deriv/shared'; import { localize } from '@deriv/translations'; import IconMessageContent from 'Components/icon-message-content'; +import { TPlatformContext } from 'Types'; -const LeaveConfirmMessage = ({ back, leave }) => { - const { is_appstore } = React.useContext(PlatformContext); +type TLeaveConfirmMessage = { + back: () => void; + leave: () => void; +}; + +type TTransitionBlocker = { + dirty: boolean; + onDirty: (prop: boolean) => void; +}; + +const LeaveConfirmMessage = ({ back, leave }: TLeaveConfirmMessage) => { + const { is_appstore } = React.useContext(PlatformContext); return ( { * Blocks routing if Formik form is dirty * Has to be a child of for FormikConsumer to work */ -export const TransitionBlocker = ({ dirty, onDirty }) => { +export const TransitionBlocker = ({ dirty, onDirty }: TTransitionBlocker) => { const [show, setShow] = React.useState(false); - const [next_location, setNextLocation] = React.useState(null); + const [next_location, setNextLocation] = React.useState<{ pathname: string } | null>(null); const history = useHistory(); React.useEffect(() => { @@ -57,7 +67,7 @@ export const TransitionBlocker = ({ dirty, onDirty }) => { // eslint-disable-next-line react-hooks/exhaustive-deps }, []); - const unblock = history.block(location => { + const unblock = history.block((location: { pathname: string }) => { if (dirty) { if (onDirty) onDirty(false); @@ -70,10 +80,11 @@ export const TransitionBlocker = ({ dirty, onDirty }) => { }); const leave = () => { - const { pathname } = next_location; - - unblock(); - history.push(pathname); + if (next_location && 'pathname' in next_location) { + const { pathname } = next_location; + unblock(); + history.push(pathname); + } else history.push(null); }; const back = () => { @@ -98,14 +109,10 @@ export const TransitionBlocker = ({ dirty, onDirty }) => { }; export const TransitionBlockerWithRouter = withRouter(TransitionBlocker); -const LeaveConfirm = ({ onDirty }) => ( +const LeaveConfirm = ({ onDirty }: { onDirty: (prop: boolean) => void }) => ( {formik => } ); -LeaveConfirm.propTypes = { - onDirty: PropTypes.func, -}; - export default LeaveConfirm; diff --git a/packages/account/src/Types/common-prop.types.ts b/packages/account/src/Types/common-prop.types.ts new file mode 100644 index 000000000000..d399bfe3d178 --- /dev/null +++ b/packages/account/src/Types/common-prop.types.ts @@ -0,0 +1,4 @@ +export type TPlatformContext = { + is_appstore: boolean; + displayName: string; +}; diff --git a/packages/account/src/Types/index.ts b/packages/account/src/Types/index.ts new file mode 100644 index 000000000000..1a36939ef304 --- /dev/null +++ b/packages/account/src/Types/index.ts @@ -0,0 +1 @@ +export * from './common-prop.types'; diff --git a/packages/account/tsconfig.json b/packages/account/tsconfig.json index 182c1c0c7d40..96fc19a9f769 100644 --- a/packages/account/tsconfig.json +++ b/packages/account/tsconfig.json @@ -8,15 +8,13 @@ "Containers/*": ["src/Containers/*"], "Constants/*": ["src/Constants/*"], "Configs/*": ["src/Configs/*"], - "Duplicated/*": ["src/Duplicated/*"], "Helpers/*": ["src/Helpers/*"], - "Layout/*": ["src/Layout/*"], "Modules/*": ["src/Modules/*"], "Sections/*": ["src/Sections/*"], "Stores/*": ["src/Stores/*"], - "Styles/*": ["src/Styles/*"], - "@deriv/*": ["../*/src"] + "Types": ["src/Types"], + "@deriv/*": ["../*/src"], } }, "include": ["src"] -} +} \ No newline at end of file From 3ea7f2d5bf434888acf201cfa7bb3e0b33c2a864 Mon Sep 17 00:00:00 2001 From: Likhith Kolayari Date: Tue, 25 Oct 2022 15:41:40 +0400 Subject: [PATCH 2/2] feat: :recycle: incorporated review comment --- packages/account/src/Components/leave-confirm/leave-confirm.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/account/src/Components/leave-confirm/leave-confirm.tsx b/packages/account/src/Components/leave-confirm/leave-confirm.tsx index d72438aba6f6..cb6af61d0ba8 100644 --- a/packages/account/src/Components/leave-confirm/leave-confirm.tsx +++ b/packages/account/src/Components/leave-confirm/leave-confirm.tsx @@ -80,7 +80,7 @@ export const TransitionBlocker = ({ dirty, onDirty }: TTransitionBlocker) => { }); const leave = () => { - if (next_location && 'pathname' in next_location) { + if (next_location?.pathname) { const { pathname } = next_location; unblock(); history.push(pathname);