Upgraded to the newest version of react-intl

package.json

@@ -23,7 +23,7 @@
     "query-string": "^7.0.0",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
-    "react-intl": "^2.8.0",
+    "react-intl": "^5.15.5",
     "react-linkify": "^0.2.2",
     "react-router-dom": "^5.2.0",
     "semantic-ui-css": "^2.4.1",
@@ -45,7 +45,6 @@
     "@types/md5": "^2.3.0",
     "@types/react": "^17.0.3",
     "@types/react-dom": "^17.0.3",
-    "@types/react-intl": "^2.3.15",
     "@types/react-router-dom": "^5.1.7",
     "@typescript-eslint/eslint-plugin": "^4.19.0",
     "@typescript-eslint/parser": "^4.19.0",

src/app.tsx

@@ -2,13 +2,12 @@ import * as H from 'history';
 import * as queryString from 'query-string';
 import * as React from 'react';
 import {analyticsEvent} from './util/analytics';
-import {Chart, ChartType} from './chart';
+import {Chart, ChartComponent, ChartType} from './chart';
 import {Details} from './details';
 import {EmbeddedDataSource, EmbeddedSourceSpec} from './datasource/embedded';
-import {FormattedMessage} from 'react-intl';
+import {FormattedMessage, WrappedComponentProps} from 'react-intl';
 import {TopolaData} from './util/gedcom_util';
 import {IndiInfo} from 'topola';
-import {intlShape} from 'react-intl';
 import {Intro} from './intro';
 import {Loader, Message, Portal, Responsive} from 'semantic-ui-react';
 import {Redirect, Route, RouteComponentProps, Switch} from 'react-router-dom';
@@ -187,19 +186,17 @@ interface State {
   freezeAnimation?: boolean;
 }
 
