fix: adjust update current user and fix mismatching formats (AppFlowy-IO#65)

richardshiue · web-flow · commit af7c13dbfac6 · 2025-09-11T17:26:36.000+08:00
* chore: expose method to update indexed db

* fix: revert translation
diff --git a/cypress/e2e/account/update-user-profile.cy.ts b/cypress/e2e/account/update-user-profile.cy.ts
@@ -50,21 +50,21 @@ describe('Update User Profile', () => {
       cy.log('Step 5: Verifying Account Settings dialog opened');
       cy.get('[data-testid="account-settings-dialog"]', { timeout: 10000 }).should('be.visible');
 
-      // Check initial date format (should be Local/default)
+      // Check initial date format (should be Month/Day/Year)
       cy.log('Step 6: Checking initial date format');
       cy.get('[data-testid="date-format-dropdown"]').should('be.visible');
 
-      // Test Date Format change - select US format (Month/Day/Year)
-      cy.log('Step 7: Testing Date Format change to US format');
+      // Test Date Format change - select Year/Month/Day
+      cy.log('Step 7: Testing Date Format change to Year/Month/Day');
       cy.get('[data-testid="date-format-dropdown"]').click();
       cy.wait(500);
 
-      // Select US format (value 1) which is Month/Day/Year
+      // Select US format (value 1) which is Year/Month/Day
       cy.get('[data-testid="date-format-1"]').should('be.visible').click();
       cy.wait(3000); // Wait for API call to complete
 
-      // Verify the dropdown now shows US format
-      cy.get('[data-testid="date-format-dropdown"]').should('contain.text', 'Month/Day/Year');
+      // Verify the dropdown now shows Year/Month/Day
+      cy.get('[data-testid="date-format-dropdown"]').should('contain.text', 'Year/Month/Day');
 
       // Test Time Format change
       cy.log('Step 8: Testing Time Format change');
@@ -93,7 +93,7 @@ describe('Update User Profile', () => {
       cy.log('Step 10: Verifying all settings are showing correctly');
 
       // Verify all dropdowns still show the selected values
-      cy.get('[data-testid="date-format-dropdown"]').should('contain.text', 'Month/Day/Year');
+      cy.get('[data-testid="date-format-dropdown"]').should('contain.text', 'Year/Month/Day');
       cy.get('[data-testid="time-format-dropdown"]').should('contain.text', '24');
       cy.get('[data-testid="start-week-on-dropdown"]').should('contain.text', 'Monday');
 
diff --git a/src/@types/translations/en.json b/src/@types/translations/en.json
@@ -1686,8 +1686,8 @@
       "isRange": "End date",
       "dateFormatFriendly": "Month Day, Year",
       "dateFormatISO": "Year-Month-Day",
-      "dateFormatLocal": "Local",
-      "dateFormatUS": "Month/Day/Year",
+      "dateFormatLocal": "Month/Day/Year",
+      "dateFormatUS": "Year/Month/Day",
       "dateFormatDayMonthYear": "Day/Month/Year",
       "timeFormat": "Time format",
       "invalidTimeFormat": "Invalid format",
diff --git a/src/components/app/workspaces/AccountSettings.tsx b/src/components/app/workspaces/AccountSettings.tsx
@@ -6,7 +6,7 @@ import { useTranslation } from 'react-i18next';
 import { DateFormat, TimeFormat } from '@/application/types';
 import { MetadataKey } from '@/application/user-metadata';
 import { ReactComponent as ChevronDownIcon } from '@/assets/icons/alt_arrow_down.svg';
-import { useCurrentUser, useService } from '@/components/main/app.hooks';
+import { useAppConfig } from '@/components/main/app.hooks';
 import { Dialog, DialogContent, DialogDescription, DialogTitle, DialogTrigger } from '@/components/ui/dialog';
 import {
   DropdownMenu,
@@ -19,8 +19,7 @@ import { cn } from '@/lib/utils';
 
 export function AccountSettings({ children }: { children?: React.ReactNode }) {
   const { t } = useTranslation();
-  const currentUser = useCurrentUser();
-  const service = useService();
+  const { currentUser, updateCurrentUser, service } = useAppConfig();
   const [open, setIsOpen] = useState(false);
 
   const [dateFormat, setDateFormat] = useState(
@@ -50,35 +49,40 @@ export function AccountSettings({ children }: { children?: React.ReactNode }) {
   const handleSelectDateFormat = useCallback(
     async (dateFormat: number) => {
       setDateFormat(dateFormat);
-      if (!currentUser?.metadata) return;
 
-      metadataUpdateRef.current = { ...currentUser.metadata, [MetadataKey.DateFormat]: dateFormat };
+      metadataUpdateRef.current = {
+        ...metadataUpdateRef?.current,
+        [MetadataKey.DateFormat]: dateFormat,
+      };
       await debounceUpdateProfile();
     },
-    [currentUser, debounceUpdateProfile]
+    [debounceUpdateProfile]
   );
 
   const handleSelectTimeFormat = useCallback(
     async (timeFormat: number) => {
       setTimeFormat(timeFormat);
-      if (!currentUser?.metadata) return;
 
-      metadataUpdateRef.current = { ...currentUser.metadata, [MetadataKey.TimeFormat]: timeFormat };
+      metadataUpdateRef.current = {
+        ...metadataUpdateRef?.current,
+        [MetadataKey.TimeFormat]: timeFormat,
+      };
       await debounceUpdateProfile();
     },
-    [currentUser, debounceUpdateProfile]
+    [debounceUpdateProfile]
   );
 
   const handleSelectStartWeekOn = useCallback(
     async (startWeekOn: number) => {
       setStartWeekOn(startWeekOn);
 
-      if (!currentUser?.metadata) return;
-
-      metadataUpdateRef.current = { ...currentUser.metadata, [MetadataKey.StartWeekOn]: startWeekOn };
+      metadataUpdateRef.current = {
+        ...metadataUpdateRef?.current,
+        [MetadataKey.StartWeekOn]: startWeekOn,
+      };
       await debounceUpdateProfile();
     },
-    [currentUser, debounceUpdateProfile]
+    [debounceUpdateProfile]
   );
 
   const onOpenChange = useCallback(
@@ -89,13 +93,22 @@ export function AccountSettings({ children }: { children?: React.ReactNode }) {
         setDateFormat(Number(user?.metadata?.[MetadataKey.DateFormat] as DateFormat) || DateFormat.Local);
         setTimeFormat(Number(user?.metadata?.[MetadataKey.TimeFormat] as TimeFormat) || TimeFormat.TwelveHour);
         setStartWeekOn(Number(user?.metadata?.[MetadataKey.StartWeekOn]) || 0);
+
+        metadataUpdateRef.current = {
+          ...user?.metadata,
+        };
       } else {
-        void service?.getCurrentUser();
+        if (currentUser) {
+          void updateCurrentUser({
+            ...currentUser,
+            metadata: metadataUpdateRef.current || currentUser.metadata,
+          });
+        }
       }
 
       setIsOpen(isOpen);
     },
-    [service]
+    [currentUser, service, updateCurrentUser]
   );
 
   if (!currentUser || !service) {
diff --git a/src/components/main/AppConfig.tsx b/src/components/main/AppConfig.tsx
@@ -7,6 +7,7 @@ import { getService } from '@/application/services';
 import { AFServiceConfig } from '@/application/services/services.type';
 import { EventType, on } from '@/application/session';
 import { getTokenParsed, isTokenValid } from '@/application/session/token';
+import { User } from '@/application/types';
 import { MetadataKey } from '@/application/user-metadata';
 import { createInitialTimezone, UserTimezone } from '@/application/user-timezone.types';
 import { InfoSnackbarProps } from '@/components/_shared/notify';
@@ -33,6 +34,19 @@ function AppConfig({ children }: { children: React.ReactNode }) {
   const [loginOpen, setLoginOpen] = React.useState(false);
   const [loginCompletedRedirectTo, setLoginCompletedRedirectTo] = React.useState<string>('');
 
+  const updateCurrentUser = useCallback(
+    async (user: User) => {
+      if (!service || !userId) return;
+
+      try {
+        await db.users.put(user, user.uuid);
+      } catch (e) {
+        console.error(e);
+      }
+    },
+    [service, userId]
+  );
+
   const openLoginModal = useCallback((redirectTo?: string) => {
     setLoginOpen(true);
     setLoginCompletedRedirectTo(redirectTo || window.location.href);
@@ -176,6 +190,7 @@ function AppConfig({ children }: { children: React.ReactNode }) {
         service,
         isAuthenticated,
         currentUser,
+        updateCurrentUser,
         openLoginModal,
       }}
     >
diff --git a/src/components/main/app.hooks.ts b/src/components/main/app.hooks.ts
@@ -19,11 +19,28 @@ export const AFConfigContext = createContext<
     service: AFService | undefined;
     isAuthenticated: boolean;
     currentUser?: User;
+    updateCurrentUser: (user: User) => Promise<void>;
     openLoginModal: (redirectTo?: string) => void;
   }
   | undefined
 >(undefined);
 
+export function useAppConfig() {
+  const context = useContext(AFConfigContext);
+
+  if (!context) {
+    throw new Error('useAppConfig must be used within a AFConfigContext');
+  }
+
+  return {
+    service: context.service,
+    isAuthenticated: context.isAuthenticated,
+    currentUser: context.currentUser,
+    updateCurrentUser: context.updateCurrentUser,
+    openLoginModal: context.openLoginModal,
+  };
+}
+
 export function useCurrentUser() {
   const context = useContext(AFConfigContext);
 
@@ -42,4 +59,4 @@ export function useService() {
   }
 
   return context.service;
-}
+}
