Merge pull request #68 from HiEventsDev/develop

Fix language switcher translations

Author: daveearley

Diff for: 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`}
                 </div>
                 <div className={classes.amount}>
-                    {localeToNameMap[attendee.locale as SupportedLocales]}
+                    {getLocaleName(attendee.locale as SupportedLocales)}
                 </div>
             </div>
         </Card>

Diff for: 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 for: 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 for: 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 for: frontend/src/locales.ts

@@ -38,15 +38,19 @@ export const localeToFlagEmojiMap: Record<SupportedLocales, string> = {
 };
 
 export const localeToNameMap: Record<SupportedLocales, string> = {
-    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