From 12e9dba0436888fc7a6e4a8854fed77e06939f93 Mon Sep 17 00:00:00 2001 From: Caleb Alldrin Date: Wed, 2 Oct 2024 22:37:01 -0700 Subject: [PATCH] Show new task action name with phase on Dashboard --- .../TasksDueThisWeek.test.tsx | 30 +++++++++---------- .../TasksDueThisWeek/TasksDueThisWeek.tsx | 29 +++++------------- 2 files changed, 23 insertions(+), 36 deletions(-) diff --git a/src/components/Dashboard/ThisWeek/TasksDueThisWeek/TasksDueThisWeek.test.tsx b/src/components/Dashboard/ThisWeek/TasksDueThisWeek/TasksDueThisWeek.test.tsx index 4108c4240..47a1f3193 100644 --- a/src/components/Dashboard/ThisWeek/TasksDueThisWeek/TasksDueThisWeek.test.tsx +++ b/src/components/Dashboard/ThisWeek/TasksDueThisWeek/TasksDueThisWeek.test.tsx @@ -4,6 +4,7 @@ import userEvent from '@testing-library/user-event'; import { GqlMockedProvider } from '__tests__/util/graphqlMocking'; import { render } from '__tests__/util/testingLibraryReactMock'; import { LoadConstantsQuery } from 'src/components/Constants/LoadConstants.generated'; +import { loadConstantsMockData } from 'src/components/Constants/LoadConstantsMock'; import { TaskModalEnum } from 'src/components/Task/Modal/TaskModal'; import { ActivityTypeEnum } from 'src/graphql/types.generated'; import useTaskModal from '../../../../hooks/useTaskModal'; @@ -78,7 +79,7 @@ describe('TasksDueThisWeek', () => { nodes: [ { id: 'task_1', - subject: 'the quick brown fox jumps over the lazy dog', + subject: '1 the quick brown fox jumps over the lazy dog', activityType: ActivityTypeEnum.PartnerCarePrayerRequest, contacts: { nodes: [{ hidden: true, name: 'Smith, Roger', id: '1' }], @@ -89,7 +90,7 @@ describe('TasksDueThisWeek', () => { }, { id: 'task_2', - subject: 'the quick brown fox jumps over the lazy dog', + subject: '2 the quick brown fox jumps over the lazy dog', activityType: ActivityTypeEnum.AppointmentInPerson, contacts: { nodes: [{ hidden: true, name: 'Smith, Sarah', id: '2' }], @@ -101,17 +102,10 @@ describe('TasksDueThisWeek', () => { ], totalCount: 1234, }; - const { getByTestId, queryByTestId, getByText } = render( + const { getByTestId, queryByTestId, getByText, findByText } = render( - mocks={{ - constant: { - activities: [ - { id: 'Prayer Request', value: 'Prayer Request' }, - { id: 'Appointment', value: 'Appointment' }, - ], - }, - }} + mocks={{ LoadConstants: loadConstantsMockData }} > @@ -132,9 +126,13 @@ describe('TasksDueThisWeek', () => { ); expect(viewAllElement.textContent).toEqual('View All (1,234)'); const task1Element = getByTestId('TasksDueThisWeekListItem-task_1'); - expect(task1Element.textContent).toEqual( - 'Smith, Roger — the quick brown fox jumps over the lazy dog', - ); + expect(getByText('Smith, Roger')).toBeInTheDocument(); + expect( + await findByText('Partner Care - Prayer Request'), + ).toBeInTheDocument(); + expect( + getByText('1 the quick brown fox jumps over the lazy dog'), + ).toBeInTheDocument(); userEvent.click(task1Element); expect(openTaskModal).toHaveBeenCalledWith({ view: TaskModalEnum.Edit, @@ -142,7 +140,9 @@ describe('TasksDueThisWeek', () => { }); expect( getByTestId('TasksDueThisWeekListItem-task_2').textContent, - ).toEqual('Smith, Sarah — the quick brown fox jumps over the lazy dog'); + ).toEqual( + 'Smith, SarahAppointment - In Person2 the quick brown fox jumps over the lazy dog', + ); }); it('multiple contacts', async () => { diff --git a/src/components/Dashboard/ThisWeek/TasksDueThisWeek/TasksDueThisWeek.tsx b/src/components/Dashboard/ThisWeek/TasksDueThisWeek/TasksDueThisWeek.tsx index 55646fce3..8a68ed87e 100644 --- a/src/components/Dashboard/ThisWeek/TasksDueThisWeek/TasksDueThisWeek.tsx +++ b/src/components/Dashboard/ThisWeek/TasksDueThisWeek/TasksDueThisWeek.tsx @@ -19,15 +19,13 @@ import { DateTime } from 'luxon'; import { useTranslation } from 'react-i18next'; import { makeStyles } from 'tss-react/mui'; import AnimatedCard from 'src/components/AnimatedCard'; -import { useLoadConstantsQuery } from 'src/components/Constants/LoadConstants.generated'; import { TaskModalEnum } from 'src/components/Task/Modal/TaskModal'; import TaskStatus from 'src/components/Task/Status'; -import { ActivityTypeEnum } from 'src/graphql/types.generated'; import { useLocale } from 'src/hooks/useLocale'; +import { usePhaseData } from 'src/hooks/usePhaseData'; import useTaskModal from 'src/hooks/useTaskModal'; import illustration8 from 'src/images/drawkit/grape/drawkit-grape-pack-illustration-8.svg'; import { numberFormat } from 'src/lib/intlFormat'; -import { getLocalizedTaskType } from 'src/utils/functions/getLocalizedTaskType'; import { GetThisWeekQuery } from '../GetThisWeek.generated'; const useStyles = makeStyles()((theme: Theme) => ({ @@ -79,20 +77,8 @@ const TasksDueThisWeek = ({ const { t } = useTranslation(); const locale = useLocale(); const { openTaskModal, preloadTaskModal } = useTaskModal(); - const { data } = useLoadConstantsQuery(); - const [activityTypes, setActivityTypes] = React.useState( - data?.constant.activities, - ); - React.useEffect(() => { - setActivityTypes(data?.constant.activities); - }, [data?.constant.activities]); - const translatedActivityType = (type: ActivityTypeEnum): string => { - return ( - activityTypes?.find(({ id }) => id === getLocalizedTaskType(t, type)) - ?.value ?? '' - ); - }; + const { activityTypes } = usePhaseData(); const handleClick = ({ id: taskId, @@ -182,17 +168,18 @@ const TasksDueThisWeek = ({ component="span" variant="body2" color="textPrimary" + marginRight="5px" > - {task.activityType - ? translatedActivityType(task.activityType) - : ''} - {' '} + {!!task.activityType && + (activityTypes.get(task.activityType)?.title || + '')} + - {task.activityType && '—'} {task.subject} + {task.subject}