Add react-i18next for multi-language support (#917)

This is a rough start on adding react-i18next. I'll be working on adding
more translatable strings and translations in the coming days. I'm going
to need to wrap class components in HOCs, so let me know if there's
something I should be fixing before doing that. I'm thinking now to keep
the exported class names exactly the same, and rename the existing
classes by prefixing an `I` (for internal). For example:

```
export default class AppToolbar ...
```

becomes

```
class IAppToolbar ...
const AppToolbar = withTranslation()(IAppToolbar);
export default AppToolbar;
```

I'll be able to contribute Japanese strings (I've talked to a couple
people on my team and they'll be happy to help as well), so that's the
language I decided to go with in this PR.

Closes #746

---------

Co-authored-by: Ko Nagase <nagase@georepublic.co.jp>
Co-authored-by: Harel M <harel.mazor@gmail.com>

src/i18n.ts

@@ -0,0 +1,39 @@
+import i18n from "i18next";
+import detector from "i18next-browser-languagedetector";
+import resourcesToBackend from "i18next-resources-to-backend";
+import { initReactI18next } from "react-i18next";
+
+export const supportedLanguages = {
+  "en": "English",
+  "ja": "日本語",
+  "he": "עברית",
+} as const;
+
+i18n
+  .use(detector) // detect user language from browser settings
+  .use(
+    resourcesToBackend((lang: string, ns: string) => {
+      if (lang === "en") {
+        // English is the default language, so we don't need to load any resources for it.
+        return {};
+      }
+      return import(`./locales/${lang}/${ns}.json`);
+    })
+  )
+  .use(initReactI18next) // required to initialize react-i18next
+  .init({
+    supportedLngs: Object.keys(supportedLanguages),
+    keySeparator: false, // we do not use keys in form messages.welcome
+    nsSeparator: false,
+    interpolation: {
+      escapeValue: false // React already escapes for us
+    },
+    saveMissing: true, // this needs to be set for missingKeyHandler to work
+    fallbackLng: false, // we set the fallback to false so we can get the correct language in the missingKeyHandler
+    missingKeyHandler: (lngs, _ns, key) => {
+      if (lngs[0] === "en") { return; }
+      console.warn(`Missing translation for "${key}" in "${lngs.join(", ")}"`);
+    }
+  });
+
+export default i18n;