From 5b6a74f9a62a42c3c788ef64accaedafcaf5a63f Mon Sep 17 00:00:00 2001
From: nick-delirium <nikita@openreplay.com>
Date: Mon, 18 Nov 2024 16:58:23 +0100
Subject: [PATCH] ui: keep track of local timezone for each visit

---
 .../components/DefaultTimezone.tsx               | 16 +++++++++++-----
 frontend/app/constants/storageKeys.ts            |  1 +
 frontend/app/mstore/types/sessionSettings.ts     | 16 ++++++++++++----
 3 files changed, 24 insertions(+), 9 deletions(-)

diff --git a/frontend/app/components/shared/SessionSettings/components/DefaultTimezone.tsx b/frontend/app/components/shared/SessionSettings/components/DefaultTimezone.tsx
index 891cc2206..fee1b7e58 100644
--- a/frontend/app/components/shared/SessionSettings/components/DefaultTimezone.tsx
+++ b/frontend/app/components/shared/SessionSettings/components/DefaultTimezone.tsx
@@ -1,12 +1,11 @@
 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 { useStore } from 'App/mstore';
 import { Timezone } from 'App/mstore/types/sessionSettings';
-import { Button } from 'UI';
+import { Button, Icon } from 'UI';
 
 import Select from 'Shared/Select';
 
@@ -24,6 +23,7 @@ function DefaultTimezone() {
   const [timezone, setTimezone] = React.useState(
     settingsStore.sessionSettings.timezone
   );
+  const [isLocal, setIsLocal] = React.useState(settingsStore.sessionSettings.usingLocal);
 
   useEffect(() => {
     if (!timezone) setTimezone({ label: 'Local Timezone', value: 'system' });
@@ -48,7 +48,8 @@ function DefaultTimezone() {
     const selectedTimezone = getCurrentTimezone();
     if (selectedTimezone) {
       setTimezone(selectedTimezone);
-      sessionSettings.updateTimezone(selectedTimezone);
+      setIsLocal(true);
+      sessionSettings.updateTimezone(selectedTimezone, true);
       toast.success('Default timezone saved successfully');
     }
   };
@@ -110,8 +111,13 @@ function DefaultTimezone() {
               </Button>
             </div>
           </div>
-          <div onClick={setCurrentTimezone} className="mt-3 link">
-            Apply my current timezone
+          <div className={'mt-3 flex gap-1 items-center'}>
+            <div onClick={setCurrentTimezone} className={"link"}>
+              Apply my current timezone
+            </div>
+            {isLocal ? (
+              <Icon name={'check'} size={18} />
+            ) : null}
           </div>
         </>
       ) : null}
diff --git a/frontend/app/constants/storageKeys.ts b/frontend/app/constants/storageKeys.ts
index 335dbed64..ec10a2963 100644
--- a/frontend/app/constants/storageKeys.ts
+++ b/frontend/app/constants/storageKeys.ts
@@ -1,5 +1,6 @@
 export const SKIP_TO_ISSUE = "__$session-skipToIssue$__"
 export const TIMEZONE = "__$session-timezone$__"
+export const TIMEZONE_LOCAL = "__$session-timezone$_local__"
 export const SHOWN_TIMEZONE = "__$session-shownTimezone$__"
 export const DURATION_FILTER = "__$session-durationFilter$__"
 export const SESSION_FILTER = "__$session-filter$__"
diff --git a/frontend/app/mstore/types/sessionSettings.ts b/frontend/app/mstore/types/sessionSettings.ts
index 506453818..b3c5254f1 100644
--- a/frontend/app/mstore/types/sessionSettings.ts
+++ b/frontend/app/mstore/types/sessionSettings.ts
@@ -1,5 +1,5 @@
 import { makeAutoObservable, runInAction } from 'mobx';
-import { SKIP_TO_ISSUE, TIMEZONE, SHOWN_TIMEZONE, DURATION_FILTER, MOUSE_TRAIL } from 'App/constants/storageKeys';
+import { SKIP_TO_ISSUE, TIMEZONE, TIMEZONE_LOCAL, SHOWN_TIMEZONE, DURATION_FILTER, MOUSE_TRAIL } from 'App/constants/storageKeys';
 import { DateTime, Settings } from 'luxon'
 
 export type Timezone = {
@@ -74,6 +74,7 @@ export default class SessionSettings {
   captureConditions: { name: string; captureRate: number; filters: any[] }[] = [];
   mouseTrail: boolean = localStorage.getItem(MOUSE_TRAIL) !== 'false';
   shownTimezone: 'user' | 'local';
+  usingLocal: boolean = false;
 
   constructor() {
     const userTimezoneOffset = DateTime.local().toFormat('ZZ')
@@ -82,7 +83,13 @@ export default class SessionSettings {
     ) || { label: 'Local', value: `UTC${userTimezoneOffset}` };
 
     const savedTz = localStorage.getItem(TIMEZONE)
-    this.timezone = savedTz ? JSON.parse(savedTz) : defaultTimezone;
+    const isLocal = localStorage.getItem(TIMEZONE_LOCAL) === 'true';
+    if (isLocal) {
+      this.timezone = defaultTimezone;
+      this.usingLocal = true;
+    } else {
+      this.timezone = savedTz ? JSON.parse(savedTz) : defaultTimezone;
+    }
     Settings.defaultZone = this.timezone.value;
     if (localStorage.getItem(MOUSE_TRAIL) === null) {
       localStorage.setItem(MOUSE_TRAIL, 'true');
@@ -110,10 +117,11 @@ export default class SessionSettings {
     this.conditionalCapture = all;
   };
 
-  updateTimezone = (value: Timezone) => {
+  updateTimezone = (value: Timezone, local?: boolean) => {
     this.timezone = value;
     Settings.defaultZone = value.value;
-    localStorage.setItem(`__$session-timezone$__`, JSON.stringify(value));
+    localStorage.setItem(TIMEZONE, JSON.stringify(value));
+    localStorage.setItem(TIMEZONE_LOCAL, local ? 'true' : 'false');
   }
 
   updateKey = (key: string, value: any) => {