Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 | 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 27x 27x 27x 27x 27x 27x 27x 27x 27x 27x 9x 27x 27x 27x 27x 27x 27x 27x 27x 27x 27x 27x 9x 9x 9x 6x 9x 9x 9x 9x 9x 9x 9x 9x 9x 9x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 9x 8x 8x 8x 9x 9x 9x 9x 27x 27x 27x 27x 27x 27x 27x 27x 27x 27x 27x 27x 27x 27x 10x 10x 10x 10x 10x 1x 1x 1x 9x 9x 9x 9x 9x 10x 10x 10x 27x 27x 27x 27x 27x 27x 27x 27x 27x 27x 27x 27x 27x 27x 27x 27x 27x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 27x 27x 27x 27x 27x 27x 27x 27x 27x 27x 1x 1x 1x 1x 1x 1x 27x 27x 27x 27x 27x 27x 27x 27x 27x 27x 27x 27x 27x 27x 27x 27x 27x 27x 27x 27x 27x 1x 1x | /**
* @file SettingsContext.tsx
* @description Settings context provider for application-wide settings
*
* Manages user preferences (date/number formats, table density) and system info.
* Loads preferences from localStorage on mount and fetches system info from backend.
* Synchronizes preferences with i18n language changes.
*
* Usage:
* ```tsx
* <SettingsProvider>
* <App />
* </SettingsProvider>
* ```
*/
import * as React from 'react';
import { useTranslation } from 'react-i18next';
import { getSystemInfo } from '../../utils/systemInfo.js';
import {
SettingsContext,
type SettingsContextType,
type UserPreferences,
type SystemInfo,
} from './SettingsContext.types';
import {
getDefaultPreferences,
loadPreferencesFromStorage,
savePreferencesToStorage,
clearPreferencesFromStorage,
} from './SettingsStorage';
export type { DateFormat, NumberFormat, TableDensity, UserPreferences, SystemInfo, SettingsContextType } from './SettingsContext.types';
export { SettingsContext };
/**
* SettingsProvider component
*
* Provides global settings context to the application.
* Responsibilities:
* - Load user preferences from localStorage on mount
* - Fetch system info from backend on mount (with fallbacks)
* - Sync preferences with i18n language changes
* - Persist preference changes to localStorage
* - Provide reset-to-defaults functionality
*
* @param children - React components to wrap
* @returns JSX with SettingsContext.Provider wrapping children
*
* @example
* ```tsx
* import { SettingsProvider } from './context/settings';
*
* export default function App() {
* return (
* <SettingsProvider>
* <Router />
* </SettingsProvider>
* );
* }
* ```
*/
export const SettingsProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
const { i18n } = useTranslation('common');
// Track whether system info is being fetched from backend
const [isLoading, setIsLoading] = React.useState(true);
// System information from backend (null while loading)
const [systemInfo, setSystemInfo] = React.useState<SystemInfo | null>(null);
// User preferences with language-aware defaults on first load
const [userPreferences, setUserPreferencesState] = React.useState<UserPreferences>(() =>
loadPreferencesFromStorage(i18n.language)
);
/**
* Fetch system information from backend on component mount
*
* Runs once when provider mounts. If fetch fails, uses sensible fallback values
* to ensure systemInfo is always available (never null).
*
* This prevents the app from breaking if backend is temporarily down.
*/
React.useEffect(() => {
const fetchSystemInfo = async () => {
try {
const data = await getSystemInfo();
const info: SystemInfo = {
database: data.database ?? 'Unknown',
version: data.version ?? '1.0.0',
environment: data.environment ?? 'production',
apiVersion: data.apiVersion ?? 'v1',
buildDate: data.buildDate ?? 'Unknown',
uptime: data.uptime ?? 'Unknown',
status: (data.status ?? 'UNKNOWN') as 'ONLINE' | 'DEGRADED' | 'OFFLINE' | 'UNKNOWN',
};
setSystemInfo(info);
} catch (error) {
// Log warning but continue - graceful degradation if backend is down
console.warn('Failed to fetch system info:', error);
// Use fallback values so systemInfo is never null
setSystemInfo({
database: 'Oracle ADB',
version: 'dev',
environment: 'production',
apiVersion: 'unknown',
buildDate: 'unknown',
uptime: '0h',
status: 'UNKNOWN',
});
} finally {
// Mark loading complete regardless of success/failure
setIsLoading(false);
}
};
// Only fetch once on mount
fetchSystemInfo();
}, []);
/**
* Sync user preferences with i18n language changes
*
* When user changes language, update date/number format defaults to match
* the new language while preserving table density preference.
*
* Example: Changing from German to English updates:
* - dateFormat: DD.MM.YYYY → MM/DD/YYYY
* - numberFormat: DE → EN_US
* - tableDensity: (unchanged)
*/
React.useEffect(() => {
setUserPreferencesState((prev) => {
const updated = { ...prev };
// If language changed to German, ensure formats match German locale
if (i18n.language.startsWith('de')) {
if (updated.dateFormat === 'MM/DD/YYYY') updated.dateFormat = 'DD.MM.YYYY';
if (updated.numberFormat === 'EN_US') updated.numberFormat = 'DE';
}
// If language changed to English, ensure formats match English locale
else {
if (updated.dateFormat === 'DD.MM.YYYY') updated.dateFormat = 'MM/DD/YYYY';
if (updated.numberFormat === 'DE') updated.numberFormat = 'EN_US';
}
return updated;
});
}, [i18n.language]);
/**
* Update user preferences and persist to localStorage
*
* Merges the new preferences with existing ones (partial update)
* and automatically saves to localStorage.
*
* @param prefs - Partial preferences to update
*
* @example
* ```tsx
* // Only updates dateFormat, preserves other settings
* setUserPreferences({ dateFormat: 'YYYY-MM-DD' });
* ```
*/
const setUserPreferences = (prefs: Partial<UserPreferences>) => {
setUserPreferencesState((prev) => {
// Merge new preferences with existing ones
const updated = { ...prev, ...prefs };
// Persist to localStorage (logs warning on failure, non-blocking)
savePreferencesToStorage(updated);
return updated;
});
};
/**
* Reset all preferences to language-appropriate defaults
*
* Clears localStorage entirely and resets preferences to defaults
* for the current i18n language.
*
* Useful for troubleshooting and user-facing "Reset" buttons.
*/
const resetToDefaults = () => {
// Clear entire localStorage entry
clearPreferencesFromStorage();
// Reset state to fresh defaults for current language
setUserPreferencesState(getDefaultPreferences(i18n.language));
};
/**
* Construct the context value object
*
* This is passed to all consumers via useSettings() hook.
* Contains current state and all control functions.
*/
const value: SettingsContextType = {
userPreferences, // Current date/number formats, table density
systemInfo, // Backend system info or fallback values
setUserPreferences, // Update and persist preferences
resetToDefaults, // Clear storage and restore defaults
isLoading, // Whether systemInfo fetch is in progress
};
return (
<SettingsContext.Provider value={value}>
{children}
</SettingsContext.Provider>
);
};
export default SettingsProvider;
|