Merge pull request #2572 from Amsterdam/feature/react-router-featurebranch

[feat-5189]: react router featurebranch

Author: OscarBakker

package-lock.json

@@ -47,10 +47,11 @@
     "@hookform/resolvers": "^2.9.10",
     "@microsoft/applicationinsights-web": "^2.8.9",
     "@sentry/browser": "^6.19.7",
+    "@types/react-router-dom": "^5.3.3",
     "@types/scroll-lock": "^2.1.0",
     "classnames": "^2.3.2",
     "date-fns": "^2.29.3",
-    "history": "^4.10.1",
+    "history": "^5.2.0",
     "hoist-non-react-statics": "^3.3.2",
     "immutable": "^4.0.0-rc.12",
     "invariant": "^2.2.4",
@@ -65,11 +66,11 @@
     "react-helmet": "^6.1.0",
     "react-hook-form": "^7.26.0",
     "react-markdown": "^6.0.3",
-    "react-redux": "^7.2.9",
+    "react-redux": "^7.2.6",
     "react-responsive": "^9.0.2",
-    "react-router-dom": "^5.3.4",
+    "react-router-dom": "6.2.1",
     "redux": "^4.1.2",
-    "redux-first-history": "^5.1.1",
+    "redux-first-history": "5.0.8",
     "redux-immutable": "4.0.0",
     "redux-saga": "^1.2.2",
     "reselect": "^4.1.7",
@@ -108,7 +109,6 @@
     "@types/react-dom": "^17.0.18",
     "@types/react-helmet": "^6.1.6",
     "@types/react-redux": "^7.1.16",
-    "@types/react-router-dom": "^5.3.3",
     "@types/styled-components": "^5.1.26",
     "@types/webpack": "^5.28.0",
     "@types/webpack-env": "^1.18.0",

package.json

@@ -4,7 +4,7 @@ import { ApplicationInsights } from '@microsoft/applicationinsights-web'
 import * as Sentry from '@sentry/browser'
 import ReactDOM from 'react-dom'
 import { Provider } from 'react-redux'
-import { Router } from 'react-router-dom'
+import { HistoryRouter as Router } from 'redux-first-history/rr6'
 
 import App from 'containers/App'
 import { authenticateUser } from 'containers/App/actions'

src/app.js

@@ -1,17 +1,16 @@
 // SPDX-License-Identifier: MPL-2.0
 // Copyright (C) 2023 Gemeente Amsterdam
