[#337] added timezone loading from backend (#386)

* [#337] added timezone loading from backend

* [#337] changed data structure to allow patching timezone while keeping other datetime params value

* [#337] fixed gap, event create modale sync with settings and added checkbox

* [#337] isBrowserDefaultTimezone is set to true when API return null timezone

Co-authored-by: Camille Moussu <cmoussu@linagora.com>

src/components/Calendar/Calendar.tsx

@@ -10,10 +10,7 @@ import { useAppDispatch, useAppSelector } from "../../app/hooks";
 import EventPopover from "../../features/Events/EventModal";
 import { CalendarEvent } from "../../features/Events/EventsTypes";
 import CalendarSelection from "./CalendarSelection";
-import {
-  getCalendarDetailAsync,
-  setTimeZone,
-} from "../../features/Calendars/CalendarSlice";
+import { getCalendarDetailAsync } from "../../features/Calendars/CalendarSlice";
 import ImportAlert from "../../features/Events/ImportAlert";
 import {
   formatDateToYYYYMMDDTHHMMSS,
@@ -46,6 +43,8 @@ import frLocale from "@fullcalendar/core/locales/fr";
 import ruLocale from "@fullcalendar/core/locales/ru";
 import viLocale from "@fullcalendar/core/locales/vi";
 import SearchResultsPage from "../../features/Search/SearchResultsPage";
+import { setTimeZone } from "../../features/Settings/SettingsSlice";
+import { browserDefaultTimeZone } from "../../utils/timezone";
 
 const localeMap: Record<string, any> = {
   fr: frLocale,
@@ -108,7 +107,9 @@ export default function CalendarApp({
   });
 
   const [currentView, setCurrentView] = useState("timeGridWeek");
-  const timezone = useAppSelector((state) => state.calendars.timeZone);
+  const timezone =
+    useAppSelector((state) => state.settings.timeZone) ??
+    browserDefaultTimeZone;
 
   const fetchedRangesRef = useRef<Record<string, string>>({});
 

src/components/Calendar/TimezoneSelector.tsx

@@ -2,6 +2,7 @@ import { Button, Popover } from "@mui/material";
 import { useI18n } from "cozy-ui/transpiled/react/providers/I18n";
 import moment from "moment";
 import { MouseEvent, useMemo, useState } from "react";
+import { browserDefaultTimeZone } from "../../utils/timezone";
 import { TIMEZONES } from "../../utils/timezone-data";
 import { TimezoneAutocomplete } from "../Timezone/TimezoneAutocomplete";
 
@@ -18,14 +19,7 @@ export function TimezoneSelector({
 }: TimezoneSelectProps) {
   const [anchorEl, setAnchorEl] = useState<HTMLElement | null>(null);
 
-  const timezoneList = useMemo(() => {
-    const zones = Object.keys(TIMEZONES.zones).sort();
-    const browserTz = resolveTimezone(
-      Intl.DateTimeFormat().resolvedOptions().timeZone
-    );
-
-    return { zones, browserTz, getTimezoneOffset };
-  }, []);
+  const timezoneList = useTimeZoneList();
 
   const effectiveTimezone = value
     ? resolveTimezone(value)
@@ -97,6 +91,15 @@ export function TimezoneSelector({
   );
 }
 
+export function useTimeZoneList() {
+  return useMemo(() => {
+    const zones = Object.keys(TIMEZONES.zones).sort();
+    const browserTz = resolveTimezone(browserDefaultTimeZone);
+
+    return { zones, browserTz, getTimezoneOffset };
+  }, []);
+}
+
 export function resolveTimezone(tzName: string): string {
   if (TIMEZONES.zones[tzName]) {
     return tzName;