chore: [DHIS2-18737] Scroll to top when navigating in the app

src/components/AppLoader/AppLoader.component.js

@@ -1,10 +1,10 @@
 // @flow
 import React, { useCallback, useMemo, useEffect } from 'react';
 import log from 'loglevel';
-import { useHistory } from 'react-router-dom';
 import { useDataEngine, useConfig } from '@dhis2/app-runtime';
 import { LoadingMaskForPage } from 'capture-core/components/LoadingMasks';
 import { DisplayException } from 'capture-core/utils/exceptions';
+import { useNavigate } from 'capture-core/utils/routing';
 import { makeQuerySingleResource } from 'capture-core/utils/api';
 import { environments } from 'capture-core/constants';
 import { buildUrl } from 'capture-core-utils';
@@ -32,7 +32,7 @@ export const AppLoader = (props: Props) => {
     const { onRunApp, onCacheExpired } = props;
     const [loadError, setLoadError] = React.useState(null);
     const { querySingleResource, mutate, absoluteApiPath, serverVersion } = useApiUtils();
-    const history = useHistory();
+    const { navigate } = useNavigate();
 
     const logError = useCallback((error) => {
         if (error instanceof Error) {
@@ -51,7 +51,7 @@ export const AppLoader = (props: Props) => {
                 serverVersion.minor,
             );
             const store = getStore(
-                history, {
+                navigate, {
                     querySingleResource,
                     mutate,
                     absoluteApiPath,
@@ -81,7 +81,7 @@ export const AppLoader = (props: Props) => {
         querySingleResource,
         mutate,
         absoluteApiPath,
-        history,
+        navigate,
         serverVersion,
     ]);
 

src/core_modules/capture-core/actions/navigateToEnrollmentOverview/navigateToEnrollmentOverview.epics.js

@@ -6,13 +6,13 @@ import { EMPTY } from 'rxjs';
 import { actionTypes as NavigateToEnrollmentOverviewActionTypes } from './navigateToEnrollmentOverview.actions';
 import { buildUrlQueryString } from '../../utils/routing';
 
-export const navigateToEnrollmentOverviewEpic = (action$: InputObservable, store: ReduxStore, { history }: ApiUtils) =>
+export const navigateToEnrollmentOverviewEpic = (action$: InputObservable, store: ReduxStore, { navigate }: ApiUtils) =>
     action$.pipe(
         ofType(NavigateToEnrollmentOverviewActionTypes.NAVIGATE_TO_ENROLLMENT_OVERVIEW),
         switchMap((action) => {
             const { teiId, programId, orgUnitId } = action.payload;
             const enrollmentId = programId && (action.payload?.enrollmentId || 'AUTO');
-            history.push(
+            navigate(
                 `/enrollment?${buildUrlQueryString({
                     teiId,
                     programId,

src/core_modules/capture-core/components/DataEntries/SingleEventRegistrationEntry/DataEntryWrapper/DataEntry/epics/cancelNewSingleEvent.epics.js

@@ -40,12 +40,12 @@ export const cancelNewEventEpic = (action$: InputObservable, store: ReduxStore)
             return cancelNewEventNoWorkingListUpdateNeeded();
         }));
 
-export const cancelNewEventLocationChangeEpic = (action$: InputObservable, store: ReduxStore, { history }: ApiUtils) =>
+export const cancelNewEventLocationChangeEpic = (action$: InputObservable, store: ReduxStore, { navigate }: ApiUtils) =>
     action$.pipe(
         ofType(newEventDataEntryActionTypes.START_CANCEL_SAVE_RETURN_TO_MAIN_PAGE),
         map(() => {
             const { programId, orgUnitId } = getLocationQuery();
 
-            history.push(`/?${buildUrlQueryString({ programId, orgUnitId })}`);
+            navigate(`/?${buildUrlQueryString({ programId, orgUnitId })}`);
             return resetLocationChange();
         }));

src/core_modules/capture-core/components/DataEntries/SingleEventRegistrationEntry/DataEntryWrapper/DataEntry/epics/saveNewSingleEvent.epics.js

@@ -32,12 +32,12 @@ export const saveNewEventEpic = (action$: InputObservable, store: ReduxStore, {
             return startSaveNewEventAfterReturnedToMainPage(serverData, relationshipData, state.currentSelections);
         }));
 
-export const saveNewEventLocationChangeEpic = (action$: InputObservable, store: ReduxStore, { history }: ApiUtils) =>
+export const saveNewEventLocationChangeEpic = (action$: InputObservable, store: ReduxStore, { navigate }: ApiUtils) =>
     action$.pipe(
         ofType(newEventDataEntryActionTypes.REQUEST_SAVE_RETURN_TO_MAIN_PAGE),
         map(() => {
             const { programId, orgUnitId } = getLocationQuery();
 
-            history.push(`/?${buildUrlQueryString({ programId, orgUnitId })}`);
+            navigate(`/?${buildUrlQueryString({ programId, orgUnitId })}`);
             return resetLocationChange();
         }));

src/core_modules/capture-core/components/DataEntries/SingleEventRegistrationEntry/DataEntryWrapper/DataEntry/epics/saveNewSingleEventStage.epics.js

@@ -16,7 +16,7 @@ import { listId } from '../../RecentlyAddedEventsList/RecentlyAddedEventsList.co
 import { getLocationQuery, buildUrlQueryString } from '../../../../../../utils/routing';
 import { resetLocationChange } from '../../../../../ScopeSelector/QuickSelector/actions/QuickSelector.actions';
 
-export const saveNewEventStageEpic = (action$: InputObservable, store: ReduxStore, { history, serverVersion: { minor } }: ApiUtils) =>
+export const saveNewEventStageEpic = (action$: InputObservable, store: ReduxStore, { navigate, serverVersion: { minor } }: ApiUtils) =>
     action$.pipe(
         ofType(newEventDataEntryActionTypes.REQUEST_SAVE_NEW_EVENT_IN_STAGE),
         map((action) => {
@@ -32,7 +32,7 @@ export const saveNewEventStageEpic = (action$: InputObservable, store: ReduxStor
                     formFoundation,
                     formClientValues,
                     mainDataClientValues,
-                    history,
+                    navigate,
                     completed,
                     minor,
                 );
@@ -41,12 +41,12 @@ export const saveNewEventStageEpic = (action$: InputObservable, store: ReduxStor
             return startSaveNewEventAndReturnToList(serverData, relationshipData, state.currentSelections);
         }));
 
-export const saveNewEventInStageLocationChangeEpic = (action$: InputObservable, store: ReduxStore, { history }: ApiUtils) =>
+export const saveNewEventInStageLocationChangeEpic = (action$: InputObservable, store: ReduxStore, { navigate }: ApiUtils) =>
     action$.pipe(
         ofType(newEventDataEntryActionTypes.REQUEST_SAVE_NEW_EVENT_IN_STAGE),
         map(() => {
             const { enrollmentId, programId, orgUnitId, teiId } = getLocationQuery();
-            history.push(`/enrollment?${buildUrlQueryString({ programId, orgUnitId, teiId, enrollmentId })}`);
+            navigate(`/enrollment?${buildUrlQueryString({ programId, orgUnitId, teiId, enrollmentId })}`);
             return resetLocationChange();
         }));
 

src/core_modules/capture-core/components/MetadataAutoSelectInitializer/hooks/useMetadataAutoSelect.js

@@ -3,7 +3,7 @@ import { useCallback, useEffect, useState } from 'react';
 import { useHistory } from 'react-router-dom';
 import { useIndexedDBQuery } from '../../../utils/reactQueryHelpers';
 import { getUserStorageController, userStores } from '../../../storageControllers';
-import { buildUrlQueryString, useLocationQuery } from '../../../utils/routing';
+import { useNavigate, buildUrlQueryString, useLocationQuery } from '../../../utils/routing';
 import { useOrgUnitAutoSelect } from '../../../dataQueries';
 
 const getAllPrograms = () => {
@@ -17,6 +17,7 @@ const getAllPrograms = () => {
 export const useMetadataAutoSelect = () => {
     const [mounted, setMounted] = useState(false);
     const history = useHistory();
+    const { navigate } = useNavigate();
     const urlParams = useLocationQuery();
 
     const { data: programs, isLoading: loadingPrograms } = useIndexedDBQuery(
@@ -45,9 +46,9 @@ export const useMetadataAutoSelect = () => {
         }
 
         if (Object.keys(paramsToAdd).length) {
-            history.push(`?${buildUrlQueryString({ ...paramsToAdd })}`);
+            navigate(`?${buildUrlQueryString({ ...paramsToAdd })}`);
         }
-    }, [history, programs, searchOrgUnits]);
+    }, [navigate, programs, searchOrgUnits]);
 
     useEffect(() => {
         if (mounted) return;

src/core_modules/capture-core/components/Pages/Enrollment/EnrollmentPage.epics.js

@@ -77,9 +77,9 @@ const captureScopeQuery = orgUnitId => ({
     },
 });
 
-const deselectTei = (history) => {
+const deselectTei = (navigate) => {
     const { programId, orgUnitId } = getLocationQuery();
-    history.push(`/?${buildUrlQueryString({ programId, orgUnitId })}`);
+    navigate(`/?${buildUrlQueryString({ programId, orgUnitId })}`);
     return false;
 };
 
@@ -167,14 +167,14 @@ export const changedTeiIdEpic = (action$: InputObservable, store: ReduxStore) =>
         map(({ payload }) => fetchTei(payload)),
     );
 
-export const resetTeiIdEpic = (action$: InputObservable, store: ReduxStore, { history }: ApiUtils) =>
+export const resetTeiIdEpic = (action$: InputObservable, store: ReduxStore, { navigate }: ApiUtils) =>
     action$.pipe(
         ofType(enrollmentPageActionTypes.RESET_TEI_ID),
         filter(() =>
             (({ fetchStatus }) =>
                 fetchStatus.enrollmentId !== selectionStatus.LOADING &&
                 fetchStatus.teiId !== selectionStatus.LOADING &&
-                deselectTei(history)
+                deselectTei(navigate)
             )(store.value.enrollmentPage)),
     );
 
@@ -236,7 +236,7 @@ export const programIdErrorEpic = (action$: InputObservable) =>
     );
 
 // Epics for enrollments
-export const teiOrProgramChangeEpic = (action$: InputObservable, store: ReduxStore, { history }: ApiUtils) =>
+export const teiOrProgramChangeEpic = (action$: InputObservable, store: ReduxStore, { navigate }: ApiUtils) =>
     action$.pipe(
         ofType(
             enrollmentPageActionTypes.FETCH_TEI_SUCCESS,
@@ -246,7 +246,7 @@ export const teiOrProgramChangeEpic = (action$: InputObservable, store: ReduxSto
         map(() => {
             // Update url
             const { teiId, programId } = store.value.enrollmentPage;
-            history.push(`/enrollment?${buildUrlQueryString({ ...getLocationQuery(), teiId, programId })}`);
+            navigate(`/enrollment?${buildUrlQueryString({ ...getLocationQuery(), teiId, programId })}`);
 
             if (teiIdReady(store) && programIdReady(store)) {
                 return fetchEnrollments();
@@ -303,7 +303,7 @@ export const verifyFetchedEnrollmentsEpic = (action$: InputObservable, store: Re
     );
 
 // Auto-switch orgUnit epic
-export const autoSwitchOrgUnitEpic = (action$: InputObservable, store: ReduxStore, { querySingleResource, history }: ApiUtils) =>
+export const autoSwitchOrgUnitEpic = (action$: InputObservable, store: ReduxStore, { querySingleResource, navigate }: ApiUtils) =>
     action$.pipe(
         ofType(enrollmentPageActionTypes.FETCH_ENROLLMENTS),
         map(() => (({ teiId, programId }) => ({ teiId, programId }))(store.value.enrollmentPage)),
@@ -317,7 +317,7 @@ export const autoSwitchOrgUnitEpic = (action$: InputObservable, store: ReduxStor
                             if (organisationUnits.length > 0 && store.value.enrollmentPage.pageOpen) {
                                 // Update orgUnitId in url
                                 const { orgUnitId, ...restOfQueries } = getLocationQuery();
-                                history.push(`/enrollment?${buildUrlQueryString({ ...restOfQueries, orgUnitId: programOwner.orgUnit })}`);
+                                navigate(`/enrollment?${buildUrlQueryString({ ...restOfQueries, orgUnitId: programOwner.orgUnit })}`);
                             }
                             return EMPTY;
                         }),

src/core_modules/capture-core/components/Pages/Enrollment/EnrollmentPageDefault/EnrollmentPageDefault.container.js

@@ -5,7 +5,6 @@ import moment from 'moment';
 import log from 'loglevel';
 import { errorCreator } from 'capture-core-utils';
 import { useDispatch, useSelector } from 'react-redux';
-import { useHistory } from 'react-router-dom';
 import { useTimeZoneConversion } from '@dhis2/app-runtime';
 import {
     commitEnrollmentAndEvents,
@@ -27,7 +26,7 @@ import { useTrackerProgram } from '../../../../hooks/useTrackerProgram';
 import { useCoreOrgUnit } from '../../../../metadataRetrieval/coreOrgUnit';
 import { DataStoreKeyByPage, EnrollmentPageLayout } from '../../common/EnrollmentOverviewDomain/EnrollmentPageLayout';
 import { useHideWidgetByRuleLocations, useProgramMetadata, useProgramStages } from './hooks';
-import { buildUrlQueryString, useLocationQuery } from '../../../../utils/routing';
+import { useNavigate, buildUrlQueryString, useLocationQuery } from '../../../../utils/routing';
 import { useFilteredWidgetData } from './hooks/useFilteredWidgetData';
 import { useLinkedRecordClick } from '../../common/TEIRelationshipsWidget';
 import {
@@ -46,7 +45,7 @@ import {
 
 
 export const EnrollmentPageDefault = () => {
-    const history = useHistory();
+    const { navigate } = useNavigate();
     const dispatch = useDispatch();
     const { fromClientDate } = useTimeZoneConversion();
     const { status: widgetEnrollmentStatus } = useSelector(({ widgetEnrollment }) => widgetEnrollment);
@@ -97,27 +96,27 @@ export const EnrollmentPageDefault = () => {
     const hideWidgets = useHideWidgetByRuleLocations(program.programRules);
 
     const onDeleteTrackedEntitySuccess = useCallback(() => {
-        history.push(`/?${buildUrlQueryString({ orgUnitId, programId })}`);
-    }, [history, orgUnitId, programId]);
+        navigate(`/?${buildUrlQueryString({ orgUnitId, programId })}`);
+    }, [navigate, orgUnitId, programId]);
 
     const onDelete = () => {
-        history.push(`/enrollment?${buildUrlQueryString({ orgUnitId, programId, teiId })}`);
+        navigate(`/enrollment?${buildUrlQueryString({ orgUnitId, programId, teiId })}`);
         dispatch(deleteEnrollment({ enrollmentId }));
     };
 
     const onViewAll = (stageId) => {
-        history.push(
+        navigate(
             `/enrollment/stageEvents?${buildUrlQueryString({ orgUnitId, programId, stageId })}`);
     };
 
     const onCreateNew = (stageId) => {
-        history.push(
+        navigate(
             `/enrollmentEventNew?${buildUrlQueryString({ orgUnitId, programId, teiId, enrollmentId, stageId })}`,
         );
     };
 
     const onEventClick = (eventId: string) => {
-        history.push(`/enrollmentEventEdit?${buildUrlQueryString({ orgUnitId, eventId })}`);
+        navigate(`/enrollmentEventEdit?${buildUrlQueryString({ orgUnitId, eventId })}`);
     };
 
     const onUpdateTeiAttributeValues = useCallback((updatedAttributeValues, teiDisplayName) => {
@@ -153,11 +152,11 @@ export const EnrollmentPageDefault = () => {
     }, [dispatch, fromClientDate]);
 
     const onAddNew = () => {
-        history.push(`/new?${buildUrlQueryString({ orgUnitId, programId, teiId })}`);
+        navigate(`/new?${buildUrlQueryString({ orgUnitId, programId, teiId })}`);
     };
 
     const onAccessLostFromTransfer = () => {
-        history.push(`/?${buildUrlQueryString({ orgUnitId, programId })}`);
+        navigate(`/?${buildUrlQueryString({ orgUnitId, programId })}`);
     };
 
     const onEnrollmentError = message => dispatch(showEnrollmentError({ message }));
@@ -177,8 +176,8 @@ export const EnrollmentPageDefault = () => {
     }, [dispatch]);
 
     const onBackToMainPage = useCallback(() => {
-        history.push(`/?${buildUrlQueryString({ orgUnitId, programId })}`);
-    }, [history, orgUnitId, programId]);
+        navigate(`/?${buildUrlQueryString({ orgUnitId, programId })}`);
+    }, [navigate, orgUnitId, programId]);
 
     if (isLoading) {
         return (

src/core_modules/capture-core/components/Pages/Enrollment/EnrollmentPageDefault/EnrollmentQuickActions/EnrollmentQuickActions.component.js

@@ -2,13 +2,12 @@
 import React, { useState, useMemo } from 'react';
 // $FlowFixMe
 import i18n from '@dhis2/d2-i18n';
-import { useHistory } from 'react-router-dom';
 import { colors, spacers, IconAdd24, IconCalendar24 } from '@dhis2/ui';
 import { withStyles } from '@material-ui/core';
 import { Widget } from '../../../../Widget';
 import { QuickActionButton } from './QuickActionButton/QuickActionButton';
 import { tabMode } from '../../../EnrollmentAddEvent/NewEventWorkspace/newEventWorkspace.constants';
-import { buildUrlQueryString, useLocationQuery } from '../../../../../utils/routing';
+import { useNavigate, buildUrlQueryString, useLocationQuery } from '../../../../../utils/routing';
 
 const styles = {
     contentContainer: {
@@ -21,7 +20,7 @@ const styles = {
 
 const EnrollmentQuickActionsComponent = ({ stages, events, ruleEffects, classes }) => {
     const [open, setOpen] = useState(true);
-    const history = useHistory();
+    const { navigate } = useNavigate();
     const { enrollmentId, programId, teiId, orgUnitId } = useLocationQuery();
 
     const stagesWithEventCount = useMemo(() => stages.map((stage) => {
@@ -50,7 +49,7 @@ const EnrollmentQuickActionsComponent = ({ stages, events, ruleEffects, classes
     );
 
     const onNavigationFromQuickActions = (tab: string) => {
-        history.push(`/enrollmentEventNew?${buildUrlQueryString({ programId, teiId, enrollmentId, orgUnitId, tab })}`);
+        navigate(`/enrollmentEventNew?${buildUrlQueryString({ programId, teiId, enrollmentId, orgUnitId, tab })}`);
     };
 
     const ready = events !== undefined && stages !== undefined;

src/core_modules/capture-core/components/Pages/Enrollment/MissingMessage.component.js

@@ -1,14 +1,13 @@
 // @flow
 import React, { useEffect, useState } from 'react';
 import i18n from '@dhis2/d2-i18n';
-import { useHistory } from 'react-router-dom';
 import { useDispatch, useSelector } from 'react-redux';
 import { withStyles } from '@material-ui/core/styles';
 import { useScopeInfo } from '../../../hooks/useScopeInfo';
 import { useMissingCategoriesInProgramSelection } from '../../../hooks/useMissingCategoriesInProgramSelection';
 import { scopeTypes } from '../../../metaData/helpers/constants';
 import { enrollmentAccessLevels } from './EnrollmentPage.constants';
-import { buildUrlQueryString, useLocationQuery } from '../../../utils/routing';
+import { useNavigate, buildUrlQueryString, useLocationQuery } from '../../../utils/routing';
 import { IncompleteSelectionsMessage } from '../../IncompleteSelectionsMessage';
 import { WidgetBreakingTheGlass } from '../../WidgetBreakingTheGlass';
 import { LinkButton } from '../../Buttons/LinkButton.component';
@@ -85,18 +84,18 @@ const useMissingStatus = () => {
 };
 
 const useNavigations = () => {
-    const history = useHistory();
+    const { navigate } = useNavigate();
     const { tetId } = useSelector(({ enrollmentPage }) => enrollmentPage);
 
     const { programId, orgUnitId, teiId } = useLocationQuery();
     const navigateToTrackerProgramRegistrationPage = () =>
-        history.push(`/new?${buildUrlQueryString({ programId, orgUnitId, teiId })}`);
+        navigate(`/new?${buildUrlQueryString({ programId, orgUnitId, teiId })}`);
     const navigateToEventProgramRegistrationPage = () =>
-        history.push(`/new?${buildUrlQueryString({ programId, orgUnitId })}`);
+        navigate(`/new?${buildUrlQueryString({ programId, orgUnitId })}`);
     const navigateToEventWorkingList = () =>
-        history.push(`/?${buildUrlQueryString({ programId, orgUnitId })}`);
+        navigate(`/?${buildUrlQueryString({ programId, orgUnitId })}`);
     const navigateToTetRegistrationPage = () =>
-        history.push(`/new?${buildUrlQueryString({ programId, orgUnitId, trackedEntityTypeId: tetId })}`);
+        navigate(`/new?${buildUrlQueryString({ programId, orgUnitId, trackedEntityTypeId: tetId })}`);
 
     return {
         navigateToTrackerProgramRegistrationPage,