Date formatting per workspace member settings (#6408)

Implement date formatting per workspace member settings

We'll need another round to maybe initialize all workspaces on the
default settings.

For now the default behavior is to take system settings if nothing is
found in DB.

---------

Co-authored-by: Weiko <corentin@twenty.com>

packages/twenty-front/src/modules/users/components/UserProvider.tsx

@@ -2,7 +2,9 @@ import React from 'react';
 import { useRecoilValue } from 'recoil';
 
 import { isCurrentUserLoadedState } from '@/auth/states/isCurrentUserLoadingState';
+import { dateTimeFormatState } from '@/localization/states/dateTimeFormatState';
 import { AppPath } from '@/types/AppPath';
+import { UserContext } from '@/users/contexts/UserContext';
 import { useIsMatchingLocation } from '~/hooks/useIsMatchingLocation';
 import { UserOrMetadataLoader } from '~/loading/components/UserOrMetadataLoader';
 
@@ -10,10 +12,20 @@ export const UserProvider = ({ children }: React.PropsWithChildren) => {
   const isCurrentUserLoaded = useRecoilValue(isCurrentUserLoadedState);
   const isMatchingLocation = useIsMatchingLocation();
 
+  const dateTimeFormat = useRecoilValue(dateTimeFormatState);
+
   return !isCurrentUserLoaded &&
     !isMatchingLocation(AppPath.CreateWorkspace) ? (
     <UserOrMetadataLoader />
   ) : (
-    <>{children}</>
+    <UserContext.Provider
+      value={{
+        dateFormat: dateTimeFormat.dateFormat,
+        timeFormat: dateTimeFormat.timeFormat,
+        timeZone: dateTimeFormat.timeZone,
+      }}
+    >
+      {children}
+    </UserContext.Provider>
   );
 };

packages/twenty-front/src/modules/users/components/UserProviderEffect.tsx

@@ -6,6 +6,12 @@ import { currentWorkspaceMemberState } from '@/auth/states/currentWorkspaceMembe
 import { currentWorkspaceState } from '@/auth/states/currentWorkspaceState';
 import { isCurrentUserLoadedState } from '@/auth/states/isCurrentUserLoadingState';
 import { workspacesState } from '@/auth/states/workspaces';
+import { dateTimeFormatState } from '@/localization/states/dateTimeFormatState';
+import { detectDateFormat } from '@/localization/utils/detectDateFormat';
+import { detectTimeFormat } from '@/localization/utils/detectTimeFormat';
+import { detectTimeZone } from '@/localization/utils/detectTimeZone';
+import { getDateFormatFromWorkspaceDateFormat } from '@/localization/utils/getDateFormatFromWorkspaceDateFormat';
+import { getTimeFormatFromWorkspaceTimeFormat } from '@/localization/utils/getTimeFormatFromWorkspaceTimeFormat';
 import { ColorScheme } from '@/workspace-member/types/WorkspaceMember';
 import { useGetCurrentUserQuery } from '~/generated/graphql';
 import { isDefined } from '~/utils/isDefined';
@@ -20,6 +26,8 @@ export const UserProviderEffect = () => {
   const setCurrentWorkspace = useSetRecoilState(currentWorkspaceState);
   const setWorkspaces = useSetRecoilState(workspacesState);
 
+  const setDateTimeFormat = useSetRecoilState(dateTimeFormatState);
+
   const setCurrentWorkspaceMember = useSetRecoilState(
     currentWorkspaceMemberState,
   );
@@ -47,6 +55,20 @@ export const UserProviderEffect = () => {
         ...workspaceMember,
         colorScheme: (workspaceMember.colorScheme as ColorScheme) ?? 'Light',
       });
+
+      // TODO: factorize
+      setDateTimeFormat({
+        timeZone:
+          workspaceMember.timeZone && workspaceMember.timeZone !== 'system'
+            ? workspaceMember.timeZone
+            : detectTimeZone(),
+        dateFormat: isDefined(workspaceMember.dateFormat)
+          ? getDateFormatFromWorkspaceDateFormat(workspaceMember.dateFormat)
+          : detectDateFormat(),
+        timeFormat: isDefined(workspaceMember.timeFormat)
+          ? getTimeFormatFromWorkspaceTimeFormat(workspaceMember.timeFormat)
+          : detectTimeFormat(),
+      });
     }
 
     if (isDefined(userWorkspaces)) {
@@ -65,6 +87,7 @@ export const UserProviderEffect = () => {
     setWorkspaces,
     queryData?.currentUser,
     setIsCurrentUserLoaded,
+    setDateTimeFormat,
   ]);
 
   return <></>;

packages/twenty-front/src/modules/users/contexts/UserContext.ts

@@ -0,0 +1,13 @@
+import { DateFormat } from '@/localization/constants/DateFormat';
+import { TimeFormat } from '@/localization/constants/TimeFormat';
+import { createContext } from 'react';
+
+export type UserContextType = {
+  dateFormat: DateFormat;
+  timeFormat: TimeFormat;
+  timeZone: string;
+};
+
+export const UserContext = createContext<UserContextType>(
+  {} as UserContextType,
+);

packages/twenty-front/src/modules/users/graphql/fragments/userQueryFragment.ts

@@ -18,6 +18,9 @@ export const USER_QUERY_FRAGMENT = gql`
       colorScheme
       avatarUrl
       locale
+      timeZone
+      dateFormat
+      timeFormat
     }
     defaultWorkspace {
       id