From 8127d105ada030f0f96d76d1cbacbe56729b3a26 Mon Sep 17 00:00:00 2001
From: Jesse Hallam <jesse.hallam@gmail.com>
Date: Thu, 15 May 2025 10:57:14 -0300
Subject: [PATCH] MM-63406: Update timezone automatically (#30856)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* MM-63406: Update timezone automatically

On focus as well as every 30 minutes, check if the timezone has changed.
Also, ignore the momentjs cache, otherwise this value is static as per https://momentjs.com/timezone/docs/#/using-timezones/guessing-user-timezone/

> By default Moment Timezone caches the detected timezone. This means that subsequent calls to moment.tz.guess() will always return the same value.

* migrate away from enzyme

* MM-63406: Address PR feedback - add constants and improve comments

* MM-63406: Address PR feedback - Extract timezone logic to a separate component

- Created a new TimezoneManager component for handling timezone updates
- Used fake timers in tests to properly test the periodic update
- Removed visibility change handler to simplify the component

* fix linting

* Remove comments from getBrowserTimezone function

* Move updateTimezone function before useEffect

* Simplify timezone detection with Intl.DateTimeFormat().resolvedOptions().timeZone

* Fix style issues

* Improve timezone manager tests with jest.getTimerCount()

Used jest.getTimerCount() to verify timer cleanup on unmount instead of spying on clearInterval.
This change addresses PR feedback in #30856.

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>

* MM-63406: Simplify timezone updates to check every minute

- Simplify timezone manager by removing focus event and only checking every minute
- Replace 30-minute interval with 1-minute interval for more responsive timezone detection
- Update tests to match new implementation
- Change removes focus/blur event handling as per PR feedback

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>

* revert to simpler approach

---------

Co-authored-by: Mattermost Build <build@mattermost.com>
Co-authored-by: Claude <noreply@anthropic.com>
---
 .../src/components/logged_in/logged_in.tsx    | 19 +++++--------------
 webapp/channels/src/utils/timezone.ts         |  2 +-
 2 files changed, 6 insertions(+), 15 deletions(-)

diff --git a/webapp/channels/src/components/logged_in/logged_in.tsx b/webapp/channels/src/components/logged_in/logged_in.tsx
index b061c7871f..898704f021 100644
--- a/webapp/channels/src/components/logged_in/logged_in.tsx
+++ b/webapp/channels/src/components/logged_in/logged_in.tsx
@@ -71,9 +71,6 @@ export default class LoggedIn extends React.PureComponent<Props> {
         // Make sure the websockets close and reset version
         window.addEventListener('beforeunload', this.handleBeforeUnload);
 
-        // listen for the app visibility state
-        window.addEventListener('visibilitychange', this.handleVisibilityChange, false);
-
         // Listen for focused tab/window state
         window.addEventListener('focus', this.onFocusListener);
         window.addEventListener('blur', this.onBlurListener);
@@ -117,7 +114,6 @@ export default class LoggedIn extends React.PureComponent<Props> {
         WebSocketActions.close();
 
         window.removeEventListener('keydown', this.handleBackSpace);
-
         window.removeEventListener('focus', this.onFocusListener);
         window.removeEventListener('blur', this.onBlurListener);
 
@@ -144,23 +140,18 @@ export default class LoggedIn extends React.PureComponent<Props> {
         return this.props.children;
     }
 
-    private handleVisibilityChange = (): void => {
-        if (!document.hidden) {
-            this.updateTimeZone();
-        }
-    };
-
     private updateTimeZone(): void {
         this.props.actions.autoUpdateTimezone(getBrowserTimezone());
     }
 
-    private onFocusListener(): void {
+    private onFocusListener = (): void => {
+        this.updateTimeZone();
         GlobalActions.emitBrowserFocus(true);
-    }
+    };
 
-    private onBlurListener(): void {
+    private onBlurListener = (): void => {
         GlobalActions.emitBrowserFocus(false);
-    }
+    };
 
     private updateActiveStatus = (userIsActive: boolean, idleTime: number, manual: boolean) => {
         if (!this.props.currentUser) {
diff --git a/webapp/channels/src/utils/timezone.ts b/webapp/channels/src/utils/timezone.ts
index 17559fd242..ac504d300f 100644
--- a/webapp/channels/src/utils/timezone.ts
+++ b/webapp/channels/src/utils/timezone.ts
@@ -5,7 +5,7 @@ import type {Moment} from 'moment-timezone';
 import moment from 'moment-timezone';
 
 export function getBrowserTimezone() {
-    return moment.tz.guess();
+    return new Intl.DateTimeFormat().resolvedOptions().timeZone;
 }
 
 export function getBrowserUtcOffset() {