From c36c380a5d87ac6ff88ddbdccbff06ab59834264 Mon Sep 17 00:00:00 2001
From: Delirium <sylenien@gmail.com>
Date: Tue, 26 Jul 2022 17:06:15 +0300
Subject: [PATCH] fix(ui): fix timezone settings (#643)

---
 .../SessionList/SessionListHeader.js          | 12 +++---
 .../SelectDateRange/SelectDateRange.tsx       |  4 +-
 frontend/app/dateRange.js                     | 38 ++++++++--------
 frontend/app/store.js                         |  7 ++-
 frontend/app/types/app/period.js              | 43 ++++++++-----------
 5 files changed, 53 insertions(+), 51 deletions(-)

diff --git a/frontend/app/components/BugFinder/SessionList/SessionListHeader.js b/frontend/app/components/BugFinder/SessionList/SessionListHeader.js
index 5e2702639..606ecaf67 100644
--- a/frontend/app/components/BugFinder/SessionList/SessionListHeader.js
+++ b/frontend/app/components/BugFinder/SessionList/SessionListHeader.js
@@ -26,7 +26,7 @@ function SessionListHeader({ activeTab, count, applyFilter, filter }) {
     }, [label]);
 
     const { startDate, endDate, rangeValue } = filter;
-    const period = new Record({ start: startDate, end: endDate, rangeName: rangeValue });
+    const period = new Record({ start: startDate, end: endDate, rangeName: rangeValue, timezoneOffset: getTimeZoneOffset() });
 
     const onDateChange = (e) => {
         const dateValues = e.toJSON();
@@ -36,10 +36,12 @@ function SessionListHeader({ activeTab, count, applyFilter, filter }) {
     };
 
     React.useEffect(() => {
-        const dateValues = period.toJSON();
-        dateValues.startDate = moment(dateValues.startDate).startOf('day').utcOffset(getTimeZoneOffset(), true).valueOf();
-        dateValues.endDate = moment(dateValues.endDate).endOf('day').utcOffset(getTimeZoneOffset(), true).valueOf();
-        applyFilter(dateValues);
+        if (label) {
+            const dateValues = period.toJSON();
+            dateValues.startDate = moment(dateValues.startDate).startOf('day').utcOffset(getTimeZoneOffset(), true).valueOf();
+            dateValues.endDate = moment(dateValues.endDate).endOf('day').utcOffset(getTimeZoneOffset(), true).valueOf();
+            applyFilter(dateValues);
+        }
     }, [label]);
 
     return (
diff --git a/frontend/app/components/shared/SelectDateRange/SelectDateRange.tsx b/frontend/app/components/shared/SelectDateRange/SelectDateRange.tsx
index da8a940a5..7eaabc252 100644
--- a/frontend/app/components/shared/SelectDateRange/SelectDateRange.tsx
+++ b/frontend/app/components/shared/SelectDateRange/SelectDateRange.tsx
@@ -39,7 +39,7 @@ function SelectDateRange(props: Props) {
     };
 
     const isCustomRange = period.rangeName === CUSTOM_RANGE;
-    const customRange = isCustomRange ? period.rangeFormatted(undefined, timezone) : '';
+    const customRange = isCustomRange ? period.rangeFormatted() : '';
     return (
         <div className="relative">
             <Select
@@ -75,7 +75,7 @@ function SelectDateRange(props: Props) {
                             width: '770px',
                         }}
                     >
-                        <DateRangePopup onApply={onApplyDateRange} onCancel={() => setIsCustom(false)} selectedDateRange={period.range} />
+                        <DateRangePopup timezone={timezone} onApply={onApplyDateRange} onCancel={() => setIsCustom(false)} selectedDateRange={period.range} />
                     </div>
                 </OutsideClickDetectingDiv>
             )}
diff --git a/frontend/app/dateRange.js b/frontend/app/dateRange.js
index 0a1ae3410..70f674665 100644
--- a/frontend/app/dateRange.js
+++ b/frontend/app/dateRange.js
@@ -2,6 +2,7 @@ import origMoment from "moment";
 import { extendMoment } from "moment-range";
 export const moment = extendMoment(origMoment);
 import { DateTime } from "luxon";