-import { useHistory } from 'react-router-dom'
+import { useLocation } from 'react-router-dom'
 
 import configuration from 'shared/services/configuration/configuration'
 
 import { StyledAlert, StyledMarkdown } from './styled'
 
 export const FrontPageAlert = () => {
-  const history = useHistory()
+  const location = useLocation()
   const alertText = configuration.frontPageAlert.text
 
-  if (!(history.location.pathname === '/incident/beschrijf') || !alertText)
-    return null
+  if (!(location.pathname === '/incident/beschrijf') || !alertText) return null
 
   return (
     <StyledAlert level="error" outline>

src/components/FrontPageAlert/FrontPageAlert.tsx

@@ -1,11 +1,11 @@
 // SPDX-License-Identifier: MPL-2.0
-// Copyright (C) 2019 - 2022 Gemeente Amsterdam
+// Copyright (C) 2019 - 2023 Gemeente Amsterdam
 import type { FunctionComponent } from 'react'
 import { useEffect, useState, useCallback, useRef } from 'react'
 
 import { Close } from '@amsterdam/asc-assets'
 import { Column, Row } from '@amsterdam/asc-ui'
-import { useHistory } from 'react-router-dom'
+import { useLocation } from 'react-router-dom'
 
 import {
   ONCLOSE_TIMEOUT,
@@ -51,30 +51,29 @@ const Notification: FunctionComponent<NotificationProps> = ({
   const [shouldHide, setShouldHide] = useState(false)
   const isFrontOffice = useIsFrontOffice()
   const tall = isFrontOffice && !getIsAuthenticated()
-  const history = useHistory()
+  const location = useLocation()
 
   // persisting timeout IDs across renders
   const onCloseTimeoutRef = useRef<number>()
   const slideUpTimeoutRef = useRef<number>()
 
   /**
-   * Subscribe to history changes
    * Will reset the notification whenever a navigation action occurs and only when the type of the
    * notifcation is TYPE_LOCAL
    */
+  const didMount = useRef(false)
+
   useEffect(() => {
     if (type !== TYPE_LOCAL || typeof onClose !== 'function') {
       return undefined
     }
 
-    const unlisten = history.listen(() => {
+    if (didMount.current) {
       onClose()
-    })
-
-    return () => {
-      unlisten()
     }
-  }, [history, type, title, onClose])
+
+    didMount.current = true
+  }, [onClose, type, location])
 
   useEffect(() => {
     if (
@@ -99,7 +98,6 @@ const Notification: FunctionComponent<NotificationProps> = ({
 
       const onCloseTimeoutId = window.setTimeout(() => {
         window.clearTimeout(onCloseTimeoutRef.current)
-
         onClose()
       }, ONCLOSE_TIMEOUT + SLIDEUP_TIMEOUT)
 

src/components/Notification/index.tsx

@@ -1,5 +1,5 @@
 // SPDX-License-Identifier: MPL-2.0
-// Copyright (C) 2020 - 2021 Gemeente Amsterdam
+// Copyright (C) 2020 - 2023 Gemeente Amsterdam
 import type { FunctionComponent } from 'react'
 
 import { Close } from '@amsterdam/asc-assets'
@@ -85,7 +85,7 @@ const DetailPanel: FunctionComponent<DetailPanelProps> = ({
         <AscLink
           as={Link}
           variant="inline"
-          to={`${INCIDENT_URL}/${incident.id}`}
+          to={`../${INCIDENT_URL}/${incident.id}`}
         >
           Melding {incident.id}
         </AscLink>

src/components/OverviewMap/DetailPanel/DetailPanel.tsx

@@ -4,8 +4,7 @@ import { useMemo } from 'react'
 import type { FunctionComponent } from 'react'
 
 import { useSelector } from 'react-redux'
-import type { RouteComponentProps, RouteProps } from 'react-router-dom'
-import { Route } from 'react-router-dom'
+import type { RouteProps } from 'react-router-dom'
 
 import NotFoundPage from 'components/pages/NotFoundPage'
 import {
@@ -16,10 +15,10 @@ import {
 export const NO_PAGE_ACCESS_MESSAGE = 'U heeft geen toegang tot deze pagina'
 export const NO_PAGE_FOUND_MESSAGE = 'We hebben de pagina niet gevonden'
 
-interface ProtectedRouteProps extends RouteProps {
+type ProtectedRouteProps = RouteProps & {
   role?: string
   roleGroup?: string
-  component: (props: RouteComponentProps<any>) => JSX.Element | null
+  component: (props: any) => JSX.Element | null
 }
 
 const ProtectedRoute: FunctionComponent<ProtectedRouteProps> = ({
@@ -34,20 +33,12 @@ const ProtectedRoute: FunctionComponent<ProtectedRouteProps> = ({
     () => (role && userCan(role)) || (roleGroup && userCanAccess(roleGroup)),
     [role, roleGroup, userCan, userCanAccess]
   )
-
   if (!Component) return <NotFoundPage message={NO_PAGE_FOUND_MESSAGE} />
 
-  return (
-    <Route
-      {...rest}
-      render={(props) =>
-        hasAccess ? (
-          <Component {...props} />
-        ) : (
-          <NotFoundPage message={NO_PAGE_ACCESS_MESSAGE} />
-        )
-      }
-    />
+  return hasAccess ? (
+    <Component {...rest} />
+  ) : (
+    <NotFoundPage message={NO_PAGE_ACCESS_MESSAGE} />
   )
 }
 

src/components/ProtectedRoute/ProtectedRoute.tsx

@@ -1,7 +1,6 @@
 // SPDX-License-Identifier: MPL-2.0
 // Copyright (C) 2021-2022 Gemeente Amsterdam
 import { render, act, screen } from '@testing-library/react'
-import type { RouteComponentProps } from 'react-router-dom'
 
 import * as appSelectors from 'containers/App/selectors' // { makeSelectUserCanAccess, makeSelectUserCan }
 import { withAppContext, history } from 'test/utils'
@@ -20,11 +19,11 @@ describe('ProtectedRoute component', () => {
 
   it('should render not found message when component does not exist', () => {
     const MockComponentUndefined = undefined as unknown as (
-      props: RouteComponentProps<any>
+      props: any
     ) => JSX.Element
     render(
       withAppContext(
-        <ProtectedRoute exact path="/test" component={MockComponentUndefined} />
+        <ProtectedRoute path="/test" component={MockComponentUndefined} />
       )
     )
 
@@ -39,9 +38,7 @@ describe('ProtectedRoute component', () => {
 
   it("should NOT render the component when doesn't have access", () => {
     render(
-      withAppContext(
-        <ProtectedRoute exact path="/test" component={TestComponent} />
-      )
+      withAppContext(<ProtectedRoute path="/test" component={TestComponent} />)
     )
 
     act(() => {
@@ -59,12 +56,7 @@ describe('ProtectedRoute component', () => {
       .mockImplementation(() => () => true)
     render(
       withAppContext(
-        <ProtectedRoute
-          exact
-          path="/test"
-          component={TestComponent}
-          role="role"
-        />
+        <ProtectedRoute path="/test" component={TestComponent} role="role" />
       )
     )
 
@@ -84,7 +76,6 @@ describe('ProtectedRoute component', () => {
     render(
       withAppContext(
         <ProtectedRoute
-          exact
           path="/test"
           component={TestComponent}
           roleGroup="roleGroup"

src/components/ProtectedRoute/__tests__/ProtectedRoute.test.tsx

@@ -1,9 +1,8 @@
 // SPDX-License-Identifier: MPL-2.0
 // Copyright (C) 2020 - 2022 Gemeente Amsterdam
-import { render, screen } from '@testing-library/react'
+import { render, screen, waitFor } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
 import * as reactRedux from 'react-redux'
-import * as reactRouterDom from 'react-router-dom'
 
 import configuration from 'shared/services/configuration/configuration'
 import { formatAddress } from 'shared/services/format-address'
@@ -12,6 +11,7 @@ import { AssetSelectProvider } from 'signals/incident/components/form/MapSelecto
 import type { SummaryProps } from 'signals/incident/components/form/MapSelectors/Asset/types'
 import type { Item } from 'signals/incident/components/form/MapSelectors/types'
 import { showMap } from 'signals/incident/containers/IncidentContainer/actions'
+import { history } from 'test/utils'
 import { withAppContext } from 'test/utils'
 import type { Address } from 'types/address'
 
@@ -58,22 +58,12 @@ export const summaryProps: SummaryProps = {
   coordinates: { lat: 0, lng: 0 },
 }
 
-let mockLocation = {
-  pathname: '/incident/vulaan',
-  referrer: '/',
-  search: '',
-  state: {},
-  hash: '',
-}
-
 export const withContext = (
   Component: JSX.Element,
   context = assetSelectContextValue
 ) =>
   withAppContext(
-    <reactRouterDom.MemoryRouter initialEntries={[mockLocation]}>
-      <AssetSelectProvider value={context}>{Component}</AssetSelectProvider>
-    </reactRouterDom.MemoryRouter>
+    <AssetSelectProvider value={context}>{Component}</AssetSelectProvider>
   )
 
 const dispatch = jest.fn()
@@ -204,14 +194,13 @@ describe('signals/incident/components/form/AssetSelect/Summary', () => {
     expect(screen.getByTestId('map-edit-button')).toBeInTheDocument()
   })
 
-  it("does not render the mapEditButton at 'incident/summary'", () => {
-    mockLocation = {
-      ...mockLocation,
-      pathname: '/incident/summary',
-    }
+  it("does not render the mapEditButton at 'incident/summary'", async () => {
+    history.push('/incident/summary')
 
     render(withContext(<Summary {...summaryProps} />))
 
-    expect(screen.queryByTestId('map-edit-button')).not.toBeInTheDocument()
+    await waitFor(() => {
+      expect(screen.queryByTestId('map-edit-button')).not.toBeInTheDocument()
+    })
   })
 })

src/components/Summary/Summary.test.tsx

@@ -72,7 +72,7 @@ export default function configureStore(initialState: Record<string, any>) {
   /* istanbul ignore next */
   if (module.hot) {
     module.hot.accept('./reducers', () => {
-      store.replaceReducer(createReducer({ ...store.injectedReducers }))
+      store.replaceReducer(createReducer(store.injectedReducers))
     })
   }
 

src/configureStore.ts

@@ -1,7 +1,6 @@
 // SPDX-License-Identifier: MPL-2.0
-// Copyright (C) 2019 - 2022 Gemeente Amsterdam
+// Copyright (C) 2019 - 2023 Gemeente Amsterdam
 import { render, screen, act } from '@testing-library/react'
-import type { UnregisterCallback, History } from 'history'
 import * as reactRedux from 'react-redux'
 
 import { fetchCategories as fetchCategoriesAction } from 'models/categories/actions'
@@ -30,10 +29,7 @@ jest.mock('shared/services/auth/auth', () => ({
 jest.useFakeTimers()
 
 describe('<App />', () => {
-  let listenSpy: jest.SpyInstance<
-    UnregisterCallback,
-    [listener: History.LocationListener<unknown>]
-  >
+  let listenSpy: jest.SpyInstance
   let spyScrollTo: jest.Mock
   let props: JSX.IntrinsicAttributes & { resetIncidentAction: jest.Mock }
 
@@ -60,13 +56,13 @@ describe('<App />', () => {
   it('should scroll to top on history change', () => {
     render(withAppContext(<App />))
 
-    expect(spyScrollTo).not.toHaveBeenCalled()
+    expect(spyScrollTo).toHaveBeenCalledWith(0, 0)
 
     act(() => {
       history.push('/somewhere/else')
     })
 
-    expect(spyScrollTo).toHaveBeenCalledWith(0, 0)
+    expect(spyScrollTo).toHaveBeenCalledTimes(2)
   })
 
   it('should reset incident on page unload', () => {