EDSC-4125 recurring slider bug fixes (#1852)

Author: daniel-zamora

static/src/js/components/GranuleFilters/GranuleFiltersForm.jsx

@@ -451,8 +451,10 @@ export const GranuleFiltersForm = (props) => {
                 validate={false}
                 onSliderChange={
                   (value) => {
-                    setFieldValue('temporal.startDate', moment(temporal.startDate).year(value.min).toISOString())
-                    setFieldValue('temporal.endDate', moment(temporal.endDate).year(value.max).toISOString())
+                    const startDate = temporal.startDate ? moment(temporal.startDate) : moment()
+                    const endDate = temporal.endDate ? moment(temporal.endDate) : moment()
+                    setFieldValue('temporal.startDate', startDate.year(value.min).toISOString())
+                    setFieldValue('temporal.endDate', endDate.year(value.max).toISOString())
                   }
                 }
                 onRecurringToggle={
@@ -552,7 +554,6 @@ export const GranuleFiltersForm = (props) => {
                       }
                     }
 
-                    // Only call handleSubmit if `onSubmitStart` was called
                     if (shouldSubmit && (startDate.isValid() || !input)) {
                       handleSubmit()
 
@@ -909,12 +910,6 @@ export const GranuleFiltersForm = (props) => {
                             temporal={equatorCrossingDate}
                             displayStartDate={equatorCrossingDate.startDate}
                             displayEndDate={equatorCrossingDate.endDate}
-                            onSliderChange={
-                              (value) => {
-                                setFieldValue('temporal.startDate', moment(temporal.startDate).year(value.min).toISOString())
-                                setFieldValue('temporal.endDate', moment(temporal.endDate).year(value.max).toISOString())
-                              }
-                            }
                             validate={false}
                             onSubmitStart={
                               (startDate, shouldSubmit) => {

static/src/js/components/GranuleFilters/__tests__/GranuleFiltersForm.test.jsx

@@ -489,7 +489,7 @@ describe('GranuleFiltersForm component', () => {
           expect(setFieldTouched).toHaveBeenCalledTimes(1)
           expect(setFieldTouched).toHaveBeenCalledWith('temporal.isRecurring', true)
 
-          expect(setFieldValue).toHaveBeenCalledTimes(3)
+          expect(setFieldValue).toHaveBeenCalledTimes(4)
           expect(setFieldValue).toHaveBeenCalledWith('temporal.isRecurring', true)
           expect(setFieldValue).toHaveBeenCalledWith('temporal.recurringDayStart', 225)
           expect(setFieldValue).toHaveBeenCalledWith('temporal.recurringDayEnd', 226)
@@ -1649,7 +1649,7 @@ describe('GranuleFiltersForm component', () => {
   })
 
   describe('End date submission behavior', () => {
-    test.only('when submitting end date in same year as start date with recurring enabled, adjusts start date to minimum year', async () => {
+    test('when submitting end date in same year as start date with recurring enabled, adjusts start date to minimum year', async () => {
       MockDate.set('2024-12-15')
 
       const {

static/src/js/components/TemporalDisplay/TemporalSelectionDropdown.jsx

@@ -352,8 +352,8 @@ const TemporalSelectionDropdown = ({
                 const { min, max } = value
                 setTemporal({
                   ...temporal,
-                  startDate: moment(temporal.startDate).year(min).toISOString(),
-                  endDate: moment(temporal.endDate).year(max).toISOString()
+                  startDate: moment(temporal.startDate).utc().year(min).toISOString(),
+                  endDate: moment(temporal.endDate).utc().year(max).toISOString()
                 })
               }
             }

static/src/js/components/TemporalSelection/TemporalSelection.jsx

@@ -134,6 +134,8 @@ export class TemporalSelection extends Component {
     const minimumTemporalDate = moment(minimumTemporalDateString, temporalDateFormatFull)
 
     let sliderStartDate = moment(temporal.startDate).utc()
+    const sliderEndDate = moment(temporal.endDate || undefined).utc()
+
     if (!sliderStartDate.isValid()) {
       sliderStartDate = moment()
       sliderStartDate.set({
@@ -253,7 +255,7 @@ export class TemporalSelection extends Component {
               <span className="temporal-selection__range-label">
                 {sliderStartDate.year()}
                 {' - '}
-                {moment(temporal.endDate || undefined).year()}
+                {sliderEndDate.year()}
               </span>
 
               <InputRange
@@ -263,7 +265,7 @@ export class TemporalSelection extends Component {
                 value={
                   {
                     min: sliderStartDate.year(),
-                    max: moment(temporal.endDate || undefined).year()
+                    max: sliderEndDate.year()
                   }
                 }
                 onChange={onSliderChange}