From 7f46f3cec2753f58e9efbe31888dcb06d9e76e42 Mon Sep 17 00:00:00 2001
From: nick-delirium <nikita@openreplay.com>
Date: Mon, 9 Sep 2024 17:15:51 +0200
Subject: [PATCH] ui: fix curr tz on negative offsets

---
 .../components/DefaultTimezone.tsx            | 91 +++++++++++--------
 1 file changed, 54 insertions(+), 37 deletions(-)

diff --git a/frontend/app/components/shared/SessionSettings/components/DefaultTimezone.tsx b/frontend/app/components/shared/SessionSettings/components/DefaultTimezone.tsx
index d2f0fb0e1..539254964 100644
--- a/frontend/app/components/shared/SessionSettings/components/DefaultTimezone.tsx
+++ b/frontend/app/components/shared/SessionSettings/components/DefaultTimezone.tsx
@@ -1,36 +1,45 @@
-import React, { useEffect } from 'react';
-import { Button } from 'UI';
 import { Radio } from 'antd';
+import { toJS } from 'mobx';
+import { useObserver } from 'mobx-react-lite';
+import React, { useEffect } from 'react';
+import { toast } from 'react-toastify';
 
-import Select from 'Shared/Select';
 import { useStore } from 'App/mstore';
 import { Timezone } from 'App/mstore/types/sessionSettings';
-import { useObserver } from 'mobx-react-lite';
-import { toast } from 'react-toastify';
-import { toJS } from 'mobx';
+import { Button } from 'UI';
+
+import Select from 'Shared/Select';
+
 type TimezonesDropdown = Timezone[];
 
 function DefaultTimezone() {
   const { settingsStore } = useStore();
   const sessionSettings = useObserver(() => settingsStore.sessionSettings);
   const [changed, setChanged] = React.useState(false);
-  const [shownTimezone, setShownTimezone] = React.useState<'user' | 'local'>(sessionSettings.shownTimezone);
-  const timezoneOptions: TimezonesDropdown = settingsStore.sessionSettings.defaultTimezones;
-  const [timezone, setTimezone] = React.useState(settingsStore.sessionSettings.timezone);
+  const [shownTimezone, setShownTimezone] = React.useState<'user' | 'local'>(
+    sessionSettings.shownTimezone
+  );
+  const timezoneOptions: TimezonesDropdown =
+    settingsStore.sessionSettings.defaultTimezones;
+  const [timezone, setTimezone] = React.useState(
+    settingsStore.sessionSettings.timezone
+  );
 
   useEffect(() => {
     if (!timezone) setTimezone({ label: 'Local Timezone', value: 'system' });
   }, []);
 
   const getCurrentTimezone = () => {
-    const currentTimezone = Intl.DateTimeFormat().resolvedOptions().timeZone;
     const timezoneOffset = Math.floor(new Date().getTimezoneOffset() / -60);
-    const remainingVal = Math.abs(new Date().getTimezoneOffset() % 60)
-    const timezoneValue = `UTC${
-      (timezoneOffset >= 0 ? '+' : '-') + timezoneOffset.toString().padStart(2, '0')
-    }${remainingVal ? `:${remainingVal.toString().padStart(2, '0')}` : ''}`;
+    const remainingVal = Math.abs(new Date().getTimezoneOffset() % 60);
+    const sign = timezoneOffset > 0 ? '+' : '-';
+    const tzOffsHrs = Math.abs(timezoneOffset)
+      .toString()
+      .padStart(2, '0');
+    const tzOffsMins = remainingVal ? `:${remainingVal.toString().padStart(2, '0')}` : '';
+    const timezoneValue = `UTC${sign}${tzOffsHrs}${tzOffsMins}`;
     const selectedTimezone = timezoneOptions.find(
-      (option) => option.label.includes(currentTimezone) || option.value === timezoneValue
+      (option) => option.value === timezoneValue
     );
     return selectedTimezone ? selectedTimezone : null;
   };
@@ -56,15 +65,16 @@ function DefaultTimezone() {
   };
 
   const updateDisplayedTZ = (value: 'user' | 'local') => {
-    sessionSettings.updateKey('shownTimezone', value)
-    setShownTimezone(value)
-  }
+    sessionSettings.updateKey('shownTimezone', value);
+    setShownTimezone(value);
+  };
 
   return (
     <>
       <h3 className="text-lg">Default Timezone</h3>
       <div className="my-1">
-        Set the timezone for this project. All Sessions, Charts will be referenced to this.
+        Set the timezone for this project. All Sessions, Charts will be
+        referenced to this.
       </div>
       <div>
         <Radio.Group
@@ -77,27 +87,34 @@ function DefaultTimezone() {
           <Radio.Button value={'user'}>End User's Timezone</Radio.Button>
         </Radio.Group>
       </div>
-      {shownTimezone === 'local' ?
+      {shownTimezone === 'local' ? (
         <>
-        <div className="mt-2 flex items-center" style={{ width: '265px' }}>
-          <Select
-            options={timezoneOptions}
-            defaultValue={timezone.value}
-            className="w-full"
-            value={timezoneOptions.find((option) => option.value === timezone.value)}
-            onChange={onSelectChange}
-          />
-          <div className="col-span-3 ml-3">
-            <Button disabled={!changed} variant="outline" size="medium" onClick={onTimezoneSave}>
-              Update
-            </Button>
+          <div className="mt-2 flex items-center" style={{ width: '265px' }}>
+            <Select
+              options={timezoneOptions}
+              defaultValue={timezone.value}
+              className="w-full"
+              value={timezoneOptions.find(
+                (option) => option.value === timezone.value
+              )}
+              onChange={onSelectChange}
+            />
+            <div className="col-span-3 ml-3">
+              <Button
+                disabled={!changed}
+                variant="outline"
+                size="medium"
+                onClick={onTimezoneSave}
+              >
+                Update
+              </Button>
+            </div>
+          </div>
+          <div onClick={setCurrentTimezone} className="mt-3 link">
+            Apply my current timezone
           </div>
-        </div>
-        <div onClick={setCurrentTimezone} className="mt-3 link">
-          Apply my current timezone
-        </div>
         </>
-      : null}
+      ) : null}
     </>
   );
 }