Add Lingui support, take 2.

.dockerignore

@@ -11,6 +11,8 @@ __pycache__/
 node_modules/
 tsc-build/
 coverage/
+locales/_build
+locales/**/messages.js
 frontend/static/frontend/*.js
 frontend/static/frontend/*.css
 frontend/static/frontend/*.map

.github/workflows/lint_typescript.yml

@@ -30,8 +30,9 @@ jobs:
       - name: Install dependencies
         run: |
           yarn --frozen-lockfile
-      - name: Build auto-generated TypeScript files
+      - name: Build auto-generated TypeScript/JS files
         run: |
+          yarn lingui:compile
           yarn querybuilder
       - name: Run linters
         run: |

.gitignore

@@ -10,6 +10,8 @@ __pycache__/
 node_modules/
 tsc-build/
 coverage/
+locales/_build
+locales/**/messages.js
 frontend/static/frontend/*.js
 frontend/static/frontend/*.css
 frontend/static/frontend/*.map

.prettierignore

@@ -17,6 +17,8 @@ tsconfig.json
 node_modules
 
 # These files are auto-generated.
+locales/_build/**/*.json
+locales/**/messages.js
 frontend/lib/queries
 lambda.js
 frontend/static

README.md

@@ -379,7 +379,25 @@ python3 deploy.py heroku
 ```
 
 You'll likely want to use [Heroku Postgres][] as your
-database backend.
+ndatabase backend.
+
+## Internationalization
+
+The front-end uses [Lingui][] for internationalization. To extract
+messages for localization, run:
+
+```
+yarn lingui:extract
+```
+
+Once `.po` files have been updated, the catalogs can be compiled to JS
+with:
+
+```
+yarn lingui:compile
+```
+
+[Lingui]: https://lingui.js.org/
 
 ## Optional integrations
 

conftest.py

@@ -10,6 +10,7 @@
 from django.core.management import call_command
 from django.contrib.auth.models import AnonymousUser, Group
 from django.contrib.sessions.middleware import SessionMiddleware
+from django.contrib.sites.models import Site
 import subprocess
 import pytest
 import requests_mock as requests_mock_module
@@ -306,3 +307,14 @@ def mockdocusign(db, settings, monkeypatch):
     from docusign.tests.docusign_fixture import mockdocusign
 
     yield from mockdocusign(db, settings, monkeypatch)
+
+
+@pytest.fixture
+def use_norent_site(db):
+    '''
+    Set the default site as being the NoRent.org site.
+    '''
+
+    site = Site.objects.get(pk=1)
+    site.name = "NoRent.org"
+    site.save()

frontend/lambda/tests/lambda.test.tsx

@@ -5,8 +5,8 @@ import { AppProps } from "../../lib/app";
 import { FakeServerInfo, FakeSessionInfo } from "../../lib/tests/util";
 
 const fakeAppProps: AppProps = {
-  initialURL: "/",
-  locale: "",
+  initialURL: "/en/",
+  locale: "en",
   server: FakeServerInfo,
   initialSession: FakeSessionInfo,
 };
@@ -24,7 +24,7 @@ test("lambda redirects", async () => {
     initialURL: "/dev/examples/redirect",
   });
   expect(response.status).toBe(302);
-  expect(response.location).toBe("/");
+  expect(response.location).toBe("/en/");
 });
 
 test("lambda catches errors", async () => {

frontend/lib/app.tsx

@@ -36,6 +36,7 @@ import { HelmetProvider } from "react-helmet-async";
 import { browserStorage } from "./browser-storage";
 import { areAnalyticsEnabled } from "./analytics/analytics";
 import { default as JustfixRoutes } from "./routes";
+import { LinguiI18n } from "./i18n-lingui";
 import { NorentRoutes, getNorentJumpToTopOfPageRoutes } from "./norent/routes";
 
 // Note that these don't need any special fallback loading screens
@@ -57,6 +58,13 @@ export interface AppProps {
    * The locale the user is on. This can be an empty string to
    * indicate that localization is disabled, or an ISO 639-1
    * code such as 'en' or 'es'.
+   *
+   * NOTE: Since the back-end *always* enables localization, this
+   * will never be the empty string in production. However, some
+   * tests still assume it will be empty, so we're still allowing
+   * it for now. For more details, see:
+   *
+   * https://github.com/JustFixNYC/tenants2/issues/1382
    */
   locale: string;
 
@@ -351,13 +359,15 @@ export class AppWithoutRouter extends React.Component<
 
     return (
       <ErrorBoundary debug={this.props.server.debug}>
-        <HistoryBlockerManager>
-          <AppContext.Provider value={this.getAppContext()}>
-            <AriaAnnouncer>
-              <Site {...this.props} ref={this.pageBodyRef} />
-            </AriaAnnouncer>
-          </AppContext.Provider>
-        </HistoryBlockerManager>
+        <LinguiI18n>
+          <HistoryBlockerManager>
+            <AppContext.Provider value={this.getAppContext()}>
+              <AriaAnnouncer>
+                <Site {...this.props} ref={this.pageBodyRef} />
+              </AriaAnnouncer>
+            </AppContext.Provider>
+          </HistoryBlockerManager>
+        </LinguiI18n>
       </ErrorBoundary>
     );
   }

frontend/lib/i18n-lingui.tsx

@@ -0,0 +1,101 @@
+import React, { useMemo } from "react";
+import { Catalog } from "@lingui/core";
+import loadable, { LoadableLibrary } from "@loadable/component";
+import { I18nProvider } from "@lingui/react";
+import i18n from "./i18n";
+import { setupI18n as linguiSetupI18n } from "@lingui/core";
+
+/**
+ * We use code splitting to make sure that we only load the message
+ * catalog needed for our currently selected locale.
+ *
+ * This defines the type of component whose children prop is a
+ * callable that receives a Lingui message catalog as its only
+ * argument.
+ */
+export type LoadableCatalog = LoadableLibrary<Catalog>;
+
+const EnCatalog: LoadableCatalog = loadable.lib(
+  () => import("../../locales/en/messages") as any
+);
+
+const EsCatalog: LoadableCatalog = loadable.lib(
+  () => import("../../locales/es/messages") as any
+);
+
+/**
+ * Returns a component that loads the Lingui message catalog for
+ * the given string.
+ */
+function getLinguiCatalogForLanguage(locale: string): LoadableCatalog {
+  switch (locale) {
+    case "en":
+      return EnCatalog;
+    case "es":
+      return EsCatalog;
+  }
+  throw new Error(`Unsupported locale "${locale}"`);
+}
+
+const SetupI18n: React.FC<
+  LinguiI18nProps & {
+    locale: string;
+    catalog: Catalog;
+  }
+> = (props) => {
+  const { locale, catalog } = props;
+
+  // This useMemo() call might be overkill. -AV
+  const ourLinguiI18n = useMemo(() => {
+    li18n.load({
+      [locale]: catalog,
+    });
+    li18n.activate(locale);
+    return li18n;
+  }, [locale, catalog]);
+
+  return (
+    <I18nProvider language={locale} i18n={ourLinguiI18n}>
+      {props.children}
+    </I18nProvider>
+  );
+};
+
+export type LinguiI18nProps = {
+  /** Children to render once localization data is loaded. */
+  children: React.ReactNode;
+};
+
+/**
+ * Loads the Lingui message catalog for the currently selected
+ * locale, as dictated by our global i18n module. Children
+ * will then be rendered with the catalog loaded and ready
+ * to translate.
+ *
+ * While a loading message will appear while the catalog is being loaded,
+ * because we do server-side rendering and pre-load JS bundles in the
+ * server-rendered HTML output, the user won't see the message most
+ * (possibly all) of the time.
+ *
+ * Note that this component is currently a singleton; more than one
+ * instance of it should never exist in a component tree at once.
+ */
+export const LinguiI18n: React.FC<LinguiI18nProps> = (props) => {
+  const locale = i18n.locale;
+
+  const Catalog = getLinguiCatalogForLanguage(locale);
+
+  return (
+    <Catalog fallback={<p>Loading locale data...</p>}>
+      {(catalog) => <SetupI18n {...props} locale={locale} catalog={catalog} />}
+    </Catalog>
+  );
+};
+
+/**
+ * A global instance of Lingui's I18n object, which can be used to perform
+ * localization outside of React JSX. Note that this object is populated
+ * by the <LinguiI18n> component, however, so it should only really be
+ * used by components that exist below it in the hierarchy.
+ */
+export const li18n = linguiSetupI18n();

frontend/lib/norent/faqs.tsx

@@ -6,6 +6,8 @@ import { NorentRoutes } from "./routes";
 import { FaqsContent, Faq, FaqCategory } from "./data/faqs-content";
 import Page from "../ui/page";
 import { ScrollyLink } from "../ui/scrolly-link";
+import { li18n } from "../i18n-lingui";
+import { t } from "@lingui/macro";
 
 const FAQS_PAGE_CATEGORIES_IN_ORDER: FaqCategory[] = [
   "Letter Builder",
@@ -84,7 +86,7 @@ export const NorentFaqsPreview = () => {
 
 export const NorentFaqsPage: React.FC<{}> = () => {
   return (
-    <Page title="FAQs" className="content">
+    <Page title={li18n._(t`FAQs`)} className="content">
       <section className="hero is-medium">
         <div className="hero-body">
           <div className="container jf-has-text-centered-tablet">

frontend/lib/norent/site.tsx

@@ -31,6 +31,7 @@ import { NorentLetterBuilderRoutes } from "./letter-builder/steps";
 import { NorentLogoutPage } from "./log-out";
 import { NorentHelmet } from "./components/helmet";
 import { NorentLetterEmailToUserStaticPage } from "./letter-email-to-user";
+import { Trans } from "@lingui/macro";
 
 function getRoutesForPrimaryPages() {
   return new Set(getNorentRoutesForPrimaryPages());
@@ -95,7 +96,7 @@ const NorentMenuItems: React.FC<{}> = () => {
   return (
     <>
       <Link className="navbar-item" to={Routes.locale.letter.latestStep}>
-        Build my Letter
+        <Trans>Build my Letter</Trans>
       </Link>
       <Link className="navbar-item" to={Routes.locale.aboutLetter}>
         The Letter

frontend/lib/tests/i18n-lingui.test.tsx

@@ -0,0 +1,32 @@
+import React from "react";
+import i18n from "../i18n";
+import ReactTestingLibraryPal from "./rtl-pal";
+import { LinguiI18n, li18n } from "../i18n-lingui";
+import { Trans, t } from "@lingui/macro";
+import { wait } from "@testing-library/react";
+
+describe("<LinguiI18n>", () => {
+  afterEach(ReactTestingLibraryPal.cleanup);
+
+  const helloWorldJSX = (
+    <LinguiI18n>
+      <Trans>Hello world</Trans>
+    </LinguiI18n>
+  );
+
+  it("Works in English", async () => {
+    i18n.initialize("en");
+    const pal = new ReactTestingLibraryPal(helloWorldJSX);
+    await wait(() => pal.rr.getByText("Hello world"));
+    expect(li18n.language).toBe("en");
+    expect(li18n._(t`Hello world`)).toBe("Hello world");
+  });
+
+  it("works in Spanish", async () => {
+    i18n.initialize("es");
+    const pal = new ReactTestingLibraryPal(helloWorldJSX);
+    await wait(() => pal.rr.getByText("Hola mundo"));
+    expect(li18n.language).toBe("es");
+    expect(li18n._(t`Hello world`)).toBe("Hola mundo");
+  });
+});

frontend/webpack/base.js

@@ -79,6 +79,7 @@ const baseBabelOptions = {
     "@babel/plugin-syntax-dynamic-import",
     "@babel/plugin-proposal-optional-chaining",
     "@babel/plugin-proposal-nullish-coalescing-operator",
+    "babel-plugin-macros",
     "@loadable/babel-plugin",
   ],
 };

lingui.config.js

@@ -0,0 +1,15 @@
+const assert = require("assert");
+
+const { nodeBabelOptions } = require("./frontend/webpack/base");
+
+let { presets, plugins } = nodeBabelOptions;
+
+assert(presets && plugins);
+
+module.exports = {
+  extractBabelOptions: { presets, plugins },
+  localeDir: "locales/",
+  srcPathDirs: ["frontend/lib/"],
+  format: "po",
+  sourceLocale: "en",
+};

locales/en/messages.po

@@ -0,0 +1,28 @@
+msgid ""
+msgstr ""
+"POT-Creation-Date: 2020-05-05 12:34+0000\n"
+"Mime-Version: 1.0\n"
+"Content-Type: text/plain; charset=utf-8\n"
+"Content-Transfer-Encoding: 8bit\n"
+"X-Generator: @lingui/cli\n"
+"Language: en\n"
+"Project-Id-Version: \n"
+"Report-Msgid-Bugs-To: \n"
+"PO-Revision-Date: \n"
+"Last-Translator: \n"
+"Language-Team: \n"
+"Plural-Forms: \n"
+
+#: frontend/lib/norent/site.tsx:58
+msgid "Build my Letter"
+msgstr "Build my Letter"
+
+#: frontend/lib/norent/faqs.tsx:70
+msgid "FAQs"
+msgstr "FAQs"
+
+#: frontend/lib/tests/i18n-lingui.test.tsx:19
+#: frontend/lib/tests/i18n-lingui.test.tsx:26
+#: frontend/lib/tests/i18n-lingui.test.tsx:33
+msgid "Hello world"
+msgstr "Hello world"