fix(datatrak): RN-1314: Update autofilling entity when completing a t…

…ask (#5893)

move primary entity code to url params

packages/datatrak-web/src/constants/url.ts

@@ -36,6 +36,7 @@ export const ROUTES = {
 };
 
 export const PASSWORD_RESET_TOKEN_PARAM = 'passwordResetToken';
+export const PRIMARY_ENTITY_CODE_PARAM = 'primaryEntityCode';
 
 export const ADMIN_ONLY_ROUTES = [
   ROUTES.REPORTS,

packages/datatrak-web/src/features/Survey/Components/SurveySideMenu/SurveySideMenu.tsx

@@ -7,7 +7,7 @@ import styled from 'styled-components';
 import { To, Link as RouterLink } from 'react-router-dom';
 import { useFormContext } from 'react-hook-form';
 import { Drawer as BaseDrawer, ListItem, List, ButtonProps } from '@material-ui/core';
-import { useFromLocation, useIsMobile, usePrimaryEntityLocation } from '../../../../utils';
+import { useFromLocation, useIsMobile } from '../../../../utils';
 import { getSurveyScreenNumber } from '../../utils';
 import { useSurveyRouting } from '../../useSurveyRouting';
 import { SideMenuButton } from './SideMenuButton';
@@ -98,7 +98,6 @@ const Header = styled.div`
 
 export const SurveySideMenu = () => {
   const { getValues } = useFormContext();
-  const primaryEntityCode = usePrimaryEntityLocation();
   const from = useFromLocation();
   const isMobile = useIsMobile();
   const {
@@ -149,7 +148,6 @@ export const SurveySideMenu = () => {
                 <SurveyMenuItem
                   state={{
                     ...(from && { from }),
-                    ...(primaryEntityCode && { primaryEntityCode }),
                   }}
                   to={getScreenPath(num)}
                   $active={screenNumber === num}

packages/datatrak-web/src/features/Survey/SurveyContext/SurveyContext.tsx

@@ -5,10 +5,9 @@
 import React, { createContext, Dispatch, useContext, useReducer, useState, useMemo } from 'react';
 import { useMatch, useParams, useSearchParams } from 'react-router-dom';
 import { QuestionType } from '@tupaia/types';
-import { ROUTES } from '../../../constants';
+import { PRIMARY_ENTITY_CODE_PARAM, ROUTES } from '../../../constants';
 import { SurveyParams } from '../../../types';
 import { useSurvey } from '../../../api';
-import { usePrimaryEntityLocation } from '../../../utils';
 import { getAllSurveyComponents, getPrimaryEntityParentQuestionIds } from '../utils';
 import {
   generateCodeForCodeGeneratorQuestions,
@@ -46,7 +45,8 @@ export const SurveyFormDispatchContext = createContext<Dispatch<SurveyFormAction
 export const SurveyContext = ({ children, surveyCode, countryCode }) => {
   const [urlSearchParams] = useSearchParams();
   const [prevSurveyCode, setPrevSurveyCode] = useState<string | null>(null);
-  const primaryEntityCode = usePrimaryEntityLocation();
+  const primaryEntityCodeParam = urlSearchParams.get(PRIMARY_ENTITY_CODE_PARAM) || undefined;
+  const [primaryEntityCode] = useState(primaryEntityCodeParam);
   const [state, dispatch] = useReducer(surveyReducer, defaultContext);
   const params = useParams<SurveyParams>();
   const screenNumber = params.screenNumber ? parseInt(params.screenNumber!, 10) : null;

packages/datatrak-web/src/features/Survey/SurveyLayout.tsx

@@ -13,7 +13,7 @@ import { SpinningLoader } from '@tupaia/ui-components';
 import { ROUTES } from '../../constants';
 import { useResubmitSurveyResponse, useSubmitSurveyResponse } from '../../api/mutations';
 import { SurveyParams } from '../../types';
-import { useFromLocation, usePrimaryEntityLocation } from '../../utils';
+import { useFromLocation } from '../../utils';
 import { useSurveyForm } from './SurveyContext';
 import { SIDE_MENU_WIDTH, SurveySideMenu } from './Components';
 import { getErrorsByScreen } from './utils';
@@ -75,7 +75,6 @@ const LoadingContainer = styled.div`
 export const SurveyLayout = () => {
   const navigate = useNavigate();
   const from = useFromLocation();
-  const primaryEntityCode = usePrimaryEntityLocation();
   const params = useParams<SurveyParams>();
   const isFetchingEntities = useIsFetching({ queryKey: ['entityAncestors'] });
 
@@ -104,7 +103,6 @@ export const SurveyLayout = () => {
     navigate(path, {
       state: {
         ...(from && { from }),
-        ...(primaryEntityCode && { primaryEntityCode }),
       },
     });
   };
@@ -140,7 +138,6 @@ export const SurveyLayout = () => {
       {
         state: {
           ...(from && { from }),
-          ...(primaryEntityCode && { primaryEntityCode }),
           errors: stringifiedErrors,
         },
       },

packages/datatrak-web/src/features/Tasks/TaskTile.tsx

@@ -6,7 +6,7 @@
 import React from 'react';
 import styled from 'styled-components';
 import { generatePath, Link } from 'react-router-dom';
-import { ROUTES } from '../../constants';
+import { PRIMARY_ENTITY_CODE_PARAM, ROUTES } from '../../constants';
 import { displayDate } from '../../utils';
 import { ButtonLink } from '../../components';
 import { StatusPill } from './StatusPill';
@@ -94,7 +94,7 @@ export const TaskTile = ({ task }) => {
     countryCode: entity.countryCode,
   });
   // Link needs to include page number because if the redirect happens, the "from" state is lost
-  const surveyLink = `${path}/1`;
+  const surveyLink = `${path}/1?${PRIMARY_ENTITY_CODE_PARAM}=${entity.code}`;
   const taskLink = generatePath(ROUTES.TASK_DETAILS, {
     taskId: task.id,
   });
@@ -114,7 +114,7 @@ export const TaskTile = ({ task }) => {
         </TileContent>
       </TileLeft>
       <TileRight>
-        <ButtonLink to={surveyLink} component={Link} state={{ primaryEntityCode: entity.code }}>
+        <ButtonLink to={surveyLink} component={Link}>
           Complete task
         </ButtonLink>
       </TileRight>

packages/datatrak-web/src/features/Tasks/TasksTable/ActionButton.tsx

@@ -8,7 +8,7 @@ import { generatePath, useLocation } from 'react-router';
 import { Link } from 'react-router-dom';
 import styled from 'styled-components';
 import { Button } from '@tupaia/ui-components';
-import { ROUTES } from '../../../constants';
+import { PRIMARY_ENTITY_CODE_PARAM, ROUTES } from '../../../constants';
 import { SingleTaskResponse } from '../../../types';
 import { AssignTaskModal } from './AssignTaskModal';
 
@@ -56,7 +56,7 @@ export const ActionButton = ({ task }: ActionButtonProps) => {
     countryCode: entity.countryCode,
   });
   // Link needs to include page number because if the redirect happens, the "from" state is lost
-  const surveyLink = `${path}/1`;
+  const surveyLink = `${path}/1?${PRIMARY_ENTITY_CODE_PARAM}=${entity.code}`;
 
   return (
     <ActionButtonComponent
@@ -65,7 +65,6 @@ export const ActionButton = ({ task }: ActionButtonProps) => {
       variant="contained"
       state={{
         from: location.pathname,
-        primaryEntityCode: entity.code,
       }}
     >
       Complete task

packages/datatrak-web/src/utils/index.ts

@@ -13,4 +13,4 @@ export {
   getTaskFilterSetting,
   removeTaskFilterSetting,
 } from './taskFilterSettings';
-export { useFromLocation, usePrimaryEntityLocation } from './useLocationState';
+export { useFromLocation } from './useLocationState';

packages/datatrak-web/src/utils/useLocationState.ts

@@ -11,15 +11,11 @@ function hasProperty<T extends string>(state: unknown, property: T): state is Re
   return false;
 }
 
-function useLocationState(property: 'primaryEntityCode' | 'from'): string | undefined {
+function useLocationState(property: 'from'): string | undefined {
   const location = useLocation();
   return hasProperty(location.state, property) ? location.state[property] : undefined;
 }
 
-export function usePrimaryEntityLocation() {
-  return useLocationState('primaryEntityCode');
-}
-
 export function useFromLocation() {
   return useLocationState('from');
 }

packages/datatrak-web/src/views/Tasks/TaskDetailsPage.tsx

@@ -12,7 +12,7 @@ import { Modal, ModalCenteredContent, SpinningLoader } from '@tupaia/ui-componen
 import { Button } from '../../components';
 import { TaskDetails, TaskPageHeader, TaskActionsMenu } from '../../features';
 import { useTask } from '../../api';
-import { ROUTES } from '../../constants';
+import { PRIMARY_ENTITY_CODE_PARAM, ROUTES } from '../../constants';
 import { useFromLocation } from '../../utils';
 import { SingleTaskResponse } from '../../types';
 import { TasksContentWrapper } from '../../layout';
@@ -73,6 +73,7 @@ const ButtonComponent = ({
     surveyCode: survey?.code,
     screenNumber: '1',
   });
+  const surveyLink = `${surveyUrl}?${PRIMARY_ENTITY_CODE_PARAM}=${entity?.code}`;
 
   if (taskStatus === TaskStatus.cancelled) return null;
   if (taskStatus === TaskStatus.completed) {
@@ -89,7 +90,7 @@ const ButtonComponent = ({
     );
   }
   return (
-    <Button to={surveyUrl} state={{ from, primaryEntityCode: entity.code }}>
+    <Button to={surveyLink} state={{ from }}>
       Complete task
     </Button>
   );