Merge pull request #32073 from paultsimura/fix/31793-calendar

fix: Simplify the logic for available dates calculation
Expensify · Nov 28, 2023 · 0856cda · 0856cda
2 parents a38e612 + a47b27c
commit 0856cda
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 5 deletions.
diff --git a/src/components/NewDatePicker/CalendarPicker/index.js b/src/components/NewDatePicker/CalendarPicker/index.js
@@ -1,4 +1,4 @@
-import {addMonths, endOfMonth, format, getYear, isSameDay, parseISO, setDate, setYear, startOfDay, subMonths} from 'date-fns';
+import {addMonths, endOfDay, endOfMonth, format, getYear, isSameDay, parseISO, setDate, setYear, startOfDay, startOfMonth, subMonths} from 'date-fns';
 import Str from 'expensify-common/lib/str';
 import PropTypes from 'prop-types';
 import React from 'react';
@@ -127,8 +127,8 @@ class CalendarPicker extends React.PureComponent {
         const currentMonthView = this.state.currentDateView.getMonth();
         const currentYearView = this.state.currentDateView.getFullYear();
         const calendarDaysMatrix = generateMonthMatrix(currentYearView, currentMonthView);
-        const hasAvailableDatesNextMonth = startOfDay(endOfMonth(new Date(this.props.maxDate))) > addMonths(new Date(this.state.currentDateView), 1);
-        const hasAvailableDatesPrevMonth = startOfDay(new Date(this.props.minDate)) < endOfMonth(subMonths(new Date(this.state.currentDateView), 1));
+        const hasAvailableDatesNextMonth = startOfDay(new Date(this.props.maxDate)) > endOfMonth(new Date(this.state.currentDateView));
+        const hasAvailableDatesPrevMonth = endOfDay(new Date(this.props.minDate)) < startOfMonth(new Date(this.state.currentDateView));
 
         return (
             <View>
@@ -219,7 +219,7 @@ class CalendarPicker extends React.PureComponent {
                             const isBeforeMinDate = currentDate < startOfDay(new Date(this.props.minDate));
                             const isAfterMaxDate = currentDate > startOfDay(new Date(this.props.maxDate));
                             const isDisabled = !day || isBeforeMinDate || isAfterMaxDate;
-                            const isSelected = isSameDay(parseISO(this.props.value), new Date(currentYearView, currentMonthView, day));
+                            const isSelected = !!day && isSameDay(parseISO(this.props.value), new Date(currentYearView, currentMonthView, day));
                             return (
                                 <PressableWithoutFeedback
                                     key={`${index}_day-${day}`}

diff --git a/tests/unit/CalendarPickerTest.js b/tests/unit/CalendarPickerTest.js
@@ -143,6 +143,19 @@ describe('CalendarPicker', () => {
         expect(getByTestId('next-month-arrow')).toBeDisabled();
     });
 
+    test('should allow navigating to the month of the max date when it has less days than the selected date', () => {
+        const maxDate = new Date('2003-11-27'); // This month has 30 days
+        const value = '2003-10-31';
+        const {getByTestId} = render(
+            <CalendarPicker
+                maxDate={maxDate}
+                value={value}
+            />,
+        );
+
+        expect(getByTestId('next-month-arrow')).not.toBeDisabled();
+    });
+
     test('should open the calendar on a month from max date if it is earlier than current month', () => {
         const onSelectedMock = jest.fn();
         const maxDate = new Date('2011-03-01');
@@ -217,7 +230,7 @@ describe('CalendarPicker', () => {
         expect(getByLabelText('16')).not.toBeDisabled();
     });
 
-    test('should not allow to press max date', () => {
+    test('should allow to press max date', () => {
         const value = '2003-02-17';
         const maxDate = new Date('2003-02-24');
         const {getByLabelText} = render(