Merge branch 'develop' into ocvrs-7906

docker-compose.yml

@@ -47,6 +47,17 @@ services:
       - base
     environment:
       - COUNTRY_CONFIG_URL_INTERNAL=http://countryconfig:3040
+
+  events:
+    image: opencrvs/ocrvs-events:${VERSION}
+    #platform: linux/amd64
+    build:
+      context: .
+      dockerfile: ./packages/events/Dockerfile
+    restart: unless-stopped
+    depends_on:
+      - base
+
   gateway:
     image: opencrvs/ocrvs-gateway:${VERSION}
     #platform: linux/amd64

packages/client/package.json

@@ -45,7 +45,7 @@
     "@types/nock": "^10.0.3",
     "@types/pdfmake": "^0.2.0",
     "@types/react-redux": "^7.1.5",
-    "@types/react-router": "^5.1.2",
+    "@types/react-router-dom": "^5.1.2",
     "@types/react-tooltip": "^4.2.4",
     "@types/redux-sentry-middleware": "^0.2.0",
     "@types/styled-components": "^5.1.3",
@@ -86,7 +86,7 @@
     "react-intl": "5.25.1",
     "react-page-visibility": "^3.2.1",
     "react-redux": "^7.1.1",
-    "react-router": "^5.1.2",
+    "react-router-dom": "^5.1.2",
     "react-stickynode": "^2.0.1",
     "react-tooltip": "^4.2.21",
     "react-transition-group": "^4.2.1",

packages/client/src/App.tsx

@@ -42,7 +42,7 @@ import { ConnectedRouter } from 'connected-react-router'
 import { History, Location } from 'history'
 import * as React from 'react'
 import { Provider } from 'react-redux'
-import { Route, Switch } from 'react-router'
+import { Route, Switch } from 'react-router-dom'
 import { AppStore } from './store'
 import { CorrectionForm, CorrectionReviewForm } from './views/CorrectionForm'
 import { VerifyCorrector } from './views/CorrectionForm/VerifyCorrector'

packages/client/src/components/Header/Header.tsx

