Make sure all pages can be translated at load time (with HOC)

packages/fakeyou/src/App.tsx

@@ -82,6 +82,7 @@ interface State {
   //localeFullLanguageTags: string[],
   isShowingLanguageNotice: boolean,
   displayLanguage: Language,
+  primaryLanguageCode: string,
 
   // Jobs enqueued during this browser session.
   ttsInferenceJobs: Array<TtsInferenceJob>,
@@ -121,6 +122,7 @@ class App extends React.Component<Props, State> {
       //localeFullLanguageTags: [],
       isShowingLanguageNotice: false,
       displayLanguage: Language.English,
+      primaryLanguageCode: 'en',
 
       ttsInferenceJobs: [],
       w2lInferenceJobs: [],
@@ -209,6 +211,7 @@ class App extends React.Component<Props, State> {
       this.setState({
         isShowingLanguageNotice: showNotice,
         displayLanguage: displayLanguage,
+        primaryLanguageCode: languageCode,
       });
 
       i18n.changeLanguage(languageCode);
@@ -507,6 +510,7 @@ class App extends React.Component<Props, State> {
                     isShowingLangaugeNotice={this.state.isShowingLanguageNotice}
                     clearLanguageNotice={this.clearLanguageNotice}
                     displayLanguage={this.state.displayLanguage}
+                    primaryLanguageCode={this.state.primaryLanguageCode}
 
                     enqueueTtsJob={this.enqueueTtsJob}
                     ttsInferenceJobs={this.state.ttsInferenceJobs}

packages/fakeyou/src/AppTranslated.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import { withTranslation } from 'react-i18next';
+import { AppWrapper } from './AppWrapper';
+
+interface Props {
+  // Certan browsers (iPhone) have pitiful support for drawing APIs. Worse yet,
+  // they seem to lose the "touch event sandboxing" that allows for audio to be 
+  // played after user interaction if the XHRs delivering the audio don't do so
+  // as actual audio mimetypes. (Decoding from base64 and trying to play fails.)
+  enableSpectrograms: boolean,
+
+  // Whether or not to inform users that the name of the website has changed.
+  flashVocodesNotice: boolean,
+}
+
+function AppTranslated(props: Props) {
+  return (
+    <AppWrapper 
+        enableSpectrograms={props.enableSpectrograms} 
+        flashVocodesNotice={props.flashVocodesNotice}
+      />
+  )
+}
+
+// NB: This is a Higher Order Component (HOC) that will pass `t` and `i18n`
+// so that we can change the language statefully at runtime. If we don't do
+// this, some pages won't respond to translation.
+export default withTranslation()(AppTranslated);

packages/fakeyou/src/index.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import './index.css';
 import * as serviceWorker from './serviceWorker';
-import { AppWrapper } from './AppWrapper';
+import AppTranslated from './AppTranslated';
 
 const IS_IOS : boolean = /iPad|iPhone|iPod/.test(navigator.platform || "");
 
@@ -12,7 +12,7 @@ const flashVocodesNotice = new URLSearchParams(window.location.search).has('voco
 
 ReactDOM.render(
   <React.StrictMode>
-    <AppWrapper 
+    <AppTranslated
         enableSpectrograms={enableSpectrograms} 
         flashVocodesNotice={flashVocodesNotice}
       />