Show notifications when a user's profile name changes

ts/components/Intl.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 
 import { LocalizerType, RenderTextCallbackType } from '../types/Util';
+import { ReplacementValuesType } from '../types/I18N';
 
 export type FullJSXType = Array<JSX.Element | string> | JSX.Element | string;
 
@@ -8,7 +9,7 @@ interface Props {
   /** The translation string id */
   id: string;
   i18n: LocalizerType;
-  components?: Array<FullJSXType>;
+  components?: Array<FullJSXType> | ReplacementValuesType<FullJSXType>;
   renderText?: RenderTextCallbackType;
 }
 
@@ -19,27 +20,53 @@ export class Intl extends React.Component<Props> {
     ),
   };
 
-  public getComponent(index: number, key: number): FullJSXType | undefined {
+  public getComponent(
+    index: number,
+    placeholderName: string,
+    key: number
+  ): FullJSXType | undefined {
     const { id, components } = this.props;
 
-    if (!components || !components.length || components.length <= index) {
+    if (!components) {
       // tslint:disable-next-line no-console
       console.log(
-        `Error: Intl missing provided components for id ${id}, index ${index}`
+        `Error: Intl component prop not provided; Metadata: id '${id}', index ${index}, placeholder '${placeholderName}'`
+      );
+      return;
+    }
+
+    if (Array.isArray(components)) {
+      if (!components || !components.length || components.length <= index) {
+        // tslint:disable-next-line no-console
+        console.log(
+          `Error: Intl missing provided component for id '${id}', index ${index}`
+        );
+
+        return;
+      }
+
+      return <React.Fragment key={key}>{components[index]}</React.Fragment>;
+    }
+
+    const value = components[placeholderName];
+    if (!value) {
+      // tslint:disable-next-line no-console
+      console.log(
+        `Error: Intl missing provided component for id '${id}', placeholder '${placeholderName}'`
       );
 
       return;
     }
 
-    return <React.Fragment key={key}>{components[index]}</React.Fragment>;
+    return <React.Fragment key={key}>{value}</React.Fragment>;
   }
 
   public render() {
-    const { id, i18n, renderText } = this.props;
+    const { components, id, i18n, renderText } = this.props;
 
     const text = i18n(id);
     const results: Array<any> = [];
-    const FIND_REPLACEMENTS = /\$[^$]+\$/g;
+    const FIND_REPLACEMENTS = /\$([^$]+)\$/g;
 
     // We have to do this, because renderText is not required in our Props object,
     //   but it is always provided via defaultProps.
@@ -47,6 +74,12 @@ export class Intl extends React.Component<Props> {
       return;
     }
 
+    if (Array.isArray(components) && components.length > 1) {
+      throw new Error(
+        'Array syntax is not supported with more than one placeholder'
+      );
+    }
+
     let componentIndex = 0;
     let key = 0;
     let lastTextIndex = 0;
@@ -63,7 +96,8 @@ export class Intl extends React.Component<Props> {
         key += 1;
       }
 
-      results.push(this.getComponent(componentIndex, key));
+      const placeholderName = match[1];
+      results.push(this.getComponent(componentIndex, placeholderName, key));
       componentIndex += 1;
       key += 1;