diff --git a/packages/desktop-client/src/components/reports/DateRange.tsx b/packages/desktop-client/src/components/reports/DateRange.tsx index 878cd6398e4aace672929a6f1d31c57cdc5d4c56..e2ac6d03ccd7f85642c8e22587ee66fe89d9d8fe 100644 --- a/packages/desktop-client/src/components/reports/DateRange.tsx +++ b/packages/desktop-client/src/components/reports/DateRange.tsx @@ -3,35 +3,56 @@ import React, { type ReactElement } from 'react'; import * as d from 'date-fns'; import { theme } from '../../style'; +import { styles } from '../../style/styles'; import { Block } from '../common/Block'; +import { Text } from '../common/Text'; type DateRangeProps = { start: string; end: string; }; -export function DateRange({ - start: startProp, - end: endProp, -}: DateRangeProps): ReactElement { - const start = d.parseISO(startProp); - const end = d.parseISO(endProp); +function checkDate(date: string) { + const dateParsed = new Date(date); + if (dateParsed.toString() !== 'Invalid Date') { + return d.format(dateParsed, 'yyyy-MM-dd'); + } else { + return null; + } +} + +export function DateRange({ start, end }: DateRangeProps): ReactElement { + const checkStart = checkDate(start); + const checkEnd = checkDate(end); + + let startDate; + let endDate; + if (checkStart && checkEnd) { + startDate = d.parseISO(checkStart); + endDate = d.parseISO(checkEnd); + } else { + return ( + <Text style={{ ...styles.mediumText, color: theme.errorText }}> + There was a problem loading your date range + </Text> + ); + } let content: string | ReactElement; - if (start.getFullYear() !== end.getFullYear()) { + if (startDate.getFullYear() !== endDate.getFullYear()) { content = ( <div> - {d.format(start, 'MMM yyyy')} - {d.format(end, 'MMM yyyy')} + {d.format(startDate, 'MMM yyyy')} - {d.format(endDate, 'MMM yyyy')} </div> ); - } else if (start.getMonth() !== end.getMonth()) { + } else if (startDate.getMonth() !== endDate.getMonth()) { content = ( <div> - {d.format(start, 'MMM')} - {d.format(end, 'MMM yyyy')} + {d.format(startDate, 'MMM yyyy')} - {d.format(endDate, 'MMM yyyy')} </div> ); } else { - content = d.format(end, 'MMMM yyyy'); + content = d.format(endDate, 'MMMM yyyy'); } return <Block style={{ color: theme.pageTextSubdued }}>{content}</Block>; diff --git a/packages/desktop-client/src/components/reports/reportRanges.ts b/packages/desktop-client/src/components/reports/reportRanges.ts index 720954f597e780455d8b908871b1fc5ebdab1e11..97183d6d91530ebbe3d75e57ed47d0ff7887aa6d 100644 --- a/packages/desktop-client/src/components/reports/reportRanges.ts +++ b/packages/desktop-client/src/components/reports/reportRanges.ts @@ -108,13 +108,13 @@ function boundedRange( latest = monthUtils.currentWeek(firstDayOfWeekIdx); break; case 'Monthly': - latest = monthUtils.currentMonth() + '-31'; + latest = monthUtils.getMonthEnd(monthUtils.currentDay()); break; case 'Yearly': latest = monthUtils.currentDay(); break; default: - latest = monthUtils.currentMonth(); + latest = monthUtils.currentDay(); break; } diff --git a/upcoming-release-notes/2769.md b/upcoming-release-notes/2769.md new file mode 100644 index 0000000000000000000000000000000000000000..e69c1e45b440ef693e6c0c16a813049ac3e51cf7 --- /dev/null +++ b/upcoming-release-notes/2769.md @@ -0,0 +1,6 @@ +--- +category: Bugfix +authors: [carkom] +--- + +Updating daterange element to catch any incorrectly formated dates. Current state crashes app when dates are invalid.