From 00a3c52e8db30c5d3795609c4f8a1a2b3744f58b Mon Sep 17 00:00:00 2001
From: Delirium <sylenien@gmail.com>
Date: Thu, 21 Jul 2022 17:28:28 +0300
Subject: [PATCH] fix(ui): fix timezone settings (#629)

---
 .../SessionList/SessionListHeader.js          | 26 ++++++++++++++++---
 .../SelectDateRange/SelectDateRange.tsx       | 17 +++++++-----
 .../components/shared/SessionItem/Counter.tsx |  4 +--
 frontend/app/types/app/period.js              | 11 +++++++-
 4 files changed, 46 insertions(+), 12 deletions(-)

diff --git a/frontend/app/components/BugFinder/SessionList/SessionListHeader.js b/frontend/app/components/BugFinder/SessionList/SessionListHeader.js
index bf4bf8b55..5e2702639 100644
--- a/frontend/app/components/BugFinder/SessionList/SessionListHeader.js
+++ b/frontend/app/components/BugFinder/SessionList/SessionListHeader.js
@@ -4,7 +4,10 @@ import SortDropdown from '../Filters/SortDropdown';
 import { numberWithCommas } from 'App/utils';
 import SelectDateRange from 'Shared/SelectDateRange';
 import { applyFilter } from 'Duck/search';
-import Period from 'Types/app/period';
+import Record from 'Types/app/period';
+import { useStore } from 'App/mstore';
+import { useObserver } from 'mobx-react-lite';
+import { moment } from 'App/dateRange';
 
 const sortOptionsMap = {
     'startTs-desc': 'Newest',
@@ -15,13 +18,30 @@ const sortOptionsMap = {
 const sortOptions = Object.entries(sortOptionsMap).map(([value, label]) => ({ value, label }));
 
 function SessionListHeader({ activeTab, count, applyFilter, filter }) {
+    const { settingsStore } = useStore();
+
+    const label = useObserver(() => settingsStore.sessionSettings.timezone.label);
+    const getTimeZoneOffset = React.useCallback(() => {
+        return label.slice(-6);
+    }, [label]);
+
     const { startDate, endDate, rangeValue } = filter;
-    const period = new Period({ start: startDate, end: endDate, rangeName: rangeValue });
+    const period = new Record({ start: startDate, end: endDate, rangeName: rangeValue });
 
     const onDateChange = (e) => {
         const dateValues = e.toJSON();
+        dateValues.startDate = moment(dateValues.startDate).utcOffset(getTimeZoneOffset(), true).valueOf();
+        dateValues.endDate = moment(dateValues.endDate).utcOffset(getTimeZoneOffset(), true).valueOf();
         applyFilter(dateValues);
     };
+
+    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);
+    }, [label]);
+
     return (
         <div className="flex mb-2 justify-between items-end">
             <div className="flex items-baseline">
@@ -32,7 +52,7 @@ function SessionListHeader({ activeTab, count, applyFilter, filter }) {
                 {
                     <div className="ml-3 flex items-center">
                         <span className="mr-2 color-gray-medium">Sessions Captured in</span>
-                        <SelectDateRange period={period} onChange={onDateChange} />
+                        <SelectDateRange period={period} onChange={onDateChange} timezone={getTimeZoneOffset()} />
                     </div>
                 }
             </div>
diff --git a/frontend/app/components/shared/SelectDateRange/SelectDateRange.tsx b/frontend/app/components/shared/SelectDateRange/SelectDateRange.tsx
index 12b6ba016..da8a940a5 100644
--- a/frontend/app/components/shared/SelectDateRange/SelectDateRange.tsx
+++ b/frontend/app/components/shared/SelectDateRange/SelectDateRange.tsx
@@ -6,17 +6,19 @@ import { components } from 'react-select';
 import DateRangePopup from 'Shared/DateRangeDropdown/DateRangePopup';
 import OutsideClickDetectingDiv from 'Shared/OutsideClickDetectingDiv';
 import cn from 'classnames';
+import { observer } from 'mobx-react-lite';
 
 interface Props {
     period: any;
     onChange: (data: any) => void;
     disableCustom?: boolean;
     right?: boolean;
+    timezone?: string;
     [x: string]: any;
 }
 function SelectDateRange(props: Props) {
     const [isCustom, setIsCustom] = React.useState(false);
-    const { right = false, period, disableCustom = false, ...rest } = props;
+    const { right = false, period, disableCustom = false, timezone, ...rest } = props;
     let selectedValue = DATE_RANGE_OPTIONS.find((obj: any) => obj.value === period.rangeName);
     const options = DATE_RANGE_OPTIONS.filter((obj: any) => (disableCustom ? obj.value !== CUSTOM_RANGE : true));
 
@@ -24,15 +26,20 @@ function SelectDateRange(props: Props) {
         if (value === CUSTOM_RANGE) {
             setIsCustom(true);
         } else {
+            // @ts-ignore
             props.onChange(new Period({ rangeName: value }));
         }
     };
 
     const onApplyDateRange = (value: any) => {
-        props.onChange(new Period({ rangeName: CUSTOM_RANGE, start: value.start, end: value.end }));
+        // @ts-ignore
+        const range = new Period({ rangeName: CUSTOM_RANGE, start: value.start, end: value.end })
+        props.onChange(range);
         setIsCustom(false);
     };
 
+    const isCustomRange = period.rangeName === CUSTOM_RANGE;
+    const customRange = isCustomRange ? period.rangeFormatted(undefined, timezone) : '';
     return (
         <div className="relative">
             <Select
@@ -44,7 +51,7 @@ function SelectDateRange(props: Props) {
                     SingleValue: ({ children, ...props }: any) => {
                         return (
                             <components.SingleValue {...props}>
-                                {period.rangeName === CUSTOM_RANGE ? period.rangeFormatted() : children}
+                                {isCustomRange ? customRange : children}
                             </components.SingleValue>
                         );
                     },
@@ -66,8 +73,6 @@ function SelectDateRange(props: Props) {
                         className={cn('absolute top-0 mt-10 z-40', { 'right-0': right })}
                         style={{
                             width: '770px',
-                            // margin: 'auto 50vh 0',
-                            // transform: 'translateX(-50%)'
                         }}
                     >
                         <DateRangePopup onApply={onApplyDateRange} onCancel={() => setIsCustom(false)} selectedDateRange={period.range} />
@@ -78,4 +83,4 @@ function SelectDateRange(props: Props) {
     );
 }
 
-export default SelectDateRange;
+export default observer(SelectDateRange);
diff --git a/frontend/app/components/shared/SessionItem/Counter.tsx b/frontend/app/components/shared/SessionItem/Counter.tsx
index 9656ae753..fd923e6c0 100644
--- a/frontend/app/components/shared/SessionItem/Counter.tsx
+++ b/frontend/app/components/shared/SessionItem/Counter.tsx
@@ -8,8 +8,8 @@ interface Props {
 }
 
 function Counter({ startTime, className }: Props) {
-  let intervalId;
-  const [duration, setDuration] = useState(new Date().getTime() - convertTimestampToUtcTimestamp(startTime));
+  let intervalId: NodeJS.Timer;
+  const [duration, setDuration] = useState(convertTimestampToUtcTimestamp(new Date().getTime()) - convertTimestampToUtcTimestamp(startTime));
   const formattedDuration = durationFormatted(Duration.fromMillis(duration));
 
   useEffect(() => {
diff --git a/frontend/app/types/app/period.js b/frontend/app/types/app/period.js
index ce3876dcd..027e324ce 100644
--- a/frontend/app/types/app/period.js
+++ b/frontend/app/types/app/period.js
@@ -120,7 +120,16 @@ export default Record(
                     endTimestamp: this.end,
                 };
             },
-            rangeFormatted(format = "MMM Do YY, HH:mm") {
+            rangeFormatted(format = "MMM Do YY, HH:mm", tz) {
+                if (tz) {
+                    const start = this.range.start.clone();
+                    const end = this.range.end.clone();
+                    return (
+                        start.utcOffset(tz).format(format) +
+                        " - " +
+                        end.utcOffset(tz).format(format)
+                    )
+                }
                 return (
                     this.range.start.format(format) +
                     " - " +