From e4b6d83dcbf64c4b0b7b9104b9a9fd4262612366 Mon Sep 17 00:00:00 2001
From: Sergei Baranovski <sergei@deriv.com>
Date: Fri, 13 Jan 2023 14:18:09 +0300
Subject: [PATCH] chore: ts migration of routes

---
 .../src/Components/Errors/error-component.tsx |  2 +-
 .../reports/src/Components/Routes/index.js    |  9 ++--
 packages/reports/src/Containers/routes.jsx    | 41 -------------------
 packages/reports/src/Containers/routes.tsx    | 40 ++++++++++++++++++
 packages/reports/src/app.jsx                  |  2 +-
 5 files changed, 48 insertions(+), 46 deletions(-)
 delete mode 100644 packages/reports/src/Containers/routes.jsx
 create mode 100644 packages/reports/src/Containers/routes.tsx

diff --git a/packages/reports/src/Components/Errors/error-component.tsx b/packages/reports/src/Components/Errors/error-component.tsx
index 057f198e299d..3ae50a12047e 100644
--- a/packages/reports/src/Components/Errors/error-component.tsx
+++ b/packages/reports/src/Components/Errors/error-component.tsx
@@ -3,7 +3,7 @@ import { PageError, Dialog } from '@deriv/components';
 import { routes } from '@deriv/shared';
 import { localize } from '@deriv/translations';
 
-type TErrorComponent = {
+export type TErrorComponent = {
     header: string;
     is_dialog: boolean;
     message: React.ReactElement | string;
diff --git a/packages/reports/src/Components/Routes/index.js b/packages/reports/src/Components/Routes/index.js
index 061bdf961719..ecff56bd3670 100644
--- a/packages/reports/src/Components/Routes/index.js
+++ b/packages/reports/src/Components/Routes/index.js
@@ -1,4 +1,7 @@
-export BinaryLink from './binary-link.jsx';
-export default from './binary-routes.jsx';
+import BinaryLink from './binary-link';
+import RouteWithSubRoutes from './route-with-sub-routes';
+import BinaryRoutes from './binary-routes';
+
 export * from './helpers';
-export RouteWithSubRoutes from './route-with-sub-routes.jsx';
+export { BinaryLink, RouteWithSubRoutes };
+export default BinaryRoutes;
diff --git a/packages/reports/src/Containers/routes.jsx b/packages/reports/src/Containers/routes.jsx
deleted file mode 100644
index 0944b459b500..000000000000
--- a/packages/reports/src/Containers/routes.jsx
+++ /dev/null
@@ -1,41 +0,0 @@
-import { PropTypes as MobxPropTypes } from 'mobx-react';
-import PropTypes from 'prop-types';
-import React from 'react';
-import { withRouter } from 'react-router';
-import BinaryRoutes from 'Components/Routes';
-import { connect } from 'Stores/connect';
-import ErrorComponent from 'Components/Errors';
-
-const Routes = props => {
-    if (props.has_error) {
-        return <ErrorComponent {...props.error} />;
-    }
-
-    return (
-        <BinaryRoutes
-            is_logged_in={props.is_logged_in}
-            is_logging_in={props.is_logging_in}
-            passthrough={props.passthrough}
-        />
-    );
-};
-
-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
-// to prevent updates on <BinaryRoutes /> from being blocked
-export default withRouter(
-    connect(({ client, common }) => ({
-        is_logged_in: client.is_logged_in,
-        is_logging_in: client.is_logging_in,
-        error: common.error,
-        has_error: common.has_error,
-    }))(Routes)
-);
diff --git a/packages/reports/src/Containers/routes.tsx b/packages/reports/src/Containers/routes.tsx
new file mode 100644
index 000000000000..8a271a4b107d
--- /dev/null
+++ b/packages/reports/src/Containers/routes.tsx
@@ -0,0 +1,40 @@
+import React from 'react';
+import { withRouter } from 'react-router';
+import BinaryRoutes from 'Components/Routes';
+import { connect } from 'Stores/connect';
+import ErrorComponent from 'Components/Errors';
+import RootStore from 'Stores/index';
+import { TErrorComponent } from 'Components/Errors/error-component';
+
+type TPassthrough = {
+    root_store: RootStore;
+    WS: Record<string, any>;
+};
+
+type TRoutes = {
+    error?: TErrorComponent;
+    has_error?: boolean;
+    is_logged_in?: boolean;
+    is_logging_in?: boolean;
+    is_virtual?: boolean;
+    passthrough?: TPassthrough;
+};
+
+const Routes = ({ error, has_error, is_logged_in, is_logging_in, is_virtual, passthrough }: TRoutes) => {
+    if (has_error) {
+        return <ErrorComponent {...error} />;
+    }
+
+    return <BinaryRoutes is_logged_in={is_logged_in} is_logging_in={is_logging_in} passthrough={passthrough} />;
+};
+
+// need to wrap withRouter around connect
+// to prevent updates on <BinaryRoutes /> from being blocked
+export default withRouter(
+    connect(({ client, common }: RootStore) => ({
+        is_logged_in: client.is_logged_in,
+        is_logging_in: client.is_logging_in,
+        error: common.error,
+        has_error: common.has_error,
+    }))(Routes)
+);
diff --git a/packages/reports/src/app.jsx b/packages/reports/src/app.jsx
index 2e44f8f0cfa0..d1e43a6ec07c 100644
--- a/packages/reports/src/app.jsx
+++ b/packages/reports/src/app.jsx
@@ -1,6 +1,6 @@
 import PropTypes from 'prop-types';
 import React from 'react';
-import Routes from 'Containers/routes.jsx';
+import Routes from 'Containers/routes';
 import { MobxContentProvider } from 'Stores/connect';
 import 'Sass/app.scss';
 import initStore from './init-store'; // eslint-disable-line import/extensions