fix(react-components): pagination can move forward on first click fro…

…m relative range
awslabs · Nov 21, 2023 · fcb04f7 · fcb04f7
1 parent 9e9db52
commit fcb04f7
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 19 deletions.
diff --git a/packages/react-components/src/components/time-sync/timeSelection.tsx b/packages/react-components/src/components/time-sync/timeSelection.tsx
@@ -11,7 +11,7 @@ import {
   dateRangeToViewport,
   relativeOptions,
   viewportToDateRange,
-  getViewportStartOnBackwardRelative,
+  getViewportDateRelativeToAbsolute,
 } from './viewportAdapter';
 
 import { rangeValidator } from './rangeValidator';
@@ -87,6 +87,14 @@ export const TimeSelection = ({
         'date-picker'
       );
     }
+    if (value.type === 'relative') {
+      const newStart = new Date();
+      const newEnd = getViewportDateRelativeToAbsolute(value, true);
+      setViewport(
+        dateRangeToViewport({ startDate: newStart.toISOString(), endDate: newEnd.toISOString(), type: 'absolute' }),
+        'date-picker'
+      );
+    }
   };
 
   const handlePaginateBackward = () => {
@@ -101,7 +109,7 @@ export const TimeSelection = ({
       );
     } else if (value.type === 'relative') {
       const newEnd = new Date();
-      const newStart = getViewportStartOnBackwardRelative(value);
+      const newStart = getViewportDateRelativeToAbsolute(value);
       setViewport(
         dateRangeToViewport({ startDate: newStart.toISOString(), endDate: newEnd.toISOString(), type: 'absolute' }),
         'date-picker'

diff --git a/packages/react-components/src/components/time-sync/viewportAdapter.spec.ts b/packages/react-components/src/components/time-sync/viewportAdapter.spec.ts
@@ -2,7 +2,7 @@ import {
   dateRangeToViewport,
   viewportToDateRange,
   relativeOptions,
-  getViewportStartOnBackwardRelative,
+  getViewportDateRelativeToAbsolute,
 } from './viewportAdapter';
 
 describe('dateRangeToViewport', () => {
@@ -146,7 +146,7 @@ describe('viewportToDateRange', () => {
 describe('getViewportStartOnBackwardRelative', () => {
   it('can get the new start date when going back from a relative duration', () => {
     let currentDate = new Date();
-    let newDate = getViewportStartOnBackwardRelative({
+    let newDate = getViewportDateRelativeToAbsolute({
       amount: 5,
       unit: 'minute',
       type: 'relative',
@@ -157,7 +157,7 @@ describe('getViewportStartOnBackwardRelative', () => {
     expect(result).toBeLessThanOrEqual(300000);
 
     currentDate = new Date();
-    newDate = getViewportStartOnBackwardRelative({
+    newDate = getViewportDateRelativeToAbsolute({
       amount: 1,
       unit: 'hour',
       type: 'relative',
@@ -166,31 +166,31 @@ describe('getViewportStartOnBackwardRelative', () => {
     expect(currentDate.getTime() - newDate.getTime()).toEqual(3600000);
 
     currentDate = new Date();
-    newDate = getViewportStartOnBackwardRelative({
+    newDate = getViewportDateRelativeToAbsolute({
       amount: 30,
       unit: 'second',
       type: 'relative',
     });
     expect(currentDate.getTime() - newDate.getTime()).toEqual(30000);
 
     currentDate = new Date();
-    newDate = getViewportStartOnBackwardRelative({
+    newDate = getViewportDateRelativeToAbsolute({
       amount: 1,
       unit: 'day',
       type: 'relative',
     });
     expect(currentDate.getTime() - newDate.getTime()).toEqual(86400000);
 
     currentDate = new Date();
-    newDate = getViewportStartOnBackwardRelative({
+    newDate = getViewportDateRelativeToAbsolute({
       amount: 1,
       unit: 'week',
       type: 'relative',
     });
     expect(currentDate.getTime() - newDate.getTime()).toEqual(604800000);
 
     currentDate = new Date();
-    newDate = getViewportStartOnBackwardRelative({
+    newDate = getViewportDateRelativeToAbsolute({
       amount: 1,
       unit: 'month',
       type: 'relative',

diff --git a/packages/react-components/src/components/time-sync/viewportAdapter.tsx b/packages/react-components/src/components/time-sync/viewportAdapter.tsx
@@ -120,30 +120,33 @@ export const viewportToDateRange = (viewport?: Viewport): DateRangePickerProps.V
   return null;
 };
 
-export const getViewportStartOnBackwardRelative = (value: DateRangePickerProps.RelativeValue): Date => {
-  const newStart = new Date();
+export const getViewportDateRelativeToAbsolute = (
+  value: DateRangePickerProps.RelativeValue,
+  forward?: boolean
+): Date => {
+  const newEnd = new Date();
   switch (value.unit) {
     case 'second':
-      newStart.setSeconds(newStart.getSeconds() - value.amount);
+      newEnd.setSeconds(newEnd.getSeconds() + value.amount * (forward ? 1 : -1));
       break;
     case 'minute':
-      newStart.setMinutes(newStart.getMinutes() - value.amount);
+      newEnd.setMinutes(newEnd.getMinutes() + value.amount * (forward ? 1 : -1));
       break;
     case 'hour':
-      newStart.setHours(newStart.getHours() - value.amount);
+      newEnd.setHours(newEnd.getHours() + value.amount * (forward ? 1 : -1));
       break;
     case 'day':
-      newStart.setDate(newStart.getDate() - value.amount);
+      newEnd.setDate(newEnd.getDate() + value.amount * (forward ? 1 : -1));
       break;
     case 'week':
-      newStart.setDate(newStart.getDate() - 7 * value.amount);
+      newEnd.setDate(newEnd.getDate() + 7 * (value.amount * (forward ? 1 : -1)));
       break;
     case 'month':
-      newStart.setMonth(newStart.getMonth() - value.amount);
+      newEnd.setMonth(newEnd.getMonth() + value.amount * (forward ? 1 : -1));
       break;
     case 'year':
-      newStart.setFullYear(newStart.getFullYear() - value.amount);
+      newEnd.setFullYear(newEnd.getFullYear() + value.amount * (forward ? 1 : -1));
       break;
   }
-  return newStart;
+  return newEnd;
 };