Move L10nState from Redux to React component state (#5526)

Most importantly, this means we'll no longer store a ReactLocalization
object in the Redux store. This makes it easier to use our Redux state
and selectors from a library that runs outside of a browser context, for
example directly in node.

We weren't really using the Redux facilities for anything other than
value storage. The localization, requestedLocales and direction
properties were only needed locally within the AppLocalizationProvider
component. The primaryLocale and requestL10n properties are also
referenced from the LanguageSwitcher component; we're now using React
context and a useL10n hook to keep that working.
And for the togglePseudoStrategy console command we use a hacky exported
function that accesses a global.

Overall I think this is simpler; it certainly removes a whole bunch of
code.

Author: mstange

src/actions/index.js

@@ -5,7 +5,6 @@
 // @flow
 import * as app from './app';
 import * as icons from './icons';
-import * as l10n from './l10n';
 import * as profileView from './profile-view';
 import * as publish from './publish';
 import * as receiveProfile from './receive-profile';
@@ -16,7 +15,6 @@ export default Object.assign(
   {},
   app,
   icons,
-  l10n,
   profileView,
   publish,
   receiveProfile,

src/actions/l10n.js

@@ -3,19 +3,10 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 // @flow
 
-import explicitConnect from 'firefox-profiler/utils/connect';
 import { LocalizationProvider, ReactLocalization } from '@fluent/react';
 import { negotiateLanguages } from '@fluent/langneg';
 
 import * as React from 'react';
-import {
-  getLocalization,
-  getPrimaryLocale,
-  getDirection,
-  getRequestedLocales,
-  getPseudoStrategy,
-} from 'firefox-profiler/selectors/l10n';
-import { requestL10n, receiveL10n } from 'firefox-profiler/actions/l10n';
 import {
   AVAILABLE_LOCALES,
   DEFAULT_LOCALE,
@@ -25,13 +16,18 @@ import {
 } from 'firefox-profiler/app-logic/l10n';
 
 import { ensureExists } from 'firefox-profiler/utils/flow';
-import type { Localization } from 'firefox-profiler/types';
-import type { ConnectedProps } from 'firefox-profiler/utils/connect';
+import type { Localization, PseudoStrategy } from 'firefox-profiler/types';
+import { L10nContext } from 'firefox-profiler/contexts/L10nContext';
+import type { L10nContextType } from 'firefox-profiler/contexts/L10nContext';
 
 type FetchProps = {|
   +requestedLocales: null | string[],
-  +pseudoStrategy: null | 'accented' | 'bidi',
-  +receiveL10n: typeof receiveL10n,
+  +pseudoStrategy: PseudoStrategy,
+  +receiveL10n: (
+    localization: Localization,
+    primaryLocale: string,
+    direction: 'ltr' | 'rtl'
+  ) => void,
 |};
 
 /**
@@ -98,7 +94,7 @@ class AppLocalizationFetcher extends React.PureComponent<FetchProps> {
 }
 
 type InitProps = {|
-  +requestL10n: typeof requestL10n,
+  +requestL10n: (locales: string[]) => void,
   +requestedLocales: null | string[],
 |};
 
@@ -176,44 +172,56 @@ class AppLocalizationInit extends React.PureComponent<InitProps> {
   }
 }
 
-type ProviderStateProps = {|
+type L10nState = {|
   +requestedLocales: null | string[],
-  +pseudoStrategy: null | 'accented' | 'bidi',
+  +pseudoStrategy: PseudoStrategy,
   +localization: Localization,
   +primaryLocale: string | null,
   +direction: 'ltr' | 'rtl',
 |};
-type ProviderOwnProps = {|
+
+type ProviderProps = {|
   children: React.Node,
 |};
-type ProviderDispatchProps = {|
-  +requestL10n: typeof requestL10n,
-  +receiveL10n: typeof receiveL10n,
-|};
 
-type ProviderProps = ConnectedProps<
-  ProviderOwnProps,
-  ProviderStateProps,
-  ProviderDispatchProps,
->;
+// Global reference to the AppLocalizationProvider instance for console access
+let globalL10nProvider: AppLocalizationProvider | null = null;
 
 /**
  * This component is responsible for providing the fluent localization data to
  * the components. It also updates the locale attributes on the document.
  * Moreover it delegates to AppLocalizationInit and AppLocalizationFetcher the
  * handling of initialization, persisting and fetching the locales information.
  */
-class AppLocalizationProviderImpl extends React.PureComponent<ProviderProps> {
+export class AppLocalizationProvider extends React.PureComponent<
+  ProviderProps,
+  L10nState,
+> {
+  state: L10nState = {
+    requestedLocales: null,
+    pseudoStrategy: null,
+    localization: new ReactLocalization([]),
+    primaryLocale: null,
+    direction: 'ltr',
+  };
+
   componentDidMount() {
     this._updateLocalizationDocumentAttribute();
+    globalL10nProvider = this;
+  }
+
+  componentWillUnmount() {
+    if (globalL10nProvider === this) {
+      globalL10nProvider = null;
+    }
   }
 
   componentDidUpdate() {
     this._updateLocalizationDocumentAttribute();
   }
 
   _updateLocalizationDocumentAttribute() {
-    const { primaryLocale, direction } = this.props;
+    const { primaryLocale, direction } = this.state;
     if (!primaryLocale) {
       // The localization isn't ready.
       return;
@@ -223,52 +231,59 @@ class AppLocalizationProviderImpl extends React.PureComponent<ProviderProps> {
     ensureExists(document.documentElement).setAttribute('lang', primaryLocale);
   }
 
+  _requestL10n = (locales: string[]) => {
+    this.setState({ requestedLocales: locales });
+  };
+
+  _receiveL10n = (
+    localization: Localization,
+    primaryLocale: string,
+    direction: 'ltr' | 'rtl'
+  ) => {
+    this.setState({ localization, primaryLocale, direction });
+  };
+
+  // Used by the global togglePseudoStrategy function for console access
+  // eslint-disable-next-line react/no-unused-class-component-methods
+  togglePseudoStrategy = (pseudoStrategy: PseudoStrategy) => {
+    this.setState({ pseudoStrategy });
+  };
+
   render() {
-    const {
+    const { primaryLocale, localization, requestedLocales, pseudoStrategy } =
+      this.state;
+    const { children } = this.props;
+
+    const contextValue: L10nContextType = {
       primaryLocale,
-      children,
-      localization,
-      requestedLocales,
-      pseudoStrategy,
-      receiveL10n,
-      requestL10n,
-    } = this.props;
+      requestL10n: this._requestL10n,
+    };
+
     return (
-      <>
+      <L10nContext.Provider value={contextValue}>
         <AppLocalizationInit
-          requestL10n={requestL10n}
+          requestL10n={this._requestL10n}
           requestedLocales={requestedLocales}
         />
         <AppLocalizationFetcher
           requestedLocales={requestedLocales}
           pseudoStrategy={pseudoStrategy}
-          receiveL10n={receiveL10n}
+          receiveL10n={this._receiveL10n}
         />
         {/* if primaryLocale is null, the localization isn't ready */}
         {primaryLocale ? (
           <LocalizationProvider l10n={localization}>
             {children}
           </LocalizationProvider>
         ) : null}
-      </>
+      </L10nContext.Provider>
     );
   }
 }
-export const AppLocalizationProvider = explicitConnect<
-  ProviderOwnProps,
-  ProviderStateProps,
-  ProviderDispatchProps,
->({
-  mapStateToProps: (state) => ({
-    localization: getLocalization(state),
-    primaryLocale: getPrimaryLocale(state),
-    direction: getDirection(state),
-    requestedLocales: getRequestedLocales(state),
-    pseudoStrategy: getPseudoStrategy(state),
-  }),
-  mapDispatchToProps: {
-    requestL10n,
-    receiveL10n,
-  },
-  component: AppLocalizationProviderImpl,
-});
+
+// Hack: Expose a way to call globalL10nProvider.togglePseudoStrategy from window-console.js.
+export function togglePseudoStrategy(pseudoStrategy: PseudoStrategy) {
+  if (globalL10nProvider) {
+    globalL10nProvider.togglePseudoStrategy(pseudoStrategy);
+  }
+}

src/components/app/AppLocalizationProvider.js

@@ -8,67 +8,45 @@ import * as React from 'react';
 
 import { Localized } from '@fluent/react';
 
-import { requestL10n } from 'firefox-profiler/actions/l10n';
-import { getPrimaryLocale } from 'firefox-profiler/selectors/l10n';
 import {
   AVAILABLE_LOCALES_TO_LOCALIZED_NAMES,
   AVAILABLE_LOCALES,
 } from 'firefox-profiler/app-logic/l10n';
-import explicitConnect from 'firefox-profiler/utils/connect';
-
-import type { ConnectedProps } from 'firefox-profiler/utils/connect';
-
-type OwnProps = {||};
-type StateProps = {|
-  +primaryLocale: string | null,
-|};
-type DispatchProps = {|
-  requestL10n: typeof requestL10n,
-|};
-
-type Props = ConnectedProps<OwnProps, StateProps, DispatchProps>;
-class LanguageSwitcherImpl extends React.PureComponent<Props> {
-  _onLocaleChange = (event: SyntheticEvent<HTMLSelectElement>) => {
-    this.props.requestL10n([event.currentTarget.value]);
-  };
+import { useL10n } from 'firefox-profiler/hooks/useL10n';
+
+export function LanguageSwitcher(): React.Node {
+  const { primaryLocale, requestL10n } = useL10n();
+
+  const onLocaleChange = React.useCallback(
+    (event: SyntheticEvent<HTMLSelectElement>) => {
+      requestL10n([event.currentTarget.value]);
+    },
+    [requestL10n]
+  );
+
+  if (!primaryLocale) {
+    // We're actually guaranteed primaryLocale is not null, because
+    // AppLocalizationProvider doesn't render when it is. This check is mostly
+    // so that Flow doesn't warn later.
+    return null;
+  }
 
-  render() {
-    const { primaryLocale } = this.props;
-    if (!primaryLocale) {
-      // We're actually guaranteed primaryLocale is not null, because
-      // AppLocalizationProvider doesn't render when it is. This check is mostly
-      // so that Flow doesn't warn later.
-      return null;
-    }
-    return (
-      <Localized
-        id="FooterLinks--languageSwitcher--select"
-        attrs={{ title: true }}
+  return (
+    <Localized
+      id="FooterLinks--languageSwitcher--select"
+      attrs={{ title: true }}
+    >
+      <select
+        className="appFooterLinksLanguageSwitcher"
+        onChange={onLocaleChange}
+        value={primaryLocale}
       >
-        <select
-          className="appFooterLinksLanguageSwitcher"
-          onChange={this._onLocaleChange}
-          value={primaryLocale}
-        >
-          {AVAILABLE_LOCALES.map((locale) => (
-            <option value={locale} key={locale}>
-              {AVAILABLE_LOCALES_TO_LOCALIZED_NAMES[locale] ?? locale}
-            </option>
-          ))}
-        </select>
-      </Localized>
-    );
-  }
+        {AVAILABLE_LOCALES.map((locale) => (
+          <option value={locale} key={locale}>
+            {AVAILABLE_LOCALES_TO_LOCALIZED_NAMES[locale] ?? locale}
+          </option>
+        ))}
+      </select>
+    </Localized>
+  );
 }
-
-export const LanguageSwitcher = explicitConnect<
-  OwnProps,
-  StateProps,
-  DispatchProps,
->({
-  component: LanguageSwitcherImpl,
-  mapStateToProps: (state) => ({
-    primaryLocale: getPrimaryLocale(state),
-  }),
-  mapDispatchToProps: { requestL10n },
-});

src/components/app/LanguageSwitcher.js

@@ -0,0 +1,15 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+// @flow
+
+import * as React from 'react';
+
+// Create a context for L10n functionality
+export type L10nContextType = {
+  primaryLocale: string | null,
+  requestL10n: (locales: string[]) => void,
+};
+
+export const L10nContext: React.Context<L10nContextType | null> =
+  React.createContext(null);