From 4f6dc604f8d181192e69fda807e6d3296c164616 Mon Sep 17 00:00:00 2001 From: Caleb Alldrin Date: Wed, 9 Oct 2024 12:22:02 -0700 Subject: [PATCH] MPDX-8365 Coaching-dates (#1122) * Fix coaching date formatting * Start Current Reality Activity on Sunday --- .../CoachingDetail/Activity/Activity.test.tsx | 28 ++++++++----------- .../CoachingDetail/Activity/Activity.tsx | 27 ++++++++++++------ .../Coaching/CoachingDetail/helpers.ts | 5 +++- 3 files changed, 34 insertions(+), 26 deletions(-) diff --git a/src/components/Coaching/CoachingDetail/Activity/Activity.test.tsx b/src/components/Coaching/CoachingDetail/Activity/Activity.test.tsx index f8ae52562..702b56bce 100644 --- a/src/components/Coaching/CoachingDetail/Activity/Activity.test.tsx +++ b/src/components/Coaching/CoachingDetail/Activity/Activity.test.tsx @@ -122,13 +122,10 @@ describe('Activity', () => { it('is a week long when in weekly mode', async () => { const { getByTestId } = render(); - expect(getByTestId('ActivityPeriod')).toHaveTextContent('Jan 6 - Jan 12'); + expect(getByTestId('ActivityPeriod')).toHaveTextContent('Jan 5 - Jan 11'); await waitFor(() => - expect(mutationSpy.mock.calls[0][0].operation).toMatchObject({ - operationName: 'CoachingDetailActivity', - variables: { - dateRange: '2020-01-06..2020-01-12', - }, + expect(mutationSpy).toHaveGraphqlOperation('CoachingDetailActivity', { + dateRange: '2020-01-05..2020-01-11', }), ); }); @@ -140,11 +137,8 @@ describe('Activity', () => { expect(getByTestId('ActivityPeriod')).toHaveTextContent('Jan 1 - Jan 31'); await waitFor(() => - expect(mutationSpy.mock.calls[0][0].operation).toMatchObject({ - operationName: 'CoachingDetailActivity', - variables: { - dateRange: '2020-01-01..2020-01-31', - }, + expect(mutationSpy).toHaveGraphqlOperation('CoachingDetailActivity', { + dateRange: '2020-01-01..2020-01-31', }), ); }); @@ -154,7 +148,7 @@ describe('Activity', () => { userEvent.click(getByRole('button', { name: 'Previous' })); expect(getByTestId('ActivityPeriod')).toHaveTextContent( - 'Dec 30, 2019 - Jan 5, 2020', + 'Dec 29, 2019 - Jan 4, 2020', ); }); @@ -165,7 +159,7 @@ describe('Activity', () => { userEvent.click(getByRole('button', { name: 'Previous' })); rerender(); - expect(getByTestId('ActivityPeriod')).toHaveTextContent('Jan 6 - Jan 12'); + expect(getByTestId('ActivityPeriod')).toHaveTextContent('Jan 5 - Jan 11'); }); }); @@ -181,7 +175,7 @@ describe('Activity', () => { expect(mutationSpy.mock.calls[1][0].operation).toMatchObject({ operationName: 'CoachingDetailActivity', variables: { - dateRange: '2019-12-30..2020-01-05', + dateRange: '2019-12-29..2020-01-04', }, }), ); @@ -191,7 +185,7 @@ describe('Activity', () => { expect(mutationSpy.mock.calls[2][0].operation).toMatchObject({ operationName: 'CoachingDetailActivity', variables: { - dateRange: '2020-01-06..2020-01-12', + dateRange: '2020-01-05..2020-01-11', }, }), ); @@ -237,11 +231,11 @@ describe('Activity', () => { userEvent.click(previous); expect(next).not.toBeDisabled(); - expect(period).toHaveTextContent('Dec 30, 2019 - Jan 5, 2020'); + expect(period).toHaveTextContent('Dec 29, 2019 - Jan 4, 2020'); userEvent.click(next); expect(next).toBeDisabled(); - expect(period).toHaveTextContent('Jan 6 - Jan 12'); + expect(period).toHaveTextContent('Jan 5 - Jan 11'); }); }); diff --git a/src/components/Coaching/CoachingDetail/Activity/Activity.tsx b/src/components/Coaching/CoachingDetail/Activity/Activity.tsx index b84f05431..97f5f18b9 100644 --- a/src/components/Coaching/CoachingDetail/Activity/Activity.tsx +++ b/src/components/Coaching/CoachingDetail/Activity/Activity.tsx @@ -14,7 +14,7 @@ import { Typography, } from '@mui/material'; import { styled } from '@mui/material/styles'; -import { DateTime, DateTimeUnit } from 'luxon'; +import { DateTime } from 'luxon'; import { useTranslation } from 'react-i18next'; import AnimatedCard from 'src/components/AnimatedCard'; import { @@ -194,21 +194,32 @@ export const Activity: React.FC = ({ const { t } = useTranslation(); const locale = useLocale(); - const periodUnit: DateTimeUnit = - period === CoachingPeriodEnum.Weekly ? 'week' : 'month'; const periodDuration = period === CoachingPeriodEnum.Weekly ? { weeks: 1 } : { months: 1 }; - const [start, setStart] = useState(DateTime.now().startOf(periodUnit)); - const end = useMemo(() => start.endOf(periodUnit), [start, periodUnit]); + const startDate = useMemo((): DateTime => { + // The default startOf('week') is Monday. Subtract 1 day to start the week on Sunday. + if (period === CoachingPeriodEnum.Weekly) { + return DateTime.now().startOf('week').minus({ day: 1 }); + } + return DateTime.now().startOf('month'); + }, [period]); + const [start, setStart] = useState(startDate); + const end = useMemo( + () => + period === CoachingPeriodEnum.Weekly + ? start.plus({ days: 6 }).endOf('day') + : start.endOf('month'), + [start, period], + ); useEffect(() => { - setStart(DateTime.now().startOf(periodUnit)); - }, [periodUnit]); + setStart(startDate); + }, [startDate]); const { data, loading } = useCoachingDetailActivityQuery({ variables: { accountListId, - dateRange: `${start.toISODate()}..${start.endOf(periodUnit).toISODate()}`, + dateRange: `${start.toISODate()}..${end.toISODate()}`, }, }); diff --git a/src/components/Coaching/CoachingDetail/helpers.ts b/src/components/Coaching/CoachingDetail/helpers.ts index 6dd6b53e1..6b14bd790 100644 --- a/src/components/Coaching/CoachingDetail/helpers.ts +++ b/src/components/Coaching/CoachingDetail/helpers.ts @@ -42,7 +42,10 @@ export const getMonthOrWeekDateRange = ( ? new Intl.DateTimeFormat(locale, { month: 'short', day: 'numeric', - }).formatRange(Date.parse(startDate), Date.parse(endDate)) + }).formatRange( + DateTime.fromISO(startDate).toJSDate(), + DateTime.fromISO(endDate).toJSDate(), + ) : startDate ? dateFormatMonthOnly(DateTime.fromISO(startDate), locale) : null)