diff --git a/frontend/src/components/common/AttendeeDetails/index.tsx b/frontend/src/components/common/AttendeeDetails/index.tsx
index 73efd294..b15acff7 100644
--- a/frontend/src/components/common/AttendeeDetails/index.tsx
+++ b/frontend/src/components/common/AttendeeDetails/index.tsx
@@ -4,7 +4,7 @@ import {Attendee} from "../../../types.ts";
import classes from "./AttendeeDetails.module.scss";
import {t} from "@lingui/macro";
import {getAttendeeTicketTitle} from "../../../utilites/tickets.ts";
-import {localeToNameMap, SupportedLocales} from "../../../locales.ts";
+import {getLocaleName, SupportedLocales} from "../../../locales.ts";
export const AttendeeDetails = ({attendee}: { attendee: Attendee }) => {
return (
@@ -54,7 +54,7 @@ export const AttendeeDetails = ({attendee}: { attendee: Attendee }) => {
{t`Language`}
- {localeToNameMap[attendee.locale as SupportedLocales]}
+ {getLocaleName(attendee.locale as SupportedLocales)}
diff --git a/frontend/src/components/common/LanguageSwitcher/index.tsx b/frontend/src/components/common/LanguageSwitcher/index.tsx
index 010cb649..5b0b2fea 100644
--- a/frontend/src/components/common/LanguageSwitcher/index.tsx
+++ b/frontend/src/components/common/LanguageSwitcher/index.tsx
@@ -1,5 +1,11 @@
import {Select} from "@mantine/core";
-import {dynamicActivateLocale, getClientLocale, localeToNameMap, SupportedLocales} from "../../../locales.ts";
+import {
+ dynamicActivateLocale,
+ getClientLocale,
+ getLocaleName,
+ localeToNameMap,
+ SupportedLocales
+} from "../../../locales.ts";
import {t} from "@lingui/macro";
import {IconWorld} from "@tabler/icons-react";
@@ -13,13 +19,14 @@ export const LanguageSwitcher = () => {
required
data={Object.keys(localeToNameMap).map(locale => ({
value: locale,
- label: localeToNameMap[locale as SupportedLocales]
+ label: getLocaleName(locale as SupportedLocales),
}))}
defaultValue={getClientLocale()}
placeholder={t`English`}
onChange={(value) =>
dynamicActivateLocale(value as string).then(() => {
document.cookie = `locale=${value};path=/;max-age=31536000`;
+ // this shouldn't be necessary, but it is due to the wide use of t`...` in the codebase
window.location.reload();
})}
/>
diff --git a/frontend/src/components/modals/CreateAttendeeModal/index.tsx b/frontend/src/components/modals/CreateAttendeeModal/index.tsx
index 27c45cc9..a12e650a 100644
--- a/frontend/src/components/modals/CreateAttendeeModal/index.tsx
+++ b/frontend/src/components/modals/CreateAttendeeModal/index.tsx
@@ -12,7 +12,13 @@ import {showSuccess} from "../../../utilites/notifications.tsx";
import {t, Trans} from "@lingui/macro";
import {useEffect} from "react";
import {InputGroup} from "../../common/InputGroup";
-import {getClientLocale, localeToFlagEmojiMap, localeToNameMap, SupportedLocales} from "../../../locales.ts";
+import {
+ getClientLocale,
+ getLocaleName,
+ localeToFlagEmojiMap,
+ localeToNameMap,
+ SupportedLocales
+} from "../../../locales.ts";
export const CreateAttendeeModal = ({onClose}: GenericModalProps) => {
const {eventId} = useParams();
@@ -128,7 +134,7 @@ export const CreateAttendeeModal = ({onClose}: GenericModalProps) => {
required
data={Object.keys(localeToNameMap).map(locale => ({
value: locale,
- label: localeToFlagEmojiMap[locale as SupportedLocales] + ' ' + localeToNameMap[locale as SupportedLocales]
+ label: localeToFlagEmojiMap[locale as SupportedLocales] + ' ' + getLocaleName(locale as SupportedLocales),
}))}
{...form.getInputProps('locale')}
label={t`Language`}
diff --git a/frontend/src/components/routes/profile/ManageProfile/index.tsx b/frontend/src/components/routes/profile/ManageProfile/index.tsx
index 3de3fb4b..6d4e6863 100644
--- a/frontend/src/components/routes/profile/ManageProfile/index.tsx
+++ b/frontend/src/components/routes/profile/ManageProfile/index.tsx
@@ -13,7 +13,7 @@ import {useCancelEmailChange} from "../../../../mutations/useCancelEmailChange.t
import {useFormErrorResponseHandler} from "../../../../hooks/useFormErrorResponseHandler.tsx";
import {t, Trans} from "@lingui/macro";
import {useResendEmailConfirmation} from "../../../../mutations/useResendEmailConfirmation.ts";
-import {localeToFlagEmojiMap, localeToNameMap, SupportedLocales} from "../../../../locales.ts";
+import {getLocaleName, localeToFlagEmojiMap, localeToNameMap, SupportedLocales} from "../../../../locales.ts";
export const ManageProfile = () => {
const {data: me, isFetching} = useGetMe();
@@ -166,7 +166,7 @@ export const ManageProfile = () => {
required
data={Object.keys(localeToNameMap).map(locale => ({
value: locale,
- label: localeToFlagEmojiMap[locale as SupportedLocales] + ' ' + localeToNameMap[locale as SupportedLocales]
+ label: localeToFlagEmojiMap[locale as SupportedLocales] + ' ' + getLocaleName(locale as SupportedLocales),
}))}
{...profileForm.getInputProps('locale')}
label={t`Language`}
diff --git a/frontend/src/locales.ts b/frontend/src/locales.ts
index ccb65bef..9a522e89 100644
--- a/frontend/src/locales.ts
+++ b/frontend/src/locales.ts
@@ -38,15 +38,19 @@ export const localeToFlagEmojiMap: Record = {
};
export const localeToNameMap: Record = {
- en: t`English`,
- de: t`German`,
- fr: t`French`,
- pt: t`Portuguese`,
- es: t`Spanish`,
- "zh-cn": t`Chinese`,
- "pt-br": t`Portuguese (Brazil)`,
+ en: `English`,
+ de: `German`,
+ fr: `French`,
+ pt: `Portuguese`,
+ es: `Spanish`,
+ "zh-cn": `Chinese`,
+ "pt-br": `Portuguese (Brazil)`,
};
+export const getLocaleName = (locale: SupportedLocales) => {
+ return t`${localeToNameMap[locale]}`
+}
+
export const getClientLocale = () => {
if (typeof window !== "undefined") {
const storedLocale = document