+import { TIMEZONE } from 'App/constants/storageKeys';
 
 export const CUSTOM_RANGE = "CUSTOM_RANGE";
 
@@ -42,39 +43,42 @@ export function getDateRangeLabel(value) {
 }
 
 export function getDateRangeFromValue(value) {
+    const tz = JSON.parse(localStorage.getItem(TIMEZONE));
+    const offset = tz ? tz.label.slice(-6) : 0;
+    
     switch (value) {
         case DATE_RANGE_VALUES.LAST_30_MINUTES:
             return moment.range(
-                moment().startOf("hour").subtract(30, "minutes"),
-                moment().startOf("hour")
+                moment().utcOffset(offset, true).startOf("hour").subtract(30, "minutes"),
+                moment().utcOffset(offset, true).startOf("hour")
             );
+            case DATE_RANGE_VALUES.YESTERDAY:
+                return moment.range(
+                    moment().utcOffset(offset, true).subtract(1, "days").startOf("day"),
+                    moment().utcOffset(offset, true).subtract(1, "days").endOf("day")
+                    );
         case DATE_RANGE_VALUES.TODAY:
-            return moment.range(moment().startOf("day"), moment().endOf("day"));
-        case DATE_RANGE_VALUES.YESTERDAY:
-            return moment.range(
-                moment().subtract(1, "days").startOf("day"),
-                moment().subtract(1, "days").endOf("day")
-            );
+            return moment.range(moment().utcOffset(offset, true).startOf("day"), moment().utcOffset(offset, true).endOf("day"));
         case DATE_RANGE_VALUES.LAST_24_HOURS:
-            return moment.range(moment().subtract(24, "hours"), moment());
+            return moment.range(moment().utcOffset(offset, true).subtract(24, "hours"), moment().utcOffset(offset, true));
         case DATE_RANGE_VALUES.LAST_7_DAYS:
             return moment.range(
-                moment().subtract(7, "days").startOf("day"),
-                moment().endOf("day")
+                moment().utcOffset(offset, true).subtract(7, "days").startOf("day"),
+                moment().utcOffset(offset, true).endOf("day")
             );
         case DATE_RANGE_VALUES.LAST_30_DAYS:
             return moment.range(
-                moment().subtract(30, "days").startOf("day"),
-                moment().endOf("day")
+                moment().utcOffset(offset, true).subtract(30, "days").startOf("day"),
+                moment().utcOffset(offset, true).endOf("day")
             );
         case DATE_RANGE_VALUES.THIS_MONTH:
-            return moment().range("month");
+            return moment().utcOffset(offset, true).range("month");
         case DATE_RANGE_VALUES.LAST_MONTH:
-            return moment().subtract(1, "months").range("month");
+            return moment().utcOffset(offset, true).subtract(1, "months").range("month");
         case DATE_RANGE_VALUES.THIS_YEAR:
-            return moment().range("year");
+            return moment().utcOffset(offset, true).range("year");
         case DATE_RANGE_VALUES.CUSTOM_RANGE:
-            return moment.range(moment(), moment());
+            return moment.range(moment().utcOffset(offset, true), moment().utcOffset(offset, true));
     }
     return null;
 }
diff --git a/frontend/app/store.js b/frontend/app/store.js
index f907a579c..dd1434a0c 100644
--- a/frontend/app/store.js
+++ b/frontend/app/store.js
@@ -1,4 +1,4 @@
-import { createStore, applyMiddleware } from 'redux';
+import { createStore, applyMiddleware, compose } from 'redux';
 import thunk from 'redux-thunk';
 import { Map } from 'immutable';
 import indexReducer from './duck';
@@ -9,13 +9,16 @@ const storage = new LocalStorage({
   jwt: String,
 });
 
+const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ && window.env.NODE_ENV === "development" 
+  ? window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ : compose;
+
 const storageState = storage.state();
 const initialState = Map({
   jwt: storageState.jwt,
   // TODO: store user
 });
 
