Date Range error catch (#2769)

* Date Range error catch

* notes

* update checkDate

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>;

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;
   }
 

upcoming-release-notes/2769.md

+---
+category: Bugfix
+authors: [carkom]
+---
+
+Updating daterange element to catch any incorrectly formated dates. Current state crashes app when dates are invalid.