C2LC-23: Use react-intl injectIntl() directly on component class(es)

Metadata

Source
C2LC-23
Type
Task
Priority
N/A
Status
Done
Resolution
N/A
Assignee
N/A
Reporter
Simon Bates
Created
2019-11-13T15:48:24.980-0500
Updated
2020-02-19T15:18:42.179-0500
Versions
N/A
Fixed Versions
  1. Coding Env 0.2.1
Component
N/A

Description

Use react-intl injectIntl() directly on component class(es) to avoid creation of anonymous functions in render().

The following are sketches of a couple of approaches.

Either a component with a name something like IntlContainer

  • Contains internationalization supports, messages, and current language state
  • App is its only child component
render() {
    return (
        <IntlProvider
                locale={this.state.language}
                messages={messages[this.state.language]}>
            <App>
        </IntlProvider>
    );
}

We can then use injectIntl() directly in App.js:

export default injectIntl(App);

Or, move the localizable user interface out of App

  • App would contain internationalization supports, messages, current language state, and other application-wide state
  • Any UI that needs localization is in child components of App

In this model, App would contain the <IntlProvider> container (as now) and children would contain:

export default injectIntl(WhateverChildComponent);

Resources