-const store = createStore(indexReducer, initialState, applyMiddleware(thunk, apiMiddleware));
+const store = createStore(indexReducer, initialState, composeEnhancers(applyMiddleware(thunk, apiMiddleware)));
 store.subscribe(() => {
   const state = store.getState();
   storage.sync({
diff --git a/frontend/app/types/app/period.js b/frontend/app/types/app/period.js
index 027e324ce..da69519b0 100644
--- a/frontend/app/types/app/period.js
+++ b/frontend/app/types/app/period.js
@@ -26,43 +26,43 @@ const RANGE_LABELS = {
     [THIS_YEAR]: "This Year",
 };
 
-function getRange(rangeName) {
+function getRange(rangeName, offset) {
     switch (rangeName) {
         case TODAY:
             return moment.range(moment().startOf("day"), moment().endOf("day"));
         case YESTERDAY:
             return moment.range(
-                moment().subtract(1, "days").startOf("day"),
-                moment().subtract(1, "days").endOf("day")
+                moment().utcOffset(offset).subtract(1, "days").startOf("day"),
+                moment().utcOffset(offset).subtract(1, "days").endOf("day")
             );
         case LAST_24_HOURS:
             return moment.range(
                 // moment().startOf("hour").subtract(24, "hours"),
                 // moment().startOf("hour")
-				moment().subtract(24, 'hours'),
-        		moment(),
+				moment().utcOffset(offset).subtract(24, 'hours'),
+        		moment().utcOffset(offset),
             );
         case LAST_30_MINUTES:
             return moment.range(
-                moment().startOf("hour").subtract(30, "minutes"),
-                moment().startOf("hour")
+                moment().utcOffset(offset).startOf("hour").subtract(30, "minutes"),
+                moment().utcOffset(offset).startOf("hour")
             );
         case LAST_7_DAYS:
             return moment.range(
-                moment().subtract(7, "days").startOf("day"),
-                moment().endOf("day")
+                moment().utcOffset(offset).subtract(7, "days").startOf("day"),
+                moment().utcOffset(offset).endOf("day")
             );
         case LAST_30_DAYS:
             return moment.range(
-                moment().subtract(30, "days").startOf("day"),
-                moment().endOf("day")
+                moment().utcOffset(offset).subtract(30, "days").startOf("day"),
+                moment().utcOffset(offset).endOf("day")
             );
         case THIS_MONTH:
-            return moment().range("month");
+            return moment().utcOffset(offset).range("month");
         case LAST_MONTH:
-            return moment().subtract(1, "months").range("month");
+            return moment().utcOffset(offset).subtract(1, "months").range("month");
         case THIS_YEAR:
-            return moment().range("year");
+            return moment().utcOffset(offset).range("year");
         default:
             return moment.range();
     }
@@ -77,10 +77,11 @@ export default Record(
     },
     {
         fromJS: (period) => {
+            const offset = period.timezoneOffset || 0
             if (!period.rangeName || period.rangeName === CUSTOM_RANGE) {
                 const range = moment.range(
-                    moment(period.start || 0),
-                    moment(period.end || 0)
+                    moment(period.start || 0).utcOffset(offset),
+                    moment(period.end || 0).utcOffset(offset)
                 );
                 return {
                     ...period,
@@ -89,7 +90,7 @@ export default Record(
                     end: range.end.unix() * 1000,
                 };
             }
-            const range = getRange(period.rangeName);
+            const range = getRange(period.rangeName, offset);
             return {
                 ...period,
                 range,
@@ -97,14 +98,6 @@ export default Record(
                 end: range.end.unix() * 1000,
             };
         },
-        // fromFilter: filter => {
-        // 	const range = getRange(filter.rangeName);
-        // 	return {
-        // 		start: range.start.unix() * 1000,
-        // 		end: range.end.unix() * 1000,
-        // 		rangeName: filter.rangeName,
-        // 	}
-        // },
         methods: {
             toJSON() {
                 return {