Merge pull request #37 from dsaltares/feat/32

feat: 32 - correct date localisation depending on system language

src/App.tsx

@@ -5,8 +5,6 @@ import '@fontsource/roboto-mono/700.css';
 import '@styles/global.css';
 import 'file-icon-vectors/dist/file-icon-classic.min.css';
 import CssBaseline from '@mui/material/CssBaseline';
-import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
-import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFnsV3';
 import ThemeProvider from '@mui/material/styles/ThemeProvider';
 import { createHashRouter, RouterProvider } from 'react-router-dom';
 import Stack from '@mui/material/Stack';
@@ -24,6 +22,7 @@ import InsightsPage from '@routes/InsightsPage';
 import BudgetPage from '@routes/BudgetPage';
 import ExchangeRatesPage from '@routes/ExchangeRatesPage';
 import SettingsPage from '@routes/SettingsPage';
+import LocalizationProvider from '@components/LocalizationProvider';
 
 const router = createHashRouter([
   {
@@ -46,7 +45,7 @@ const router = createHashRouter([
 
 export default function App() {
   return (
-    <LocalizationProvider dateAdapter={AdapterDateFns}>
+    <LocalizationProvider>
       <CssBaseline />
       <ThemeProvider theme={theme}>
         <SnackbarProvider

src/components/LocalizationProvider.tsx

@@ -0,0 +1,42 @@
+import { LocalizationProvider as LocalizationProviderBase } from '@mui/x-date-pickers/LocalizationProvider';
+import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFnsV3';
+import type { PropsWithChildren } from 'react';
+import { enUS } from 'date-fns/locale/en-US';
+import { enGB } from 'date-fns/locale/en-GB';
+import { fr } from 'date-fns/locale/fr';
+import { de } from 'date-fns/locale/de';
+import { es } from 'date-fns/locale/es';
+import { ro } from 'date-fns/locale/ro';
+import type { Locale } from 'date-fns';
+
+const LocaleMap: Record<string, Locale | undefined> = {
+  'en-US': enUS,
+  'en-GB': enGB,
+  fr: fr,
+  de: de,
+  es: es,
+  ro: ro,
+};
+
+export default function LocalizationProvider({ children }: PropsWithChildren) {
+  return (
+    <LocalizationProviderBase
+      dateAdapter={AdapterDateFns}
+      adapterLocale={getLocale()}
+    >
+      {children}
+    </LocalizationProviderBase>
+  );
+}
+
+function getLocale() {
+  const locale = navigator.language;
+  if (locale in LocaleMap) {
+    return LocaleMap[locale];
+  }
+  const language = locale.split('-')[0];
+  if (language in LocaleMap) {
+    return LocaleMap[language];
+  }
+  return enGB;
+}