feat: translate strings from a11ycloud

Author: kriskbx

src/components/App/HeadMetaTags.tsx

@@ -3,7 +3,7 @@ import { encode } from "js-base64";
 import Head from "next/head";
 import { useAppContext } from "../../lib/context/AppContext";
 import useHostnameContext from "../../lib/context/HostnameContext";
-import { translatedStringFromObject } from "../../lib/i18n/translatedStringFromObject";
+import { useTranslatedStringFromObject } from "../../lib/i18n/useTranslatedStringFromObject";
 import { getProductTitle } from "../../lib/model/ac/ClientSideConfiguration";
 import FacebookMeta from "./FacebookMeta";
 import OpenGraph from "./OpenGraph";
@@ -17,8 +17,8 @@ export default function HeadMetaTags() {
     description: undefined,
   };
   const { twitter, facebook } = meta || {};
-  const translatedDescription = translatedStringFromObject(description);
-  const translatedProductName = translatedStringFromObject(productName);
+  const translatedDescription = useTranslatedStringFromObject(description);
+  const translatedProductName = useTranslatedStringFromObject(productName);
   const pageTitle = translatedProductName;
   const facebookMetaData = { ...facebook, imageWidth: 0, imageHeight: 0 };
   const hostName = useHostnameContext();
@@ -53,7 +53,7 @@ export default function HeadMetaTags() {
 
       {/* Misc */}
       <meta
-        content={translatedStringFromObject(description)}
+        content={useTranslatedStringFromObject(description)}
         name="description"
         key="description"
       />

src/components/CombinedFeaturePanel/components/AccessibilitySection/PlaceAccessibility/AccessibilityDetailsTree.tsx

@@ -5,7 +5,7 @@ import isPlainObject from "lodash/isPlainObject";
 import * as React from "react";
 import { type FC, Fragment } from "react";
 import styled from "styled-components";
-import { translatedStringFromObject } from "../../../../../lib/i18n/translatedStringFromObject";
+import { useTranslatedStringFromObject } from "../../../../../lib/i18n/useTranslatedStringFromObject";
 import type IAccessibilityAttribute from "../../../../../lib/model/ac/IAccessibilityAttribute";
 import { cx } from "../../../../../lib/util/cx";
 
@@ -26,7 +26,9 @@ const formatName = (
 ): string => {
   const string =
     (accessibilityAttributes &&
-      translatedStringFromObject(accessibilityAttributes.get(name)?.label)) ||
+      useTranslatedStringFromObject(
+        accessibilityAttributes.get(name)?.label,
+      )) ||
     humanizeString(name);
   return string.replace(/^Rating /, "");
 };

src/components/MappingEvents/MappingEventMetadata.tsx

@@ -1,7 +1,7 @@
 import Head from "next/head";
 import { useAppContext } from "../../lib/context/AppContext";
 import useHostnameContext from "../../lib/context/HostnameContext";
-import { translatedStringFromObject } from "../../lib/i18n/translatedStringFromObject";
+import { useTranslatedStringFromObject } from "../../lib/i18n/useTranslatedStringFromObject";
 import { buildFullImageUrl } from "../../lib/model/ac/Image";
 import type { MappingEvent } from "../../lib/model/ac/MappingEvent";
 import FacebookMeta from "../App/FacebookMeta";
