ICU types

ts/components/conversation/GroupNotification.tsx

@@ -90,7 +90,7 @@ function GroupNotificationChange({
                 <Intl
                   i18n={i18n}
                   id="icu:joinedTheGroup"
-                  components={{ name: otherPeopleWithCommas }}
+                  components={{ name: otherPeople[0] }}
                 />
               ) : (
                 <Intl
@@ -121,7 +121,7 @@ function GroupNotificationChange({
         <Intl
           id="icu:multipleLeftTheGroup"
           i18n={i18n}
-          components={{ name: otherPeopleWithCommas }}
+          components={{ name: otherPeople[0] }}
         />
       ) : (
         <Intl

ts/components/conversation/GroupV1DisabledActions.tsx

@@ -25,7 +25,7 @@ export function GroupV1DisabledActions({
           components={{
             // This is a render prop, not a component
             // eslint-disable-next-line react/no-unstable-nested-components
-            learnMoreLink: (...parts) => {
+            learnMoreLink: parts => {
               return (
                 <a
                   href="https://support.signal.org/hc/articles/360007319331"

ts/components/conversation/GroupV2Change.stories.tsx

@@ -13,7 +13,6 @@ import { SignalService as Proto } from '../../protobuf';
 import type { SmartContactRendererType } from '../../groupChange';
 import type { PropsType } from './GroupV2Change';
 import { GroupV2Change } from './GroupV2Change';
-import type { FullJSXType } from '../Intl';
 
 const i18n = setupI18n('en', enMessages);
 
@@ -28,7 +27,7 @@ const INVITEE_A = generateAci();
 const AccessControlEnum = Proto.AccessControl.AccessRequired;
 const RoleEnum = Proto.Member.Role;
 
-const renderContact: SmartContactRendererType<FullJSXType> = (
+const renderContact: SmartContactRendererType<JSX.Element> = (
   conversationId: string
 ) => (
   <React.Fragment key={conversationId}>

ts/components/conversation/GroupV2Change.tsx

@@ -6,10 +6,11 @@ import React, { useState } from 'react';
 import { get } from 'lodash';
 
 import * as log from '../../logging/log';
-import type { ReplacementValuesType } from '../../types/I18N';
-import type { FullJSXType } from '../Intl';
 import { Intl } from '../Intl';
-import type { LocalizerType } from '../../types/Util';
+import type {
+  LocalizerType,
+  ICUJSXMessageParamsByKeyType,
+} from '../../types/Util';
 import type {
   AciString,
   PniString,
@@ -49,19 +50,18 @@ export type PropsActionsType = {
 
 export type PropsHousekeepingType = {
   i18n: LocalizerType;
-  renderContact: SmartContactRendererType<FullJSXType>;
+  renderContact: SmartContactRendererType<JSX.Element>;
 };
 
 export type PropsType = PropsDataType &
   PropsActionsType &
   PropsHousekeepingType;
 
-function renderStringToIntl(
-  id: string,
+function renderStringToIntl<Key extends keyof ICUJSXMessageParamsByKeyType>(
+  id: Key,
   i18n: LocalizerType,
-  components?: ReplacementValuesType<FullJSXType>
-): FullJSXType {
-  // eslint-disable-next-line local-rules/valid-i18n-keys
+  components: ICUJSXMessageParamsByKeyType[Key]
+): JSX.Element {
   return <Intl id={id} i18n={i18n} components={components} />;
 }
 
@@ -168,8 +168,8 @@ function GroupV2Detail({
   i18n: LocalizerType;
   fromId?: ServiceIdString;
   ourAci: AciString | undefined;
-  renderContact: SmartContactRendererType<FullJSXType>;
-  text: FullJSXType;
+  renderContact: SmartContactRendererType<JSX.Element>;
+  text: ReactNode;
 }): JSX.Element {
   const icon = getIcon(detail, isLastText, fromId);
   let buttonNode: ReactNode;
@@ -305,12 +305,12 @@ export function GroupV2Change(props: PropsType): ReactElement {
 
   return (
     <>
-      {renderChange<FullJSXType>(change, {
+      {renderChange<JSX.Element>(change, {
         i18n,
         ourAci,
         ourPni,
         renderContact,
-        renderString: renderStringToIntl,
+        renderIntl: renderStringToIntl,
       }).map(({ detail, isLastText, text }, index) => {
         return (
           <GroupV2Detail

ts/components/conversation/Timeline.stories.tsx

@@ -360,7 +360,7 @@ const renderItem = ({
     conversationId=""
     item={items[messageId]}
     renderAudioAttachment={() => <div>*AudioAttachment*</div>}
-    renderContact={() => '*ContactName*'}
+    renderContact={() => <div>*ContactName*</div>}
     renderEmojiPicker={() => <div />}
     renderReactionPicker={() => <div />}
     renderUniversalTimerNotification={() => (

ts/components/conversation/Timeline.tsx

@@ -18,7 +18,6 @@ import { clearTimeoutIfNecessary } from '../../util/clearTimeoutIfNecessary';
 import { WidthBreakpoint } from '../_util';
 
 import { ErrorBoundary } from './ErrorBoundary';
-import type { FullJSXType } from '../Intl';
 import { Intl } from '../Intl';
 import { TimelineWarning } from './TimelineWarning';
 import { TimelineWarnings } from './TimelineWarnings';
@@ -980,7 +979,9 @@ export class Timeline extends React.Component<
           case ContactSpoofingType.MultipleGroupMembersWithSameTitle: {
             const { groupNameCollisions } = warning;
             const numberOfSharedNames = Object.keys(groupNameCollisions).length;
-            const reviewRequestLink: FullJSXType = parts => (
+            const reviewRequestLink = (
+              parts: Array<string | JSX.Element>
+            ): JSX.Element => (
               <TimelineWarning.Link onClick={reviewConversationNameCollision}>
                 {parts}
               </TimelineWarning.Link>

ts/components/conversation/TimelineItem.tsx

@@ -53,7 +53,6 @@ import { ConversationMergeNotification } from './ConversationMergeNotification';
 import type { PropsDataType as PhoneNumberDiscoveryNotificationPropsType } from './PhoneNumberDiscoveryNotification';
 import { PhoneNumberDiscoveryNotification } from './PhoneNumberDiscoveryNotification';
 import { SystemMessage } from './SystemMessage';
-import type { FullJSXType } from '../Intl';
 import { TimelineMessage } from './TimelineMessage';
 
 type CallHistoryType = {
@@ -165,7 +164,7 @@ type PropsLocalType = {
   targetMessage: (messageId: string, conversationId: string) => unknown;
   shouldRenderDateHeader: boolean;
   platform: string;
-  renderContact: SmartContactRendererType<FullJSXType>;
+  renderContact: SmartContactRendererType<JSX.Element>;
   renderUniversalTimerNotification: () => JSX.Element;
   i18n: LocalizerType;
   interactionMode: InteractionModeType;