-export class App extends React.Component<RouteComponentProps, {}> {
+export class App extends React.Component<
+  RouteComponentProps & WrappedComponentProps,
+  {}
+> {
   state: State = {
     state: AppState.INITIAL,
     standalone: true,
     chartType: ChartType.Hourglass,
     showErrorPopup: false,
   };
-  chartRef: Chart | null = null;
-
-  /** Make intl appear in this.context. */
-  static contextTypes = {
-    intl: intlShape,
-  };
+  chartRef: ChartComponent | null = null;
 
   /** Sets the state with a new individual selection and chart type. */
   private updateDisplay(
@@ -234,9 +231,7 @@ export class App extends React.Component<RouteComponentProps, {}> {
 
   private readonly uploadedDataSource = new UploadedDataSource();
   private readonly gedcomUrlDataSource = new GedcomUrlDataSource();
-  private readonly wikiTreeDataSource = new WikiTreeDataSource(
-    this.context.intl,
-  );
+  private readonly wikiTreeDataSource = new WikiTreeDataSource(this.props.intl);
   private readonly embeddedDataSource = new EmbeddedDataSource();
 
   private isNewData(sourceSpec: DataSourceSpec, selection?: IndiInfo) {
@@ -331,7 +326,7 @@ export class App extends React.Component<RouteComponentProps, {}> {
           }),
         );
       } catch (error) {
-        this.setError(getI18nMessage(error, this.context.intl));
+        this.setError(getI18nMessage(error, this.props.intl));
       }
     } else if (
       this.state.state === AppState.SHOWING_CHART ||
@@ -353,10 +348,7 @@ export class App extends React.Component<RouteComponentProps, {}> {
       });
       if (loadMoreFromWikitree) {
         try {
-          const data = await loadWikiTree(
-            args.selection!.id,
-            this.context.intl,
-          );
+          const data = await loadWikiTree(args.selection!.id, this.props.intl);
           const selection = getSelection(data.chartData, args.selection);
           this.setState(
             Object.assign({}, this.state, {
@@ -367,7 +359,7 @@ export class App extends React.Component<RouteComponentProps, {}> {
           );
         } catch (error) {
           this.showErrorPopup(
-            this.context.intl.formatMessage(
+            this.props.intl.formatMessage(
               {
                 id: 'error.failed_wikitree_load_more',
                 defaultMessage: 'Failed to load data from WikiTree. {error}',
@@ -424,7 +416,7 @@ export class App extends React.Component<RouteComponentProps, {}> {
       this.chartRef && (await this.chartRef.downloadPdf());
     } catch (e) {
       this.showErrorPopup(
-        this.context.intl.formatMessage({
+        this.props.intl.formatMessage({
           id: 'error.failed_pdf',
           defaultMessage:
             'Failed to generate PDF file.' +
@@ -440,7 +432,7 @@ export class App extends React.Component<RouteComponentProps, {}> {
       this.chartRef && (await this.chartRef.downloadPng());
     } catch (e) {
       this.showErrorPopup(
-        this.context.intl.formatMessage({
+        this.props.intl.formatMessage({
           id: 'error.failed_png',
           defaultMessage:
             'Failed to generate PNG file.' +

src/chart.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import {select, Selection} from 'd3-selection';
 import {interpolateNumber} from 'd3-interpolate';
-import {intlShape} from 'react-intl';
+import {injectIntl, WrappedComponentProps} from 'react-intl';
 import {max, min} from 'd3-array';
 import {Responsive} from 'semantic-ui-react';
 import {saveAs} from 'file-saver';
@@ -149,7 +149,10 @@ export interface ChartProps {
 }
 
 /** Component showing the genealogy chart and handling transition animations. */
-export class Chart extends React.PureComponent<ChartProps, {}> {
+export class ChartComponent extends React.PureComponent<
+  ChartProps & WrappedComponentProps,
+  {}
+> {
   private chart?: ChartHandle;
   /** Animation is in progress. */
   private animating = false;
@@ -214,7 +217,7 @@ export class Chart extends React.PureComponent<ChartProps, {}> {
         indiCallback: (info) => this.props.onSelection(info),
         animate: true,
         updateSvgSize: false,
-        locale: this.context.intl.locale,
+        locale: this.props.intl.locale,
       });
     } else {
       this.chart!.setData(this.props.data);
@@ -303,11 +306,6 @@ export class Chart extends React.PureComponent<ChartProps, {}> {
     this.renderChart({initialRender});
   }
 
-  /** Make intl appear in this.context. */
-  static contextTypes = {
-    intl: intlShape,
-  };
-
   render() {
     return (
       <div id="svgContainer">
@@ -410,3 +408,4 @@ export class Chart extends React.PureComponent<ChartProps, {}> {
     doc.save('topola.pdf');
   }
 }
+export const Chart = injectIntl(ChartComponent, {forwardRef: true});

src/datasource/wikitree.ts

@@ -4,7 +4,7 @@ import {DataSource, DataSourceEnum, SourceSelection} from './data_source';
 import {Date, DateOrRange, JsonFam, JsonIndi} from 'topola';
 import {GedcomData, normalizeGedcom, TopolaData} from '../util/gedcom_util';
 import {GedcomEntry} from 'parse-gedcom';
-import {InjectedIntl} from 'react-intl';
+import {IntlShape} from 'react-intl';
 import {TopolaError} from '../util/error';
 
 /** Prefix for IDs of private individuals. */
@@ -223,7 +223,7 @@ export function getLoggedInUserName(): string | undefined {
  */
 export async function loadWikiTree(
   key: string,
-  intl: InjectedIntl,
+  intl: IntlShape,
   authcode?: string,
 ): Promise<TopolaData> {
   // Work around CORS if not in apps.wikitree.com domain.
@@ -419,7 +419,7 @@ function getFamilyId(spouse1: number, spouse2: number) {
   return `${spouse2}_${spouse1}`;
 }
 
-function convertPerson(person: Person, intl: InjectedIntl): JsonIndi {
+function convertPerson(person: Person, intl: IntlShape): JsonIndi {
   const indi: JsonIndi = {
     id: person.Name,
   };
@@ -578,7 +578,7 @@ export interface WikiTreeSourceSpec {
 
 /** Loading data from the WikiTree API. */
 export class WikiTreeDataSource implements DataSource<WikiTreeSourceSpec> {
-  constructor(private intl: InjectedIntl) {}
+  constructor(private intl: IntlShape) {}
 
   isNewData(
     newSource: SourceSelection<WikiTreeSourceSpec>,

src/details.tsx

@@ -1,10 +1,14 @@
 import * as React from 'react';
 import flatMap from 'array.prototype.flatmap';
 import Linkify from 'react-linkify';
-import {FormattedMessage, InjectedIntl} from 'react-intl';
+import {
+  FormattedMessage,
+  injectIntl,
+  IntlShape,
+  WrappedComponentProps,
+} from 'react-intl';
 import {GedcomData, pointerToId} from './util/gedcom_util';
 import {GedcomEntry} from 'parse-gedcom';
-import {intlShape} from 'react-intl';
 import {translateDate} from './util/date_util';
 
 interface Props {
@@ -76,7 +80,7 @@ function getData(entry: GedcomEntry) {
   return result;
 }
 
-function eventDetails(entry: GedcomEntry, intl: InjectedIntl) {
+function eventDetails(entry: GedcomEntry, intl: IntlShape) {
   const lines = [];
   if (entry.data && entry.data.length > 1) {
     lines.push(<i>{entry.data}</i>);
@@ -205,12 +209,10 @@ function dereference(entry: GedcomEntry, gedcom: GedcomData) {
   return entry;
 }
 
-export class Details extends React.Component<Props, {}> {
-  /** Make intl appear in this.context. */
-  static contextTypes = {
-    intl: intlShape,
-  };
-
+class DetailsComponent extends React.Component<
+  Props & WrappedComponentProps,
+  {}
+> {
   render() {
     const entries = this.props.gedcom.indis[this.props.indi].tree;
     const entriesWithData = entries
@@ -221,7 +223,7 @@ export class Details extends React.Component<Props, {}> {
       <div className="ui segments" id="details">
         {getDetails(entries, ['NAME'], nameDetails)}
         {getDetails(entries, EVENT_TAGS, (entry) =>
-          eventDetails(entry, this.context.intl as InjectedIntl),
+          eventDetails(entry, this.props.intl),
         )}
         {getOtherDetails(entriesWithData)}
         {getDetails(entriesWithData, ['NOTE'], noteDetails)}
@@ -229,3 +231,4 @@ export class Details extends React.Component<Props, {}> {
     );
   }
 }
+export const Details = injectIntl(DetailsComponent);

src/index.tsx

@@ -1,9 +1,3 @@
-import * as locale_de from 'react-intl/locale-data/de';
-import * as locale_en from 'react-intl/locale-data/en';
-import * as locale_fr from 'react-intl/locale-data/fr';
-import * as locale_it from 'react-intl/locale-data/it';
-import * as locale_pl from 'react-intl/locale-data/pl';
-import * as locale_ru from 'react-intl/locale-data/ru';
 import * as React from 'react';
 import * as ReactDOM from 'react-dom';
 import messages_de from './translations/de.json';
@@ -11,7 +5,6 @@ import messages_fr from './translations/fr.json';
 import messages_it from './translations/it.json';
 import messages_pl from './translations/pl.json';
 import messages_ru from './translations/ru.json';
-import {addLocaleData} from 'react-intl';
 import {App} from './app';
 import {detect} from 'detect-browser';
 import {HashRouter as Router, Route} from 'react-router-dom';
@@ -20,15 +13,6 @@ import './index.css';
 import 'semantic-ui-css/semantic.min.css';
 import 'canvas-toBlob';
 
-addLocaleData([
-  ...locale_de,
-  ...locale_en,
-  ...locale_fr,
-  ...locale_it,
-  ...locale_pl,
-  ...locale_ru,
-]);
-
 const messages = {
   de: messages_de,
   fr: messages_fr,

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);

src/util/date_util.ts

@@ -1,5 +1,5 @@
 import {Date as TopolaDate, DateOrRange, DateRange, getDate} from 'topola';
-import {InjectedIntl} from 'react-intl';
+import {IntlShape} from 'react-intl';
 
 const DATE_QUALIFIERS = new Map([
   ['abt', 'about'],
@@ -7,7 +7,7 @@ const DATE_QUALIFIERS = new Map([
   ['est', 'estimated'],
 ]);
 
-function formatDate(date: TopolaDate, intl: InjectedIntl) {
+function formatDate(date: TopolaDate, intl: IntlShape) {
   const hasDay = date.day !== undefined;
   const hasMonth = date.month !== undefined;
   const hasYear = date.year !== undefined;
@@ -41,7 +41,7 @@ function formatDate(date: TopolaDate, intl: InjectedIntl) {
   return [translatedQualifier, translatedDate].join(' ');
 }
 
-function formatDateRage(dateRange: DateRange, intl: InjectedIntl) {
+function formatDateRage(dateRange: DateRange, intl: IntlShape) {
   const fromDate = dateRange.from;
   const toDate = dateRange.to;
   const translatedFromDate = fromDate && formatDate(fromDate, intl);
@@ -79,7 +79,7 @@ function formatDateRage(dateRange: DateRange, intl: InjectedIntl) {
 /** Formats a DateOrRange object. */
 export function formatDateOrRange(
   dateOrRange: DateOrRange | undefined,
-  intl: InjectedIntl,
+  intl: IntlShape,
 ): string {
   if (!dateOrRange) {
     return '';
@@ -94,6 +94,6 @@ export function formatDateOrRange(
 }
 
 /** Formats a date given in GEDCOM format. */
-export function translateDate(gedcomDate: string, intl: InjectedIntl): string {
+export function translateDate(gedcomDate: string, intl: IntlShape): string {
   return formatDateOrRange(getDate(gedcomDate), intl);
 }

src/util/error_i18n.ts

@@ -1,11 +1,11 @@
-import {InjectedIntl} from 'react-intl';
+import {IntlShape} from 'react-intl';
 import {TopolaError} from './error';
 
 /**
  * Returns a translated message for the given error. If the message can't be
  * translated, the original error.message is returned.
  */
-export function getI18nMessage(error: Error, intl: InjectedIntl): string {
+export function getI18nMessage(error: Error, intl: IntlShape): string {
   if (!(error instanceof TopolaError)) {
     return error.message;
   }