110 lines
3.2 KiB
TypeScript
110 lines
3.2 KiB
TypeScript
import React from 'react';
|
|
import { Check, Languages } from 'lucide-react';
|
|
import { useTranslation } from 'react-i18next';
|
|
|
|
import { Button } from '@/components/ui/button';
|
|
import {
|
|
DropdownMenu,
|
|
DropdownMenuContent,
|
|
DropdownMenuItem,
|
|
DropdownMenuTrigger,
|
|
} from '@/components/ui/dropdown-menu';
|
|
|
|
import i18n from '../i18n';
|
|
|
|
type SupportedLocale = 'de' | 'en';
|
|
|
|
const SUPPORTED_LANGUAGES: Array<{ code: SupportedLocale; labelKey: string }> = [
|
|
{ code: 'de', labelKey: 'language.de' },
|
|
{ code: 'en', labelKey: 'language.en' },
|
|
];
|
|
|
|
function getCsrfToken(): string {
|
|
return document.querySelector<HTMLMetaElement>('meta[name=\"csrf-token\"]')?.content ?? '';
|
|
}
|
|
|
|
async function persistLocale(locale: SupportedLocale): Promise<void> {
|
|
const response = await fetch('/set-locale', {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
'X-CSRF-TOKEN': getCsrfToken(),
|
|
Accept: 'application/json',
|
|
'X-Requested-With': 'XMLHttpRequest',
|
|
},
|
|
body: JSON.stringify({ locale }),
|
|
credentials: 'include',
|
|
});
|
|
|
|
if (!response.ok) {
|
|
throw new Error(`locale update failed with status ${response.status}`);
|
|
}
|
|
}
|
|
|
|
export function LanguageSwitcher() {
|
|
const { t } = useTranslation('common');
|
|
const [pendingLocale, setPendingLocale] = React.useState<SupportedLocale | null>(null);
|
|
|
|
const currentLocale = (i18n.language || document.documentElement.lang || 'de') as SupportedLocale;
|
|
|
|
const changeLanguage = React.useCallback(
|
|
async (locale: SupportedLocale) => {
|
|
if (locale === currentLocale || pendingLocale) {
|
|
return;
|
|
}
|
|
|
|
setPendingLocale(locale);
|
|
try {
|
|
await persistLocale(locale);
|
|
await i18n.changeLanguage(locale);
|
|
document.documentElement.setAttribute('lang', locale);
|
|
} catch (error) {
|
|
if (import.meta.env.DEV) {
|
|
// eslint-disable-next-line no-console
|
|
console.error('Failed to switch language', error);
|
|
}
|
|
} finally {
|
|
setPendingLocale(null);
|
|
}
|
|
},
|
|
[currentLocale, pendingLocale]
|
|
);
|
|
|
|
return (
|
|
<DropdownMenu>
|
|
<DropdownMenuTrigger asChild>
|
|
<Button
|
|
variant="outline"
|
|
size="sm"
|
|
className="border-brand-rose-soft text-brand-rose hover:bg-brand-rose-soft/40"
|
|
aria-label={t('app.languageSwitch')}
|
|
>
|
|
<Languages className="mr-2 h-4 w-4" />
|
|
<span className="hidden sm:inline">{t('app.languageSwitch')}</span>
|
|
</Button>
|
|
</DropdownMenuTrigger>
|
|
<DropdownMenuContent align="end">
|
|
{SUPPORTED_LANGUAGES.map(({ code, labelKey }) => {
|
|
const isActive = currentLocale === code;
|
|
const isPending = pendingLocale === code;
|
|
|
|
return (
|
|
<DropdownMenuItem
|
|
key={code}
|
|
onSelect={(event) => {
|
|
event.preventDefault();
|
|
changeLanguage(code);
|
|
}}
|
|
className="flex items-center justify-between gap-3"
|
|
disabled={isPending}
|
|
>
|
|
<span>{t(labelKey)}</span>
|
|
{(isActive || isPending) && <Check className="h-4 w-4 text-brand-rose" />}
|
|
</DropdownMenuItem>
|
|
);
|
|
})}
|
|
</DropdownMenuContent>
|
|
</DropdownMenu>
|
|
);
|
|
}
|