Sergei / chore: ts migration of routes (#38)

* chore: ts migration of routes

* chore: change RootStore type

packages/reports/src/Components/Errors/error-component.tsx

@@ -2,16 +2,7 @@ import React from 'react';
 import { PageError, Dialog } from '@deriv/components';
 import { routes } from '@deriv/shared';
 import { localize } from '@deriv/translations';
-
-type TErrorComponent = {
-    header: string;
-    is_dialog: boolean;
-    message: React.ReactElement | string;
-    redirect_label: string;
-    redirectOnClick: () => void;
-    should_show_refresh: boolean;
-    type: string;
-};
+import { TErrorComponent } from '../../Types';
 
 const ErrorComponent = ({
     header,

packages/reports/src/Components/Routes/index.js

@@ -0,0 +1,7 @@
+import BinaryLink from './binary-link';
+import RouteWithSubRoutes from './route-with-sub-routes';
+import BinaryRoutes from './binary-routes';
+
+export * from './helpers';
+export { BinaryLink, RouteWithSubRoutes };
+export default BinaryRoutes;

packages/reports/src/Containers/routes.tsx

@@ -0,0 +1,26 @@
+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 { TRootStore } from 'Stores/index';
+import { TRoutes } from '../Types';
+
+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 }: TRootStore) => ({
+        is_logged_in: client.is_logged_in,
+        is_logging_in: client.is_logging_in,
+        error: common.error,
+        has_error: common.has_error,
+    }))(Routes)
+);

packages/reports/src/Types/common-prop.type.ts

@@ -24,6 +24,25 @@ export type TRoute = {
     exact?: boolean;
 };
 
+export type TErrorComponent = {
+    header: string;
+    is_dialog: boolean;
+    message: React.ReactElement | string;
+    redirect_label: string;
+    redirectOnClick: () => void;
+    should_show_refresh: boolean;
+    type: string;
+};
+
+export type TRoutes = {
+    error?: TErrorComponent;
+    has_error?: boolean;
+    is_logged_in?: boolean;
+    is_logging_in?: boolean;
+    is_virtual?: boolean;
+    passthrough?: TPassthrough;
+};
+
 export type TRouteConfig = TRoute & {
     is_modal?: boolean;
     is_authenticated?: boolean;

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