From 04273d80646228429a1d72d41a00443a051b0584 Mon Sep 17 00:00:00 2001
From: Neil <55785687+carkom@users.noreply.github.com>
Date: Mon, 20 May 2024 21:27:24 +0100
Subject: [PATCH] Date Range error catch (#2769)
* Date Range error catch
* notes
* update checkDate
---
.../src/components/reports/DateRange.tsx | 43 ++++++++++++++-----
.../src/components/reports/reportRanges.ts | 4 +-
upcoming-release-notes/2769.md | 6 +++
3 files changed, 40 insertions(+), 13 deletions(-)
create mode 100644 upcoming-release-notes/2769.md
diff --git a/packages/desktop-client/src/components/reports/DateRange.tsx b/packages/desktop-client/src/components/reports/DateRange.tsx
index 878cd6398..e2ac6d03c 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 720954f59..97183d6d9 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 000000000..e69c1e45b
--- /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.
--
GitLab