Consolidate conjugation i18n strings (#11660)

src/components/views/elements/EventListSummary.tsx

@@ -20,7 +20,7 @@ import React, { ComponentProps, ReactNode } from "react";
 import { MatrixEvent, RoomMember, EventType } from "matrix-js-sdk/src/matrix";
 
 import { _t } from "../../../languageHandler";
-import { formatCommaSeparatedList } from "../../../utils/FormattingUtils";
+import { formatList } from "../../../utils/FormattingUtils";
 import { isValid3pidInvite } from "../../../RoomInvite";
 import GenericEventListSummary from "./GenericEventListSummary";
 import { RightPanelPhases } from "../../../stores/right-panel/RightPanelStorePhases";
@@ -131,7 +131,7 @@ export default class EventListSummary extends React.Component<
                 return EventListSummary.getDescriptionForTransition(t.transitionType, userNames.length, t.repeats);
             });
 
-            const desc = formatCommaSeparatedList(descs);
+            const desc = formatList(descs);
 
             return _t("timeline|summary|format", { nameList, transitionList: desc });
         });
@@ -150,7 +150,7 @@ export default class EventListSummary extends React.Component<
      * included before "and [n] others".
      */
     private renderNameList(users: string[]): string {
-        return formatCommaSeparatedList(users, this.props.summaryLength);
+        return formatList(users, this.props.summaryLength);
     }
 
     /**

src/components/views/messages/MPollBody.tsx

@@ -33,7 +33,7 @@ import { PollResponseEvent } from "matrix-js-sdk/src/extensible_events_v1/PollRe
 import { _t } from "../../../languageHandler";
 import Modal from "../../../Modal";
 import { IBodyProps } from "./IBodyProps";
-import { formatCommaSeparatedList } from "../../../utils/FormattingUtils";
+import { formatList } from "../../../utils/FormattingUtils";
 import MatrixClientContext from "../../../contexts/MatrixClientContext";
 import ErrorDialog from "../dialogs/ErrorDialog";
 import { GetRelationsForEvent } from "../rooms/EventTile";
@@ -100,7 +100,7 @@ export function findTopAnswer(pollEvent: MatrixEvent, voteRelations: Relations):
 
     const bestAnswerTexts = bestAnswerIds.map(findAnswerText);
 
-    return formatCommaSeparatedList(bestAnswerTexts, 3);
+    return formatList(bestAnswerTexts, 3);
 }
 
 export function isPollEnded(pollEvent: MatrixEvent, matrixClient: MatrixClient): boolean {

src/components/views/messages/ReactionsRowButton.tsx

@@ -20,7 +20,7 @@ import { MatrixEvent } from "matrix-js-sdk/src/matrix";
 
 import { mediaFromMxc } from "../../../customisations/Media";
 import { _t } from "../../../languageHandler";
-import { formatCommaSeparatedList } from "../../../utils/FormattingUtils";
+import { formatList } from "../../../utils/FormattingUtils";
 import dis from "../../../dispatcher/dispatcher";
 import ReactionsRowButtonTooltip from "./ReactionsRowButtonTooltip";
 import AccessibleButton from "../elements/AccessibleButton";
@@ -123,7 +123,7 @@ export default class ReactionsRowButton extends React.PureComponent<IProps, ISta
                     undefined;
             }
 
-            const reactors = formatCommaSeparatedList(senders, 6);
+            const reactors = formatList(senders, 6);
             if (content) {
                 label = _t("timeline|reactions|label", {
                     reactors,

src/components/views/messages/ReactionsRowButtonTooltip.tsx

@@ -19,7 +19,7 @@ import { MatrixEvent } from "matrix-js-sdk/src/matrix";
 
 import { unicodeToShortcode } from "../../../HtmlUtils";
 import { _t } from "../../../languageHandler";
-import { formatCommaSeparatedList } from "../../../utils/FormattingUtils";
+import { formatList } from "../../../utils/FormattingUtils";
 import Tooltip from "../elements/Tooltip";
 import MatrixClientContext from "../../../contexts/MatrixClientContext";
 import { REACTION_SHORTCODE_KEY } from "./ReactionsRow";
@@ -66,7 +66,7 @@ export default class ReactionsRowButtonTooltip extends React.PureComponent<IProp
                         },
                         {
                             reactors: () => {
-                                return <div className="mx_Tooltip_title">{formatCommaSeparatedList(senders, 6)}</div>;
+                                return <div className="mx_Tooltip_title">{formatList(senders, 6)}</div>;
                             },
                             reactedWith: (sub) => {
                                 if (!shortName) {

src/components/views/rooms/RoomKnocksBar.tsx

@@ -28,6 +28,7 @@ import ErrorDialog from "../dialogs/ErrorDialog";
 import { RoomSettingsTab } from "../dialogs/RoomSettingsDialog";
 import AccessibleButton from "../elements/AccessibleButton";
 import Heading from "../typography/Heading";
+import { formatList } from "../../../utils/FormattingUtils";
 
 export const RoomKnocksBar: VFC<{ room: Room }> = ({ room }) => {
     const [disabled, setDisabled] = useState(false);
@@ -82,58 +83,46 @@ export const RoomKnocksBar: VFC<{ room: Room }> = ({ room }) => {
             {_t("action|view")}
         </AccessibleButton>
     );
-    let names: string = knockMembers
-        .slice(0, 2)
-        .map((knockMember) => knockMember.name)
-        .join(", ");
+    let names = formatList(
+        knockMembers.map((knockMember) => knockMember.name),
+        3,
+        true,
+    );
     let link: ReactNode = null;
-    switch (knockMembersCount) {
-        case 1: {
-            buttons = (
-                <>
-                    <AccessibleButton
-                        className="mx_RoomKnocksBar_action"
-                        disabled={!canKick || disabled}
-                        kind="icon_primary_outline"
-                        onClick={() => handleDeny(knockMembers[0].userId)}
-                        title={_t("action|deny")}
-                    >
-                        <XIcon width={18} height={18} />
-                    </AccessibleButton>
-                    <AccessibleButton
-                        className="mx_RoomKnocksBar_action"
-                        disabled={!canInvite || disabled}
-                        kind="icon_primary"
-                        onClick={() => handleApprove(knockMembers[0].userId)}
-                        title={_t("action|approve")}
-                    >
-                        <CheckIcon width={18} height={18} />
-                    </AccessibleButton>
-                </>
-            );
-            names = `${knockMembers[0].name} (${knockMembers[0].userId})`;
-            link = knockMembers[0].events.member?.getContent().reason && (
+    if (knockMembersCount === 1) {
+        buttons = (
+            <>
                 <AccessibleButton
-                    className="mx_RoomKnocksBar_link"
-                    element="a"
-                    kind="link_inline"
-                    onClick={handleOpenRoomSettings}
+                    className="mx_RoomKnocksBar_action"
+                    disabled={!canKick || disabled}
+                    kind="icon_primary_outline"
+                    onClick={() => handleDeny(knockMembers[0].userId)}
+                    title={_t("action|deny")}
                 >
-                    {_t("action|view_message")}
+                    <XIcon width={18} height={18} />
                 </AccessibleButton>
-            );
-            break;
-        }
-        case 2: {
-            names = _t("%(names)s and %(name)s", { names: knockMembers[0].name, name: knockMembers[1].name });
-            break;
-        }
-        case 3: {
-            names = _t("%(names)s and %(name)s", { names, name: knockMembers[2].name });
-            break;
-        }
-        default:
-            names = _t("%(names)s and %(count)s others", { names, count: knockMembersCount - 2 });
+                <AccessibleButton
+                    className="mx_RoomKnocksBar_action"
+                    disabled={!canInvite || disabled}
+                    kind="icon_primary"
+                    onClick={() => handleApprove(knockMembers[0].userId)}
+                    title={_t("action|approve")}
+                >
+                    <CheckIcon width={18} height={18} />
+                </AccessibleButton>
+            </>
+        );
+        names = `${knockMembers[0].name} (${knockMembers[0].userId})`;
+        link = knockMembers[0].events.member?.getContent().reason && (
+            <AccessibleButton
+                className="mx_RoomKnocksBar_link"
+                element="a"
+                kind="link_inline"
+                onClick={handleOpenRoomSettings}
+            >
+                {_t("action|view_message")}
+            </AccessibleButton>
+        );
     }
 
     return (