Add user settings hook

src/hooks/useUserSettings.tsx

@@ -0,0 +1,78 @@
+import React, { type FC, type PropsWithChildren, createContext, useCallback, useContext, useEffect, useMemo, useState } from 'react';
+
+import { FALLBACK_CULTURE } from 'lib/globalize';
+import { currentSettings as userSettings } from 'scripts/settings/userSettings';
+import Events, { type Event } from 'utils/events';
+
+import { useApi } from './useApi';
+
+interface UserSettings {
+    theme?: string
+    dashboardTheme?: string
+    dateTimeLocale?: string
+    language?: string
+}
+
+// NOTE: This is an incomplete list of only the settings that are currently being used
+const UserSettingField = {
+    // Theme settings
+    Theme: 'appTheme',
+    DashboardTheme: 'dashboardTheme',
+    // Locale settings
+    DateTimeLocale: 'datetimelocale',
+    Language: 'language'
+};
+
+const UserSettingsContext = createContext<UserSettings>({});
+
+export const useUserSettings = () => useContext(UserSettingsContext);
+
+export const UserSettingsProvider: FC<PropsWithChildren<unknown>> = ({ children }) => {
+    const [ theme, setTheme ] = useState<string>();
+    const [ dashboardTheme, setDashboardTheme ] = useState<string>();
+    const [ dateTimeLocale, setDateTimeLocale ] = useState<string>();
+    const [ language, setLanguage ] = useState<string | undefined>(FALLBACK_CULTURE);
+
+    const { user } = useApi();
+
+    const context = useMemo<UserSettings>(() => ({
+        theme,
+        dashboardTheme,
+        dateTimeLocale,
+        locale: language
+    }), [ theme, dashboardTheme, dateTimeLocale, language ]);
+
+    // Update the values of the user settings
+    const updateUserSettings = useCallback(() => {
+        setTheme(userSettings.theme());
+        setDashboardTheme(userSettings.dashboardTheme());
+        setDateTimeLocale(userSettings.dateTimeLocale());
+        setLanguage(userSettings.language());
+    }, []);
+
+    const onUserSettingsChange = useCallback((_e: Event, name?: string) => {
+        if (name && Object.values(UserSettingField).includes(name)) {
+            updateUserSettings();
+        }
+    }, [ updateUserSettings ]);
+
+    // Handle user settings changes
+    useEffect(() => {
+        Events.on(userSettings, 'change', onUserSettingsChange);
+
+        return () => {
+            Events.off(userSettings, 'change', onUserSettingsChange);
+        };
+    }, [ onUserSettingsChange ]);
+
+    // Update the settings if the user changes
+    useEffect(() => {
+        updateUserSettings();
+    }, [ updateUserSettings, user ]);
+
+    return (
+        <UserSettingsContext.Provider value={context}>
+            {children}
+        </UserSettingsContext.Provider>
+    );
+};

src/hooks/useUserTheme.ts

@@ -1,57 +1,12 @@
-import { useCallback, useEffect, useState } from 'react';
-
-import { currentSettings as userSettings } from 'scripts/settings/userSettings';
-import Events, { type Event } from 'utils/events';
-
-import { useApi } from './useApi';
 import { useThemes } from './useThemes';
-
-const THEME_FIELD_NAMES = [ 'appTheme', 'dashboardTheme' ];
+import { useUserSettings } from './useUserSettings';
 
 export function useUserTheme() {
-    const [ theme, setTheme ] = useState<string>();
-    const [ dashboardTheme, setDashboardTheme ] = useState<string>();
-
-    const { user } = useApi();
+    const { theme, dashboardTheme } = useUserSettings();
     const { defaultTheme } = useThemes();
 
-    useEffect(() => {
-        if (defaultTheme) {
-            if (!theme) setTheme(defaultTheme.id);
-            if (!dashboardTheme) setDashboardTheme(defaultTheme.id);
-        }
-    }, [ dashboardTheme, defaultTheme, theme ]);
-
-    // Update the current themes with values from user settings
-    const updateThemesFromSettings = useCallback(() => {
-        const userTheme = userSettings.theme();
-        if (userTheme) setTheme(userTheme);
-        const userDashboardTheme = userSettings.dashboardTheme();
-        if (userDashboardTheme) setDashboardTheme(userDashboardTheme);
-    }, []);
-
-    const onUserSettingsChange = useCallback((_e: Event, name?: string) => {
-        if (name && THEME_FIELD_NAMES.includes(name)) {
-            updateThemesFromSettings();
-        }
-    }, [ updateThemesFromSettings ]);
-
-    // Handle user settings changes
-    useEffect(() => {
-        Events.on(userSettings, 'change', onUserSettingsChange);
-
-        return () => {
-            Events.off(userSettings, 'change', onUserSettingsChange);
-        };
-    }, [ onUserSettingsChange ]);
-
-    // Update the theme if the user changes
-    useEffect(() => {
-        updateThemesFromSettings();
-    }, [ updateThemesFromSettings, user ]);
-
     return {
-        theme,
-        dashboardTheme
+        theme: theme || defaultTheme?.id,
+        dashboardTheme: dashboardTheme || defaultTheme?.id
     };
 }