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