@@ -14,7 +14,7 @@ export function MappingEventMetadata({
   const { clientSideConfiguration } = useAppContext();
   const productName =
     clientSideConfiguration?.textContent?.product?.name || "Wheelmap";
-  const translatedProductName = translatedStringFromObject(productName);
+  const translatedProductName = useTranslatedStringFromObject(productName);
 
   const pageTitle = translatedProductName
     ? `${mappingEvent.name} - ${translatedProductName}`

src/components/NodeToolbar/Equipment/getEquipmentInfoDescription.ts

@@ -1,6 +1,6 @@
 import type { EquipmentInfo } from "@sozialhelden/a11yjson";
 import type { LocalizedString } from "../../../lib/i18n/LocalizedString";
-import { translatedStringFromObject } from "../../../lib/i18n/translatedStringFromObject";
+import { useTranslatedStringFromObject } from "../../../lib/i18n/useTranslatedStringFromObject";
 
 export default function getEquipmentInfoDescription(
   equipmentInfo: EquipmentInfo | null | undefined,
@@ -24,5 +24,5 @@ export default function getEquipmentInfoDescription(
       break;
     }
   }
-  return description && translatedStringFromObject(description);
+  return description && useTranslatedStringFromObject(description);
 }

src/components/Onboarding/OnboardingStep.tsx

@@ -13,7 +13,7 @@ import { t } from "@transifex/native";
 import * as React from "react";
 import { useEffect } from "react";
 import { AppContext } from "../../lib/context/AppContext";
-import { translatedStringFromObject } from "../../lib/i18n/translatedStringFromObject";
+import { useTranslatedStringFromObject } from "../../lib/i18n/useTranslatedStringFromObject";
 import type { YesNoLimitedUnknown } from "../../lib/model/ac/Feature";
 import {
   accessibilityColor as accessibilityColorName,
@@ -29,7 +29,7 @@ export const OnboardingStep: React.FC<{
   onClose?: () => unknown;
 }> = ({ onClose = () => {} }) => {
   const { clientSideConfiguration } = React.useContext(AppContext) ?? {};
-  const headerMarkdown = translatedStringFromObject(
+  const headerMarkdown = useTranslatedStringFromObject(
     clientSideConfiguration?.textContent?.onboarding?.headerMarkdown,
   );
 

src/components/Onboarding/getProductName.ts

@@ -1,10 +1,10 @@
 import { t } from "@transifex/native";
-import { translatedStringFromObject } from "../../lib/i18n/translatedStringFromObject";
+import { useTranslatedStringFromObject } from "../../lib/i18n/useTranslatedStringFromObject";
 
 // select a white label product name
 export const getProductName = (
   clientSideConfiguration: ClientSideConfiguration | undefined,
 ) =>
-  translatedStringFromObject(
+  useTranslatedStringFromObject(
     clientSideConfiguration?.textContent?.product?.name,
   ) || "Wheelmap";

src/components/TopBar.tsx

@@ -1,7 +1,7 @@
 import { Box, Flex, Text } from "@radix-ui/themes";
 import styled from "styled-components";
 import NeedsPicker from "~/domains/needs/components/NeedsPicker";
-import { translatedStringFromObject } from "~/lib/i18n/translatedStringFromObject";
+import { useTranslatedStringFromObject } from "~/lib/i18n/useTranslatedStringFromObject";
 import type { ClientSideConfiguration } from "~/lib/model/ac/ClientSideConfiguration";
 import Logo from "./TopBar/Logo";
 import Navigation from "./TopBar/Navigation";
@@ -29,7 +29,7 @@ export default function TopBar({
 }: {
   clientSideConfiguration: ClientSideConfiguration;
 }) {
-  const claim = translatedStringFromObject(textContent?.product?.claim);
+  const claim = useTranslatedStringFromObject(textContent?.product?.claim);
 
   return (
     <StyledTopBar role="banner">

src/components/TopBar/Navigation/AppLink.tsx

@@ -50,6 +50,8 @@ export default function AppLink({
     Element = ErroneousLink;
   }
 
+  console.log("Element", label);
+
   return (
     Element && (
       <Element {...{ label, badgeLabel, url, asMenuItem, buttonProps }} />

src/lib/i18n/translatedStringFromObject.ts src/lib/i18n/useTranslatedStringFromObject.ts

@@ -1,10 +1,10 @@
 import compact from "lodash/compact";
 import uniq from "lodash/uniq";
+import { useCurrentLanguageTagStrings } from "~/lib/context/LanguageTagContext";
 import type { LocalizedString } from "./LocalizedString";
-import { currentLocales } from "./i18n";
 import { normalizeLanguageCode } from "./normalizeLanguageCode";
 
-export function translatedStringFromObject(
+export function useTranslatedStringFromObject(
   string: LocalizedString | null | undefined,
 ): string | undefined {
   if (typeof string === "undefined" || string === null) {
@@ -15,9 +15,7 @@ export function translatedStringFromObject(
   if (typeof string === "object") {
     const firstAvailableLocale = Object.keys(string)[0];
 
-    const normalizedRequestedLanguageTags = currentLocales.map(
-      (locale) => locale.transifexLanguageIdentifier,
-    );
+    const normalizedRequestedLanguageTags = useCurrentLanguageTagStrings();
 
     const normalizedLanguageTags = normalizedRequestedLanguageTags.map(
       normalizeLanguageCode,

src/lib/model/ac/ClientSideConfiguration.ts

@@ -1,5 +1,5 @@
 import type { LocalizedString } from "@sozialhelden/a11yjson";
-import { translatedStringFromObject } from "../../i18n/translatedStringFromObject";
+import { useTranslatedStringFromObject } from "../../i18n/useTranslatedStringFromObject";
 import type { IBranding } from "./IBranding";
 
 export interface TwitterConfiguration {
@@ -64,10 +64,10 @@ export function getProductTitle(
   const { name, claim } = product;
 
   if (!title) {
-    return `${translatedStringFromObject(name)} – ${translatedStringFromObject(
+    return `${useTranslatedStringFromObject(name)} – ${useTranslatedStringFromObject(
       claim,
     )}`;
   }
 
-  return `${title} – ${translatedStringFromObject(name)}`;
+  return `${title} – ${useTranslatedStringFromObject(name)}`;
 }

src/lib/useAppLink.tsx

@@ -1,4 +1,4 @@
-import { translatedStringFromObject } from "~/lib/i18n/translatedStringFromObject";
+import { useTranslatedStringFromObject } from "~/lib/i18n/useTranslatedStringFromObject";
 import type { IApp } from "~/lib/model/ac/App";
 import type IAppLink from "~/lib/model/ac/IAppLink";
 import type { MappingEvent } from "~/lib/model/ac/MappingEvent";
@@ -11,9 +11,9 @@ export function useAppLink(
   joinedMappingEvent?: MappingEvent,
 ) {
   const baseUrl = `https://${app._id}/`;
-  const localizedUrl = translatedStringFromObject(link.url);
-  const label = translatedStringFromObject(link.label);
-  const badgeLabel = translatedStringFromObject(link.badgeLabel);
+  const localizedUrl = useTranslatedStringFromObject(link.url);
+  const label = useTranslatedStringFromObject(link.label);
+  const badgeLabel = useTranslatedStringFromObject(link.badgeLabel);
   const isExternal = localizedUrl?.startsWith("http");
 
   /** Insert values of template variables into the link's URL */

src/lib/useNavigation.tsx

@@ -23,12 +23,8 @@ export function useNavigation() {
   const app = useAppContext();
   const appLinks = app.related?.appLinks;
   const uniqueSurveyId = useUniqueSurveyId();
-  const translatedAppLinks = React.useMemo(
-    () =>
-      Object.values(appLinks ?? {}).map((link) =>
-        useAppLink(link, app, uniqueSurveyId, joinedMappingEvent),
-      ),
-    [app, appLinks, joinedMappingEvent, uniqueSurveyId],
+  const translatedAppLinks = Object.values(appLinks ?? {}).map((link) =>
+    useAppLink(link, app, uniqueSurveyId, joinedMappingEvent),
   );
 
   return React.useMemo(() => {