Arshad/WEBREL-178/TS-Migration CFD routes

packages/cfd/src/Components/Routes/binary-link.jsx → packages/cfd/src/Components/Routes/binary-link.tsx

@@ -1,14 +1,16 @@
-import PropTypes from 'prop-types';
 import React from 'react';
 import { NavLink } from 'react-router-dom';
-import { PlatformContext } from '@deriv/shared';
 import getRoutesConfig from '../../Constants/routes-config';
 import { findRouteByPath, normalizePath } from './helpers';
 
-const BinaryLink = ({ active_class, to, children, ...props }) => {
-    const { is_dashboard } = React.useContext(PlatformContext);
+type TBinaryLink = {
+    active_class: string;
+    to: string;
+};
+
+const BinaryLink = ({ active_class, to, children, ...props }: React.PropsWithChildren<TBinaryLink>) => {
     const path = normalizePath(to);
-    const route = findRouteByPath(path, getRoutesConfig({ is_dashboard }));
+    const route = findRouteByPath(path, getRoutesConfig());
 
     if (!route) {
         throw new Error(`Route not found: ${to}`);
@@ -23,10 +25,4 @@ const BinaryLink = ({ active_class, to, children, ...props }) => {
     );
 };
 
-BinaryLink.propTypes = {
-    active_class: PropTypes.string,
-    children: PropTypes.oneOfType([PropTypes.object, PropTypes.array, PropTypes.string]),
-    to: PropTypes.string,
-};
-
 export default BinaryLink;

packages/cfd/src/Components/Routes/binary-routes.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import { Switch } from 'react-router-dom';
+import { Localize } from '@deriv/translations';
+import getRoutesConfig from '../../Constants/routes-config';
+import { TBinaryRoutes } from '../../types/common-prop-types';
+import RouteWithSubRoutes from './route-with-sub-routes';
+
+const Loading = () => (
+    <div>
+        <Localize i18n_default_text='Loading...' />
+    </div>
+);
+
+const BinaryRoutes = (props: TBinaryRoutes) => (
+    <React.Suspense fallback={<Loading />}>
+        <Switch>
+            {getRoutesConfig().map(route => (
+                <RouteWithSubRoutes key={route.path} {...route} {...props} />
+            ))}
+        </Switch>
+    </React.Suspense>
+);
+
+export default BinaryRoutes;

packages/cfd/src/Components/Routes/helpers.ts

@@ -0,0 +1,39 @@
+import { matchPath } from 'react-router';
+import { routes } from '@deriv/shared';
+import { TRouteConfig } from '../../types/common-prop-types';
+
+export const normalizePath = (path: string) => (/^\//.test(path) ? path : `/${path || ''}`); // Default to '/'
+
+export const findRouteByPath = (path: string, routes_config: TRouteConfig[]) => {
+    let result: TRouteConfig | undefined;
+
+    routes_config.some(route_info => {
+        let match_path;
+        try {
+            match_path = matchPath(path, route_info);
+        } catch (e) {
+            if (/undefined/.test((e as Error).message)) {
+                return undefined;
+            }
+        }
+
+        if (match_path) {
+            result = route_info;
+            return true;
+        } else if (route_info.routes) {
+            result = findRouteByPath(path, route_info.routes);
+            return result;
+        }
+        return false;
+    });
+
+    return result;
+};
+
+export const isRouteVisible = (route: TRouteConfig, is_logged_in: boolean) =>
+    !(route && route.is_authenticated && !is_logged_in);
+
+export const getPath = (route_path: string, params: { [x: string]: string } = {}) =>
+    Object.keys(params).reduce((p, name) => p.replace(`:${name}`, params[name]), route_path);
+
+export const getContractPath = (contract_id: string) => getPath(routes.contract, { contract_id });

packages/cfd/src/Components/Routes/index.ts

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

packages/cfd/src/Components/Routes/route-with-sub-routes.jsx → packages/cfd/src/Components/Routes/route-with-sub-routes.tsx

@@ -1,14 +1,17 @@
 import React from 'react';
-import { Redirect, Route } from 'react-router-dom';
+import { Redirect, Route, RouteComponentProps } from 'react-router-dom';
 import { redirectToLogin, isEmptyObject, routes, removeBranchName, default_title } from '@deriv/shared';
 import { getLanguage } from '@deriv/translations';
+import { TBinaryRoutes, TRoute, TRouteConfig } from '../../types/common-prop-types';
 
-const RouteWithSubRoutes = route => {
-    const renderFactory = props => {
+type TRouteWithSubRoutesProps = TRouteConfig & TBinaryRoutes;
+
+const RouteWithSubRoutes = (route: TRouteWithSubRoutesProps) => {
+    const renderFactory = (props: RouteComponentProps) => {
         let result = null;
 
         if (route.component === Redirect) {
-            let to = route.to;
+            let to = route.to as string;
 
             // This if clause has been added just to remove '/index' from url in localhost env.
             if (route.path === routes.index) {
@@ -19,20 +22,25 @@ const RouteWithSubRoutes = route => {
         } else if (route.is_authenticated && !route.is_logged_in && !route.is_logging_in) {
             redirectToLogin(route.is_logged_in, getLanguage());
         } else {
-            const default_subroute = (route.routes ?? []).reduce(
+            const default_subroute = (route.routes ?? []).reduce<TRoute | object>(
                 (acc, cur) => ({
                     ...acc,
-                    ...cur.subroutes.find(subroute => subroute.default),
+                    ...cur.subroutes?.find(subroute => subroute.default),
                 }),
                 {}
             );
-            const has_default_subroute = !isEmptyObject(default_subroute);
+
+            const isNotEmpty = (obj: object | TRoute): obj is TRoute => !isEmptyObject(obj);
+            const has_default_subroute = isNotEmpty(default_subroute);
+
             const pathname = removeBranchName(location.pathname);
 
+            const RouteComponent = route.component as React.ElementType;
+
             result = (
                 <React.Fragment>
                     {has_default_subroute && pathname === route.path && <Redirect to={default_subroute.path} />}
-                    <route.component {...props} routes={route.routes} />
+                    <RouteComponent {...props} routes={route.routes} />
                 </React.Fragment>
             );
         }

packages/cfd/src/Constants/routes-config.tsx

@@ -1,18 +1,9 @@
 import React from 'react';
-import CFD from '../Containers';
 import { routes } from '@deriv/shared';
 import { localize } from '@deriv/translations';
-
-export type TRoute = {
-    path?: string;
-    component?: (props: any) => React.ReactNode;
-    getTitle: () => string;
-};
-
-export type TRouteConfig = TRoute & {
-    is_authenticated?: boolean;
-    routes?: TRoute[];
-};
+import CFD from '../Containers';
+import { TCFDDashboardProps } from '../Containers/cfd-dashboard';
+import { TRouteConfig } from '../types/common-prop-types';
 
 // Error Routes
 const Page404 = React.lazy(() => import(/* webpackChunkName: "404" */ '../Modules/Page404'));
@@ -22,15 +13,13 @@ const initRoutesConfig = (): TRouteConfig[] => {
     return [
         {
             path: routes.dxtrade,
-            // eslint-disable-next-line react/display-name
-            component: props => <CFD {...props} platform='dxtrade' />,
+            component: (props: TCFDDashboardProps) => <CFD {...props} platform='dxtrade' />,
             getTitle: () => localize('Deriv X'),
             is_authenticated: false,
         },
         {
             path: routes.mt5,
-            // eslint-disable-next-line react/display-name
-            component: props => <CFD {...props} platform='mt5' />,
+            component: (props: TCFDDashboardProps) => <CFD {...props} platform='mt5' />,
             getTitle: () => localize('MT5'),
             is_authenticated: false,
         },

packages/cfd/src/types/common-prop-types.ts

@@ -0,0 +1,21 @@
+import { Redirect } from 'react-router-dom';
+
+export type TRoute = {
+    exact?: boolean;
+    path: string;
+    default?: boolean;
+    to?: string;
+    component?: ((props?: any) => JSX.Element) | typeof Redirect | React.LazyExoticComponent<() => JSX.Element>;
+    getTitle?: () => string;
+    subroutes?: TRoute[];
+};
+
+export type TRouteConfig = TRoute & {
+    is_authenticated?: boolean;
+    routes?: TRoute[];
+};
+
+export type TBinaryRoutes = {
+    is_logged_in: boolean;
+    is_logging_in: boolean;
+};