@@ -44,7 +44,7 @@ import {
 import * as React from 'react'
 import { injectIntl, WrappedComponentProps as IntlShapeProps } from 'react-intl'
 import { connect } from 'react-redux'
-import { RouteComponentProps, withRouter } from 'react-router'
+import { RouteComponentProps, withRouter } from 'react-router-dom'
 import { TEAM_USER_LIST } from '@client/navigation/routes'
 import { setAdvancedSearchParam } from '@client/search/advancedSearch/actions'
 import { advancedSearchInitialState } from '@client/search/advancedSearch/reducer'

packages/client/src/components/Header/HistoryNavigator.tsx

@@ -10,7 +10,7 @@
  */
 import React from 'react'
 import { Button } from '@opencrvs/components/lib/Button'
-import { useHistory } from 'react-router'
+import { useHistory } from 'react-router-dom'
 import { useDispatch, useSelector } from 'react-redux'
 import { getUserDetails } from '@client/profile/profileSelectors'
 import {

packages/client/src/components/Notification.tsx

@@ -10,7 +10,7 @@
  */
 import * as React from 'react'
 import { connect } from 'react-redux'
-import { withRouter, RouteComponentProps } from 'react-router'
+import { withRouter, RouteComponentProps } from 'react-router-dom'
 import { messages } from '@client/i18n/messages/views/notifications'
 import { userMessages } from '@client/i18n/messages/user'
 import { WrappedComponentProps as IntlShapeProps, injectIntl } from 'react-intl'

packages/client/src/components/Page.tsx

@@ -10,7 +10,7 @@
  */
 import * as React from 'react'
 import styled from 'styled-components'
-import { RouteComponentProps, withRouter } from 'react-router'
+import { RouteComponentProps, withRouter } from 'react-router-dom'
 import { connect } from 'react-redux'
 import { IStoreState } from '@opencrvs/client/src/store'
 import { setInitialDeclarations } from '@client/declarations'

packages/client/src/components/ProtectedPage.tsx

@@ -12,7 +12,7 @@ import * as React from 'react'
 import PageVisibility from 'react-page-visibility'
 import { Unlock } from '@client/views/Unlock/Unlock'
 import { storage } from '@client/storage'
-import { withRouter, RouteComponentProps } from 'react-router'
+import { withRouter, RouteComponentProps } from 'react-router-dom'
 import { isMobileDevice } from '@client/utils/commonUtils'
 import IdleTimer from 'react-idle-timer'
 import { USER_DETAILS, UserDetails } from '@client/utils/userUtils'

packages/client/src/components/ProtectedRoute.tsx

@@ -9,7 +9,7 @@
  * Copyright (C) The OpenCRVS Authors located at https://github.com/opencrvs/opencrvs-core/blob/master/AUTHORS.
  */
 import * as React from 'react'
-import { Redirect, Route } from 'react-router'
+import { Redirect, Route } from 'react-router-dom'
 import { connect } from 'react-redux'
 import { IStoreState } from '@client/store'
 import { getAuthenticated } from '@client/profile/profileSelectors'

packages/client/src/components/ScrollToTop.tsx

@@ -9,7 +9,7 @@
  * Copyright (C) The OpenCRVS Authors located at https://github.com/opencrvs/opencrvs-core/blob/master/AUTHORS.
  */
 import React, { useEffect, ReactNode } from 'react'
-import { withRouter, RouteComponentProps } from 'react-router'
+import { withRouter, RouteComponentProps } from 'react-router-dom'
 
 type ScrollToTopProps = RouteComponentProps & { children?: ReactNode }
 

packages/client/src/components/TransitionWrapper.tsx

@@ -16,7 +16,7 @@ import {
   PAGE_TRANSITIONS_EXIT_TIME
 } from '@client/utils/constants'
 import * as routes from '@client/navigation/routes'
-import { matchPath } from 'react-router'
+import { matchPath } from 'react-router-dom'
 import { Location } from 'history'
 
 function isPathExactmatch(pathname: string, routesPath: string): boolean {

packages/client/src/components/charts/RegRatesLineChart.tsx

@@ -27,25 +27,6 @@ interface IProps extends WrappedComponentProps {
   completenessRateTime?: CompletenessRateTime
 }
 
-interface IActiveState {
-  value: number
-  stroke: string
-}
-interface IState {
-  legendMarginTop: number
-  legendMarginLeft: number
-  chartTop: number
-  chartRight: number
-  chartBottom: number
-  chartLeft: number
-  maximizeXAxisInterval?: boolean
-  legendLayout: LegendProps['layout']
-  activeLabel: string
-  activeRegisteredInTargetDays: IActiveState
-  activeTotalRegistered: IActiveState
-  activeTotalEstimate: IActiveState
-}
-
 const CustomLegendContainer = styled.div<{
   marginLeft: number
   marginTop: number
@@ -123,6 +104,26 @@ interface ILineDataPoint {
   registrationPercentage: string
 }
 
+interface IActiveState {
+  value: number
+  stroke: string
+}
+
+interface IState {
+  legendMarginTop: number
+  legendMarginLeft: number
+  chartTop: number
+  chartRight: number
+  chartBottom: number
+  chartLeft: number
+  maximizeXAxisInterval?: boolean
+  legendLayout: LegendProps['layout']
+  activeLabel: string
+  activeRegisteredInTargetDays: IActiveState
+  activeTotalRegistered: IActiveState
+  activeTotalEstimate: IActiveState
+}
+
 function LegendDot(props: React.HTMLAttributes<SVGElement>) {
   return (
     <svg width={10} height={10} viewBox="0 0 10 10" fill="none" {...props}>
@@ -146,6 +147,7 @@ const RegRatesLineChartComponent = (props: IProps) => {
       legendLayout: 'horizontal' as const
     }
   }
+
   const getStatePropertiesForLargeWindowChart = () => {
     return {
       legendMarginTop: -16,
@@ -292,6 +294,7 @@ const RegRatesLineChartComponent = (props: IProps) => {
     )
   }
 
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   const customizedTooltip = (dataPoint: any) => {
     const wrapperPayload = dataPoint.payload[0]
 
@@ -304,6 +307,7 @@ const RegRatesLineChartComponent = (props: IProps) => {
     )
   }
 
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   const mouseMoveHandler = (data: any) => {
     if (data && data.activePayload) {
       setState({
@@ -466,6 +470,7 @@ const RegRatesLineChartComponent = (props: IProps) => {
       />
     )
   }
+
   return getLoadingIndicator()
 }
 

packages/client/src/components/form/Redirect.tsx

@@ -14,7 +14,7 @@ import { getOfflineData } from '@client/offline/selectors'
 import { getUserDetails } from '@client/profile/profileSelectors'
 import React from 'react'
 import { useSelector } from 'react-redux'
-import { Redirect } from 'react-router'
+import { Redirect } from 'react-router-dom'
 
 export const RedirectField = ({
   to,

packages/client/src/components/interface/Navigation.tsx

@@ -62,7 +62,7 @@ import { omit } from 'lodash'
 import * as React from 'react'
 import { injectIntl, WrappedComponentProps as IntlShapeProps } from 'react-intl'
 import { connect } from 'react-redux'
-import { RouteComponentProps, withRouter } from 'react-router'
+import { RouteComponentProps, withRouter } from 'react-router-dom'
 import { IS_PROD_ENVIRONMENT } from '@client/utils/constants'
 
 const SCREEN_LOCK = 'screenLock'

packages/client/src/setupTests.ts

@@ -279,8 +279,8 @@ vi.mock('./utils', async () => ({
   getUserRole: vi.fn().mockImplementation((lang, role) => 'ENTREPENEUR')
 }))
 
-vi.mock('react-router', async () => ({
-  ...((await vi.importActual('react-router')) as any),
+vi.mock('react-router-dom', async () => ({
+  ...((await vi.importActual('react-router-dom')) as any),
   useParams: vi.fn().mockImplementation(() => ({
     event: 'birth',
     section: 'child'

packages/client/src/tests/util.tsx

@@ -48,7 +48,7 @@ import { waitForElement } from './wait-for-element'
 import { setUserDetails } from '@client/profile/profileActions'
 import { createLocation, createMemoryHistory, History } from 'history'
 import { stringify } from 'query-string'
-import { match as Match } from 'react-router'
+import { match as Match } from 'react-router-dom'
 import { ConnectedRouter } from 'connected-react-router'
 import { mockOfflineData } from './mock-offline-data'
 import { Section, SubmissionAction } from '@client/forms'

packages/client/src/views/AdvancedSearch/AdvancedSearchResult.tsx

@@ -43,7 +43,7 @@ import { messages as advancedSearchResultMessages } from '@client/i18n/messages/
 import { SearchEventsQuery } from '@client/utils/gateway'
 import { Frame } from '@opencrvs/components/lib/Frame'
 import { LoadingIndicator } from '@client/views/OfficeHome/LoadingIndicator'
-import { Redirect, RouteComponentProps } from 'react-router'
+import { Redirect, RouteComponentProps } from 'react-router-dom'
 import { ErrorText, Link, Pill } from '@client/../../components/lib'
 import { WQContentWrapper } from '@client/views/OfficeHome/WQContentWrapper'
 import {

packages/client/src/views/CorrectionForm/CorrectionForm.tsx

@@ -11,7 +11,7 @@
 import * as React from 'react'
 import { connect } from 'react-redux'
 import { IStoreState } from '@client/store'
-import { Redirect, RouteComponentProps } from 'react-router'
+import { Redirect, RouteComponentProps } from 'react-router-dom'
 import { IDeclaration, modifyDeclaration } from '@client/declarations'
 import {
   CorrectorForm,

packages/client/src/views/CorrectionForm/ReviewForm.tsx

@@ -20,7 +20,7 @@ import { CERTIFICATE_CORRECTION_REVIEW, HOME } from '@client/navigation/routes'
 import { connect } from 'react-redux'
 import { getEventReviewForm } from '@client/forms/register/review-selectors'
 import { Event } from '@client/utils/gateway'
-import { Redirect } from 'react-router'
+import { Redirect } from 'react-router-dom'
 
 type IStateProps = {
   declaration: IDeclaration | undefined

packages/client/src/views/CorrectionForm/VerifyCorrector.tsx

@@ -31,7 +31,7 @@ import {
 import * as React from 'react'
 import { WrappedComponentProps as IntlShapeProps, injectIntl } from 'react-intl'
 import { connect } from 'react-redux'
-import { Redirect, RouteComponentProps } from 'react-router'
+import { Redirect, RouteComponentProps } from 'react-router-dom'
 import {
   CERTIFICATE_CORRECTION_REVIEW,
   REGISTRAR_HOME_TAB

packages/client/src/views/IssueCertificate/IssueCertificate.tsx

@@ -14,7 +14,7 @@ import { Button } from '@opencrvs/components/lib/Button'
 import { constantsMessages } from '@client/i18n/messages'
 import { useIntl } from 'react-intl'
 import { HistoryNavigator } from '@client/components/Header/HistoryNavigator'
-import { Redirect, useParams } from 'react-router'
+import { Redirect, useParams } from 'react-router-dom'
 import { IPrintableDeclaration } from '@client/declarations'
 import { useDispatch } from 'react-redux'
 import { useDeclaration } from '@client/declarations/selectors'

packages/client/src/views/IssueCertificate/IssueCollectorForm/IssueCollectorForm.tsx

@@ -29,7 +29,7 @@ import {
 import { replaceInitialValues } from '@client/views/RegisterForm/RegisterForm'
 import { issueMessages } from '@client/i18n/messages/issueCertificate'
 import { getIssueCertCollectorGroupForEvent } from '@client/forms/certificate/fieldDefinitions/collectorSection'
-import { Redirect } from 'react-router'
+import { Redirect } from 'react-router-dom'
 import { REGISTRAR_HOME_TAB } from '@client/navigation/routes'
 import { WORKQUEUE_TABS } from '@client/components/interface/Navigation'
 import { getOfflineData } from '@client/offline/selectors'

packages/client/src/views/IssueCertificate/IssueCollectorForm/IssueFormForOthers.tsx

@@ -31,7 +31,7 @@ import {
   collectMarriageCertificateFormSection
 } from '@client/forms/certificate/fieldDefinitions/collectorSection'
 import { Event } from '@client/utils/gateway'
-import { Redirect } from 'react-router'
+import { Redirect } from 'react-router-dom'
 import { REGISTRAR_HOME_TAB } from '@client/navigation/routes'
 import { WORKQUEUE_TABS } from '@client/components/interface/Navigation'
 import { getOfflineData } from '@client/offline/selectors'

packages/client/src/views/IssueCertificate/IssueCollectorForm/IssuePayment.test.tsx

@@ -25,7 +25,7 @@ import * as React from 'react'
 import { Mock, vi } from 'vitest'
 import { IssuePayment } from './IssuePayment'
 import { storeDeclaration } from '@client/declarations'
-import { useParams } from 'react-router'
+import { useParams } from 'react-router-dom'
 
 const getItem = window.localStorage.getItem as Mock
 ;(queries.fetchUserDetails as Mock).mockReturnValue(mockUserResponse)

packages/client/src/views/IssueCertificate/IssueCollectorForm/IssuePayment.tsx

@@ -19,7 +19,7 @@ import {
 import { formatUrl, goBack, goToHomeTab } from '@client/navigation'
 import { useIntl } from 'react-intl'
 import * as React from 'react'
-import { Redirect, useParams } from 'react-router'
+import { Redirect, useParams } from 'react-router-dom'
 import { REGISTRAR_HOME_TAB } from '@client/navigation/routes'
 import { WORKQUEUE_TABS } from '@client/components/interface/Navigation'
 import {

packages/client/src/views/OfficeHome/Home.tsx

@@ -12,7 +12,7 @@ import { getUserDetails } from '@client/profile/profileSelectors'
 import * as React from 'react'
 import { useSelector } from 'react-redux'
 import { PERFORMANCE_HOME, REGISTRAR_HOME } from '@client/navigation/routes'
-import { Redirect } from 'react-router'
+import { Redirect } from 'react-router-dom'
 import { getDefaultPerformanceLocationId } from '@client/navigation'
 import { UserDetails } from '@client/utils/userUtils'
 import {

packages/client/src/views/OfficeHome/OfficeHome.tsx

@@ -40,7 +40,7 @@ import { Toast } from '@opencrvs/components/lib/Toast'
 import * as React from 'react'
 import { injectIntl, WrappedComponentProps as IntlShapeProps } from 'react-intl'
 import { connect } from 'react-redux'
-import { RouteComponentProps } from 'react-router'
+import { Link, RouteComponentProps } from 'react-router-dom'
 import { SentForReview } from './sentForReview/SentForReview'
 import { InProgress, SELECTOR_ID } from './inProgress/InProgress'
 import { ReadyToPrint } from './readyToPrint/ReadyToPrint'
@@ -61,6 +61,7 @@ import { ReadyToIssue } from './readyToIssue/ReadyToIssue'
 import { getOfflineData } from '@client/offline/selectors'
 import { IOfflineData } from '@client/offline/reducer'
 import { Event } from '@client/utils/gateway'
+import { SELECT_VITAL_EVENT } from '@client/navigation/routes'
 
 const FABContainer = styled.div`
   position: fixed;
@@ -456,11 +457,12 @@ class OfficeHomeView extends React.Component<
         )}
 
         <FABContainer>
-          <FloatingActionButton
-            id="new_event_declaration"
-            onClick={this.props.goToEvents}
-            icon={() => <PlusTransparentWhite />}
-          />
+          <Link to={SELECT_VITAL_EVENT}>
+            <FloatingActionButton
+              id="new_event_declaration"
+              icon={() => <PlusTransparentWhite />}
+            />
+          </Link>
         </FABContainer>
 
         {this.state.showCertificateToast && (