Merge branch 'develop' into chrore/create-test-boilerplate-for-events

packages/auth/src/features/authenticate/service.ts

@@ -37,6 +37,7 @@ const sign = promisify<
   jwt.SignOptions,
   string
 >(jwt.sign)
+
 export interface IUserName {
   use: string
   family: string
@@ -213,6 +214,7 @@ export async function generateAndSendVerificationCode(
   } else {
     verificationCode = await generateVerificationCode(nonce)
   }
+
   if (!env.isProd || env.QA_ENV) {
     logger.info(
       `Sending a verification to,

packages/client/src/App.test.tsx

@@ -73,12 +73,10 @@ describe('when user has a valid token in url but an expired one in localStorage'
 
     window.history.replaceState({}, '', '?token=' + token)
 
-    const { app } = await createTestApp(
-      { waitUntilOfflineCountryConfigLoaded: false },
-      ['/?token=' + token]
-    )
+    await createTestApp({ waitUntilOfflineCountryConfigLoaded: false }, [
+      '/?token=' + token
+    ])
 
-    app.debug()
     expect(assign.mock.calls).toHaveLength(0)
   })
 })

packages/login/package.json

@@ -10,14 +10,12 @@
     "@sentry/tracing": "^7.12.1",
     "@types/history": "^4.6.2",
     "@types/react-redux": "^7.1.5",
-    "@types/react-router-dom": "5.3.3",
     "@types/redux-sentry-middleware": "^0.2.0",
     "@types/styled-components": "^5.1.3",
     "@typescript-eslint/eslint-plugin": "^4.5.0",
     "@typescript-eslint/parser": "^4.5.0",
     "@vitejs/plugin-react": "^4.2.1",
     "axios": "^1.7.2",
-    "connected-react-router": "^6.5.2",
     "country-data": "^0.0.31",
     "email-validator": "^2.0.4",
     "eslint": "^7.11.0",
@@ -40,7 +38,7 @@
     "react-final-form": "^6.5.9",
     "react-intl": "5.25.1",
     "react-redux": "^7.1.1",
-    "react-router-dom": "5.3.3",
+    "react-router-dom": "^6.28.0",
     "redux": "^4.0.4",
     "redux-loop": "^5.0.0",
     "redux-sentry-middleware": "^0.2.0",
@@ -55,7 +53,7 @@
     "gen:sw": "workbox generateSW --config workbox-config.js",
     "docker:build": "docker build ../../ -f ../../Dockerfile-login -t ocrvs-login",
     "docker:run": "docker run -it --rm -p 5000:80 --name ocrvs-login ocrvs-login",
-    "test": "yarn test:compilation",
+    "test": "yarn test:compilation && vitest run --coverage --silent --dangerouslyIgnoreUnhandledErrors",
     "test:watch": "vitest",
     "open:cov": "yarn test && opener coverage/index.html",
     "lint:css": "stylelint 'src/**/*.{ts,tsx}'",
@@ -126,13 +124,5 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
-  },
-  "workspaces": {
-    "nohoist": [
-      "**/connected-react-router",
-      "**/connected-react-router/**",
-      "**/@types/react-router-dom",
-      "**/@types/react-router-dom/**"
-    ]
   }
 }

packages/login/src/App.tsx

@@ -16,13 +16,10 @@ import { AppStore } from '@login/store'
 import { StepOneContainer } from '@login/views/StepOne/StepOneContainer'
 import { getTheme } from '@opencrvs/components/lib/theme'
 import * as React from 'react'
-import { History } from 'history'
 import { Provider } from 'react-redux'
-import { Route, Switch } from 'react-router-dom'
-import { ConnectedRouter } from 'connected-react-router'
+import { createBrowserRouter, Outlet, RouterProvider } from 'react-router-dom'
 import { createGlobalStyle, ThemeProvider } from 'styled-components'
 import { ForgottenItem } from './views/ResetCredentialsForm/ForgottenItemForm'
-import { ResetCredentialsSuccessPage } from './views/ResetCredentialsForm/ResetCredentialsSuccessPage'
 import { AuthDetailsVerification } from './views/ResetCredentialsForm/AuthDetailsVerificationForm'
 import { RecoveryCodeEntry } from './views/ResetCredentialsForm/RecoveryCodeEntryForm'
 import { SecurityQuestion } from './views/ResetCredentialsForm/SecurityQuestionForm'
@@ -31,10 +28,11 @@ import { Page } from './Page'
 import { LoginBackgroundWrapper } from '@login/common/LoginBackgroundWrapper'
 import { StepTwoContainer } from '@login/views/StepTwo/StepTwoContainer'
 import { ReloadModal } from './views/ReloadModal'
+import { ResetCredentialsSuccessPage } from './views/ResetCredentialsForm/ResetCredentialsSuccessPage'
 
 interface IAppProps {
   store: AppStore
-  history: History
+  router: ReturnType<typeof createBrowserRouter>
 }
 
 // Injecting global styles for the body tag - used only once
@@ -45,60 +43,94 @@ const GlobalStyle = createGlobalStyle`
     padding: 0;
   }
 `
+export const routesConfig = [
+  {
+    path: '/',
+    element: (
+      <>
+        <ReloadModal />
+        <Page>
+          <Outlet />
+        </Page>
+      </>
+    ),
+
+    children: [
+      {
+        path: routes.STEP_ONE,
+        element: (
+          <LoginBackgroundWrapper>
+            <StepOneContainer />
+          </LoginBackgroundWrapper>
+        )
+      },
+      {
+        path: routes.STEP_TWO,
+        element: (
+          <LoginBackgroundWrapper>
+            <StepTwoContainer />
+          </LoginBackgroundWrapper>
+        )
+      },
+      {
+        path: routes.FORGOTTEN_ITEM,
+        element: (
+          <PageContainer>
+            <ForgottenItem />
+          </PageContainer>
+        )
+      },
+      {
+        path: routes.PHONE_NUMBER_VERIFICATION,
+        element: (
+          <PageContainer>
+            <AuthDetailsVerification />
+          </PageContainer>
+        )
+      },
+      {
+        path: routes.RECOVERY_CODE_ENTRY,
+        element: (
+          <PageContainer>
+            <RecoveryCodeEntry />
+          </PageContainer>
+        )
+      },
+      {
+        path: routes.SECURITY_QUESTION,
+        element: (
+          <PageContainer>
+            <SecurityQuestion />
+          </PageContainer>
+        )
+      },
+      {
+        path: routes.UPDATE_PASSWORD,
+        element: (
+          <PageContainer>
+            <UpdatePassword />
+          </PageContainer>
+        )
+      },
+      {
+        path: routes.SUCCESS,
+        element: (
+          <PageContainer>
+            <ResetCredentialsSuccessPage />
+          </PageContainer>
+        )
+      }
+    ]
+  }
+]
 
-export const App = ({ store, history }: IAppProps) => (
+export const App = ({ store, router }: IAppProps) => (
   <ErrorBoundary>
     <GlobalStyle />
     <Provider store={store}>
       <IntlContainer>
         <ThemeProvider theme={getTheme()}>
-          <ConnectedRouter history={history}>
-            <ReloadModal />
-            <Page>
-              <Switch>
-                <Route exact path={routes.STEP_ONE}>
-                  <LoginBackgroundWrapper>
-                    <StepOneContainer />
-                  </LoginBackgroundWrapper>
-                </Route>
-                <Route exact path={routes.STEP_TWO}>
-                  <LoginBackgroundWrapper>
-                    <StepTwoContainer />
-                  </LoginBackgroundWrapper>
-                </Route>
-                <Route exact path={routes.FORGOTTEN_ITEM}>
-                  <PageContainer>
-                    <ForgottenItem />
-                  </PageContainer>
-                </Route>
-                <Route exact path={routes.PHONE_NUMBER_VERIFICATION}>
-                  <PageContainer>
-                    <AuthDetailsVerification />
-                  </PageContainer>
-                </Route>
-                <Route exact path={routes.RECOVERY_CODE_ENTRY}>
-                  <PageContainer>
-                    <RecoveryCodeEntry />
-                  </PageContainer>
-                </Route>
-                <Route exact path={routes.SECURITY_QUESTION}>
-                  <PageContainer>
-                    <SecurityQuestion />
-                  </PageContainer>
-                </Route>
-                <Route exact path={routes.UPDATE_PASSWORD}>
-                  <PageContainer>
-                    <UpdatePassword />
-                  </PageContainer>
-                </Route>
-                <Route
-                  exact
-                  path={routes.SUCCESS}
-                  component={ResetCredentialsSuccessPage}
-                ></Route>
-              </Switch>
-            </Page>
-          </ConnectedRouter>
+          <RouterProvider router={router} />
         </ThemeProvider>
       </IntlContainer>
     </Provider>

packages/login/src/common/WithRouterProps.tsx

@@ -0,0 +1,57 @@
+/*
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at https://mozilla.org/MPL/2.0/.
+ *
+ * OpenCRVS is also distributed under the terms of the Civil Registration
+ * & Healthcare Disclaimer located at http://opencrvs.org/license.
+ *
+ * Copyright (C) The OpenCRVS Authors located at https://github.com/opencrvs/opencrvs-core/blob/master/AUTHORS.
+ */
+
+import {
+  useLocation,
+  useNavigate,
+  useParams,
+  Location,
+  NavigateFunction,
+  Params
+} from 'react-router-dom'
+import * as React from 'react'
+
+export type RouteComponentProps<T = {}> = {
+  router: {
+    location: Location
+    navigate: NavigateFunction
+    params: Readonly<Params<string>>
+    match: { params: Readonly<Params<string>> }
+  }
+} & T
+
+/**
+ * Higher order component to pass router props to a component.
+ * withRouter was deprecated in react-router-dom v6.
+ * This implementation introduces the similar functionality using react-router-dom hooks.
+ */
+export function withRouter<ComponentProps extends RouteComponentProps>(
+  Component: React.ComponentType<ComponentProps>
+) {
+  function ComponentWithRouterProp(props: Omit<ComponentProps, 'router'>) {
+    const location = useLocation()
+    const navigate = useNavigate()
+    const params = useParams()
+
+    /**
+     * For backwards compatibility, match is added to the router prop.
+     */
+    const match = { params }
+    return (
+      <Component
+        {...(props as ComponentProps)}
+        router={{ location, navigate, params, match }}
+      />
+    )
+  }
+
+  return ComponentWithRouterProp
+}

packages/login/src/i18n/components/LanguageSelect.tsx

@@ -18,7 +18,7 @@ import {
 import styled from 'styled-components'
 import { useSearchQuery } from '@login/i18n/utils'
 import { getLanguages, getLanguage } from '@login/i18n/selectors'
-import { useHistory, useLocation } from 'react-router-dom'
+import { useLocation, useNavigate } from 'react-router-dom'
 import { defineMessages, useIntl } from 'react-intl'
 
 const SelectContainer = styled.div`
@@ -38,7 +38,7 @@ const messages = defineMessages({
 
 function useLanguage(selectedLanguage: string, paramLanguage: string | null) {
   const applicationLanguages = window.config.LANGUAGES.split(',')
-  const history = useHistory()
+  const navigate = useNavigate()
   const location = useLocation()
   const dispatch = useDispatch()
   const languages = useSelector(getLanguages)
@@ -53,10 +53,15 @@ function useLanguage(selectedLanguage: string, paramLanguage: string | null) {
 
   const onChange = ({ value }: ISelect2Option) => {
     if (paramLanguage) {
-      history.replace({
-        pathname: location.pathname,
-        search: `lang=${value}`
-      })
+      navigate(
+        {
+          pathname: location.pathname,
+          search: `lang=${value}`
+        },
+        {
+          replace: true
+        }
+      )
     }
     dispatch(changeLanguage({ language: value }))
   }

packages/login/src/index.tsx

@@ -12,7 +12,7 @@ import * as React from 'react'
 import { createRoot } from 'react-dom/client'
 import * as Sentry from '@sentry/react'
 
-import { App } from '@login/App'
+import { App, routesConfig } from '@login/App'
 import { storage } from '@login/storage'
 import { createStore } from './store'
 import { BrowserTracing } from '@sentry/tracing'
@@ -22,6 +22,7 @@ import WebFont from 'webfontloader'
 import { authApi } from './utils/authApi'
 import { delay } from 'lodash'
 import { applicationConfigLoadedAction } from './login/actions'
+import { createBrowserRouter } from 'react-router-dom'
 
 const RETRY_TIMEOUT = 5000
 
@@ -45,15 +46,17 @@ if (
     })
   }
 }
-const { store, history } = createStore()
+const { store } = createStore()
 
 const container = document.getElementById('root')
 const root = createRoot(container!)
+const router = createBrowserRouter(routesConfig)
 
 async function renderAppWithConfig() {
   return authApi.getApplicationConfig().then((res) => {
     store.dispatch(applicationConfigLoadedAction(res))
-    root.render(<App store={store} history={history} />)
+
+    root.render(<App router={router} store={store} />)
   })
 }