Skip to content

Commit

Permalink
MPDX-8365 Coaching-dates (#1122)
Browse files Browse the repository at this point in the history
* Fix coaching date formatting

* Start Current Reality Activity on Sunday
  • Loading branch information
caleballdrin authored Oct 9, 2024
1 parent b8a8d5a commit 4f6dc60
Show file tree
Hide file tree
Showing 3 changed files with 34 additions and 26 deletions.
28 changes: 11 additions & 17 deletions src/components/Coaching/CoachingDetail/Activity/Activity.test.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -122,13 +122,10 @@ describe('Activity', () => {
it('is a week long when in weekly mode', async () => {
const { getByTestId } = render(<TestComponent />);

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',
}),
);
});
Expand All @@ -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',
}),
);
});
Expand All @@ -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',
);
});

Expand All @@ -165,7 +159,7 @@ describe('Activity', () => {

userEvent.click(getByRole('button', { name: 'Previous' }));
rerender(<TestComponent />);
expect(getByTestId('ActivityPeriod')).toHaveTextContent('Jan 6 - Jan 12');
expect(getByTestId('ActivityPeriod')).toHaveTextContent('Jan 5 - Jan 11');
});
});

Expand All @@ -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',
},
}),
);
Expand All @@ -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',
},
}),
);
Expand Down Expand Up @@ -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');
});
});

Expand Down
27 changes: 19 additions & 8 deletions src/components/Coaching/CoachingDetail/Activity/Activity.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down Expand Up @@ -194,21 +194,32 @@ export const Activity: React.FC<ActivityProps> = ({
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()}`,
},
});

Expand Down
5 changes: 4 additions & 1 deletion src/components/Coaching/CoachingDetail/helpers.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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)
Expand Down

0 comments on commit 4f6dc60

Please sign in to comment.