Merge pull request #12 from likhith-deriv/likhith/74122/migrate_leave…

…confirm-to-ts

Likhith/74122/migrate leaveconfirm to ts

packages/account/src/Components/leave-confirm/__tests__/leave-confirm.spec.js → packages/account/src/Components/leave-confirm/__tests__/leave-confirm.spec.tsx

@@ -28,28 +28,28 @@ const LeaveConfirmComponent = () => {
     return (
         <Router history={history}>
             <Formik>
-                <LeaveConfirm />
+                <LeaveConfirm onDirty={jest.fn()} />
             </Formik>
         </Router>
     );
 };
 
 const withRouter = Component => {
     const history = createBrowserHistory();
-    return props => {
-        return (
-            <Router history={history}>
-                <Component {...props} />
-            </Router>
-        );
-    };
+    const WrapperComponent = props => (
+        <Router history={history}>
+            <Component {...props} />
+        </Router>
+    );
+
+    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(<LeaveConfirmComponent />);
         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(<TransitionBlockerComponent />);
         const el_leave_settings_btn = screen.getByRole('button', { name: 'Leave Settings' });
         fireEvent.click(el_leave_settings_btn);

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;

packages/account/src/Components/leave-confirm/leave-confirm.jsx → 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<TPlatformContext>(PlatformContext);
     return (
         <IconMessageContent
             className='leave-confirm'
@@ -47,17 +57,17 @@ const LeaveConfirmMessage = ({ back, leave }) => {
  * Blocks routing if Formik form is dirty
  * Has to be a child of <Formik> 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(() => {
         return () => unblock();
         // 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) {
+            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 }) => (
     <FormikConsumer>
         {formik => <TransitionBlockerWithRouter onDirty={onDirty} dirty={formik.dirty && formik.submitCount === 0} />}
     </FormikConsumer>
 );
 
-LeaveConfirm.propTypes = {
-    onDirty: PropTypes.func,
-};
-
 export default LeaveConfirm;

packages/account/src/Types/common-prop.types.ts

@@ -0,0 +1,4 @@
+export type TPlatformContext = {
+    is_appstore: boolean;
+    displayName: string;
+};

packages/account/tsconfig.json

@@ -12,10 +12,9 @@
             "Modules/*": ["src/Modules/*"],
             "Sections/*": ["src/Sections/*"],
             "Stores/*": ["src/Stores/*"],
-            "Styles/*": ["src/Styles/*"],
             "Types": ["src/Types"],
-            "@deriv/*": ["../*/src"]
+            "@deriv/*": ["../*/src"],
         }
     },
-    "include": ["src", "globals.d.ts"]
+    "include": ["src"]
 }