Upgraded to the newest version of react-intl

src/menu/search.tsx

@@ -4,7 +4,7 @@ import {analyticsEvent} from '../util/analytics';
 import {buildSearchIndex, SearchIndex, SearchResult} from './search_index';
 import {formatDateOrRange} from '../util/date_util';
 import {IndiInfo, JsonGedcomData} from 'topola';
-import {intlShape} from 'react-intl';
+import {injectIntl, WrappedComponentProps} from 'react-intl';
 import {JsonIndi} from 'topola';
 import {RouteComponentProps} from 'react-router-dom';
 import {Search, SearchProps, SearchResultProps} from 'semantic-ui-react';
@@ -32,24 +32,20 @@ interface State {
 }
 
 /** Displays and handles the search box in the top bar. */
-export class SearchBar extends React.Component<
-  RouteComponentProps & Props,
+class SearchBarComponent extends React.Component<
+  RouteComponentProps & WrappedComponentProps & Props,
   State
 > {
   state: State = {
     searchResults: [],
   };
-  /** Make intl appear in this.context. */
-  static contextTypes = {
-    intl: intlShape,
-  };
 
   searchRef?: {setValue(value: string): void};
   searchIndex?: SearchIndex;
 
   private getDescriptionLine(indi: JsonIndi) {
-    const birthDate = formatDateOrRange(indi.birth, this.context.intl);
-    const deathDate = formatDateOrRange(indi.death, this.context.intl);
+    const birthDate = formatDateOrRange(indi.birth, this.props.intl);
+    const deathDate = formatDateOrRange(indi.death, this.props.intl);
     if (!deathDate) {
       return birthDate;
     }
@@ -108,11 +104,11 @@ export class SearchBar extends React.Component<
         )}
         onResultSelect={(_, data) => this.handleResultSelect(data.result.id)}
         results={this.state.searchResults}
-        noResultsMessage={this.context.intl.formatMessage({
+        noResultsMessage={this.props.intl.formatMessage({
           id: 'menu.search.no_results',
           defaultMessage: 'No results found',
         })}
-        placeholder={this.context.intl.formatMessage({
+        placeholder={this.props.intl.formatMessage({
           id: 'menu.search.placeholder',
           defaultMessage: 'Search for people',
         })}
@@ -127,3 +123,4 @@ export class SearchBar extends React.Component<
     );
   }
 }
+export const SearchBar = injectIntl(SearchBarComponent);

src/menu/search_index.ts

@@ -65,7 +65,7 @@ class LunrSearchIndex implements SearchIndex {
 
   initialize() {
     const self = this;
-    this.index = lunr(function() {
+    this.index = lunr(function () {
       this.use((lunr as any).multiLanguage('de', 'en', 'fr', 'it', 'ru'));
       this.ref('id');
       this.field('id');

src/menu/url_menu.tsx

@@ -77,7 +77,6 @@ export class UrlMenu extends React.Component<
           <FormattedMessage
             id="load_from_url.title"
             defaultMessage="Load from URL"
-            children={(txt) => txt}
           />
         </Header>
         <Modal.Content>

src/menu/wikitree_menu.tsx

@@ -2,7 +2,7 @@ import * as queryString from 'query-string';
 import * as React from 'react';
 import wikitreeLogo from './wikitree.png';
 import {analyticsEvent} from '../util/analytics';
-import {FormattedMessage, intlShape} from 'react-intl';
+import {FormattedMessage, injectIntl, WrappedComponentProps} from 'react-intl';
 import {getLoggedInUserName} from '../datasource/wikitree';
 import {MenuItem, MenuType} from './menu_item';
 import {RouteComponentProps} from 'react-router-dom';
@@ -106,7 +106,6 @@ export class WikiTreeMenu extends React.Component<
           <FormattedMessage
             id="select_wikitree_id.title"
             defaultMessage="Select WikiTree ID"
-            children={(txt) => txt}
           />
         </Header>
         <Modal.Content>
@@ -196,17 +195,13 @@ interface LoginState {
 }
 
 /** Displays and handles the "Log in to WikiTree" menu. */
-export class WikiTreeLoginMenu extends React.Component<
-  RouteComponentProps & Props,
+class WikiTreeLoginMenuComponent extends React.Component<
+  RouteComponentProps & WrappedComponentProps & Props,
   LoginState
 > {
   state: LoginState = {
     wikiTreeLoginState: WikiTreeLoginState.UNKNOWN,
   };
-  /** Make intl appear in this.context. */
-  static contextTypes = {
-    intl: intlShape,
-  };
 
   wikiTreeLoginFormRef: React.RefObject<HTMLFormElement> = React.createRef();
   wikiTreeReturnUrlRef: React.RefObject<HTMLInputElement> = React.createRef();
@@ -285,14 +280,14 @@ export class WikiTreeLoginMenu extends React.Component<
 
       case WikiTreeLoginState.LOGGED_IN:
         const tooltip = this.state.wikiTreeLoginUsername
-          ? this.context.intl.formatMessage(
+          ? this.props.intl.formatMessage(
               {
                 id: 'menu.wikitree_popup_username',
                 defaultMessage: 'Logged in to WikiTree as {username}',
               },
               {username: this.state.wikiTreeLoginUsername},
             )
-          : this.context.intl.formatMessage({
+          : this.props.intl.formatMessage({
               id: 'menu.wikitree_popup',
               defaultMessage: 'Logged in to WikiTree',
             });
@@ -309,3 +304,4 @@ export class WikiTreeLoginMenu extends React.Component<
     return null;
   }
 }
+export const WikiTreeLoginMenu = injectIntl(WikiTreeLoginMenuComponent);