fixed calendar period shift when changing offset

fix
grafana · Jun 14, 2024 · ad05205 · ad05205
1 parent 6f151c8
commit ad05205
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 9 deletions.
diff --git a/grafana-plugin/src/containers/Rotation/Rotation.tsx b/grafana-plugin/src/containers/Rotation/Rotation.tsx
@@ -40,7 +40,7 @@ interface RotationProps {
 
 export const Rotation: FC<RotationProps> = observer((props) => {
   const {
-    timezoneStore: { calendarStartDate, getDateInSelectedTimezone },
+    timezoneStore: { calendarStartDate, getDateInSelectedTimezone, selectedTimezoneOffset },
     scheduleStore: { scheduleView: storeScheduleView },
   } = useStore();
   const {
@@ -144,7 +144,7 @@ export const Rotation: FC<RotationProps> = observer((props) => {
     const base = 60 * 60 * 24 * days;
 
     return firstShiftOffset / base;
-  }, [events, startDate]);
+  }, [events, startDate, selectedTimezoneOffset]);
 
   return (
     <div className={cx('root')} onClick={onClick && handleRotationClick}>

diff --git a/grafana-plugin/src/models/timezone/timezone.ts b/grafana-plugin/src/models/timezone/timezone.ts
@@ -3,7 +3,7 @@ import { observable, action, computed, makeObservable } from 'mobx';
 
 // TODO: move utils from Schedule.helpers to common place
 import { ScheduleView } from 'models/schedule/schedule.types';
-import { getCalendarStartDate } from 'pages/schedule/Schedule.helpers';
+import { getCalendarStartDate, toDateWithTimezoneOffsetAtMidnight } from 'pages/schedule/Schedule.helpers';
 import { RootStore } from 'state/rootStore';
 
 import { getOffsetOfCurrentUser, getGMTTimezoneLabelBasedOnOffset } from './timezone.helpers';
@@ -31,12 +31,7 @@ export class TimezoneStore {
   setSelectedTimezoneOffset(offset: number) {
     this.selectedTimezoneOffset = offset;
 
-    // TODO: This needs to be addressed
-    this.calendarStartDate = getCalendarStartDate(
-      this.currentDateInSelectedTimezone,
-      this.rootStore.scheduleStore.scheduleView,
-      offset
-    );
+    this.calendarStartDate = toDateWithTimezoneOffsetAtMidnight(this.calendarStartDate, offset);
   }
 
   @action.bound

diff --git a/grafana-plugin/src/pages/schedule/Schedule.helpers.ts b/grafana-plugin/src/pages/schedule/Schedule.helpers.ts
@@ -216,3 +216,14 @@ export const toDateWithTimezoneOffset = (date: dayjs.Dayjs, timezoneOffset?: num
   }
   return date.utcOffset() === timezoneOffset ? date : date.tz().utcOffset(timezoneOffset);
 };
+
+export const toDateWithTimezoneOffsetAtMidnight = (date: dayjs.Dayjs, timezoneOffset?: number) => {
+  return toDateWithTimezoneOffset(date, timezoneOffset)
+    .set('date', 1)
+    .set('year', date.year())
+    .set('month', date.month())
+    .set('date', date.date())
+    .set('hour', 0)
+    .set('minute', 0)
+    .set('second', 0);
+};