Frontend/i18n: Localize list separators

app/web/features/messages/groupchats/GroupChatListItem.tsx

@@ -67,7 +67,10 @@ export default function GroupChatListItem({
   className,
   isArchived = false,
 }: GroupChatListItemProps) {
-  const { t } = useTranslation(MESSAGES);
+  const {
+    t,
+    i18n: { language: locale },
+  } = useTranslation(MESSAGES);
   const currentUserId = useAuthContext().authState.userId!;
   const latestMessageAuthorId = groupChat.latestMessage?.authorUserId;
 
@@ -93,6 +96,7 @@ export default function GroupChatListItem({
     groupChatMembersQuery,
     currentUserId,
     t,
+    locale,
   );
   //text is the control message text or message text
   let text = "";

app/web/features/messages/groupchats/GroupChatView.tsx

@@ -97,7 +97,10 @@ export default function GroupChatView({
   chatId: number;
   embedded?: boolean;
 }) {
-  const { t } = useTranslation([GLOBAL, MESSAGES]);
+  const {
+    t,
+    i18n: { language: locale },
+  } = useTranslation([GLOBAL, MESSAGES]);
   const isNativeEmbed = useIsNativeEmbed();
 
   const queryClient = useQueryClient();
@@ -163,7 +166,13 @@ export default function GroupChatView({
   );
 
   const title = groupChat
-    ? groupChatTitleText(groupChat, groupChatMembersQuery, currentUserId, t)
+    ? groupChatTitleText(
+        groupChat,
+        groupChatMembersQuery,
+        currentUserId,
+        t,
+        locale,
+      )
     : undefined;
 
   const hasError = groupChatError || messagesError || sendMutation.error;

app/web/features/messages/utils.ts

@@ -1,4 +1,5 @@
 import { useLiteUsers } from "features/userQueries/useLiteUsers";
+import { listSeparatorForLocale } from "i18n/lists";
 import { TFunction } from "i18next";
 import { GroupChat, Message } from "proto/conversations_pb";
 import { HostRequest } from "proto/requests_pb";
@@ -88,6 +89,7 @@ export function groupChatTitleText(
   groupChatMembersQuery: ReturnType<typeof useLiteUsers>,
   currentUserId: number,
   t: TFunction<"messages", undefined>,
+  locale: string,
 ) {
   return groupChat.title
     ? groupChat.title
@@ -101,7 +103,7 @@ export function groupChatTitleText(
               ? t("messages:unknown_user")
               : firstNameUser;
           })
-          .join(", ");
+          .join(listSeparatorForLocale(locale));
 }
 
 /** Returns the other user's username, or null if there are more than 2 users. */

app/web/features/profile/view/About.tsx

@@ -2,6 +2,7 @@ import { styled, Typography, useTheme } from "@mui/material";
 import Divider from "components/Divider";
 import Markdown from "components/Markdown";
 import { useTranslation } from "i18n";
+import { listSeparatorForLocale } from "i18n/lists";
 import { GLOBAL, PROFILE } from "i18n/namespaces";
 import { User } from "proto/api_pb";
 import { ComposableMap, Geographies, Geography } from "react-simple-maps";
@@ -23,7 +24,10 @@ const StyledDivider = styled(Divider)(({ theme }) => ({
 }));
 
 export default function About({ user }: AboutProps) {
-  const { t } = useTranslation([GLOBAL, PROFILE]);
+  const {
+    t,
+    i18n: { language: locale },
+  } = useTranslation([GLOBAL, PROFILE]);
   const theme = useTheme();
   const { regions } = useRegions();
   return (
@@ -77,14 +81,16 @@ export default function About({ user }: AboutProps) {
         {regions && user.regionsVisitedList.length > 0
           ? user.regionsVisitedList
               .map((country) => regions[country])
-              .join(`, `)
+              .join(listSeparatorForLocale(locale))
           : t("profile:regions_empty_state")}
       </Typography>
       <StyledDivider />
       <Typography variant="h1">{t("profile:heading.lived_section")}</Typography>
       <Typography variant="body1">
         {regions && user.regionsLivedList.length > 0
-          ? user.regionsLivedList.map((country) => regions[country]).join(`, `)
+          ? user.regionsLivedList
+              .map((country) => regions[country])
+              .join(listSeparatorForLocale(locale))
           : t("profile:regions_empty_state")}
       </Typography>
       <StyledDivider />

app/web/features/profile/view/userLabels.tsx

@@ -3,6 +3,7 @@ import { CheckCircleIcon, ErrorIcon } from "components/Icons";
 import LabelAndText from "components/LabelAndText";
 import { useLanguages } from "features/profile/hooks/useLanguages";
 import { useTranslation } from "i18n";
+import { listSeparatorForLocale } from "i18n/lists";
 import { COMMUNITIES, GLOBAL, PROFILE } from "i18n/namespaces";
 import {
   BirthdateVerificationStatus,
@@ -233,7 +234,10 @@ const AgeAndGenderRenderer = ({ user }: Props) => {
 };
 
 export const AgeGenderLanguagesLabels = ({ user }: Props) => {
-  const { t } = useTranslation("profile");
+  const {
+    t,
+    i18n: { language: locale },
+  } = useTranslation("profile");
   const { languages } = useLanguages();
 
   return (
@@ -248,7 +252,8 @@ export const AgeGenderLanguagesLabels = ({ user }: Props) => {
           text={
             user.languageAbilitiesList
               .map((ability) => languages[ability.code])
-              .join(", ") || t("languages_fluent_false")
+              .join(listSeparatorForLocale(locale)) ||
+            t("languages_fluent_false")
           }
         />
       )}

app/web/i18n/lists.test.ts

@@ -0,0 +1,13 @@
+import { listSeparatorForLocale } from "i18n/lists";
+
+describe("listSeparatorForLocale", () => {
+  it("works with known locales", () => {
+    expect(listSeparatorForLocale("en")).toEqual(", ");
+    expect(listSeparatorForLocale("fr")).toEqual(", ");
+    expect(listSeparatorForLocale("zh")).toEqual("、");
+  });
+
+  it("defaults to commas for unknown locales", () => {
+    expect(listSeparatorForLocale("xx")).toEqual(", ");
+  });
+});

app/web/i18n/lists.ts

@@ -0,0 +1,19 @@
+const cache = new Map<string, string>();
+
+/// Gets the list separator for the given locale.
+export function listSeparatorForLocale(locale: string) {
+  let separator = cache.get(locale);
+  if (!separator) {
+    // Intl.ListFormat doesn't have a way to format a list without using "and"/"or".
+    // But we can extract the mid-list separator it uses, which is robust for Western, CJK and Arabic.
+    // If the local is unknown, fallback to English, which uses commas.
+    const formatter = new Intl.ListFormat([locale, "en"], {
+      type: "conjunction",
+      style: "long",
+    });
+    const formatParts = formatter.formatToParts(["a", "b", "c"]);
+    separator = formatParts.find((p) => p.type === "literal")?.value || ", ";
+    cache.set(locale, separator);
+  }
+  return separator;
+}