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/components/InputUrl.tsx

@@ -1,9 +1,10 @@
 import React from 'react'
 import InputString from './InputString'
 import SmallError from './SmallError'
+import { Trans, WithTranslation, withTranslation } from 'react-i18next';
+import { TFunction } from 'i18next';
 
-
-function validate(url: string) {
+function validate(url: string, t: TFunction): JSX.Element | undefined {
   if (url === "") {
     return;
   }
@@ -22,15 +23,19 @@ function validate(url: string) {
   const isSsl = window.location.protocol === "https:";
 
   if (!protocol) {
-    error = (
-      <SmallError>
-        Must provide protocol {
-          isSsl
-            ? <code>https://</code>
-            : <><code>http://</code> or <code>https://</code></>
-        }
-      </SmallError>
-    );
+    if (isSsl) {
+      error = (
+        <SmallError>
+          <Trans t={t}>Must provide protocol: <code>https://</code></Trans>
+        </SmallError>
+      );
+    } else {
+      error = (
+        <SmallError>
+          <Trans t={t}>Must provide protocol: <code>http://</code> or <code>https://</code></Trans>
+        </SmallError>
+      );
+    }
   }
   else if (
     protocol &&
@@ -39,7 +44,9 @@ function validate(url: string) {
   ) {
     error = (
       <SmallError>
-        CORS policy won&apos;t allow fetching resources served over http from https, use a <code>https://</code> domain
+        <Trans t={t}>
+          CORS policy won&apos;t allow fetching resources served over http from https, use a <code>https://</code> domain
+        </Trans>
       </SmallError>
     );
   }
@@ -61,32 +68,34 @@ export type FieldUrlProps = {
   className?: string
 };
 
+type FieldUrlInternalProps = FieldUrlProps & WithTranslation;
+
 type FieldUrlState = {
   error?: React.ReactNode
 }
 
-export default class FieldUrl extends React.Component<FieldUrlProps, FieldUrlState> {
+class FieldUrlInternal extends React.Component<FieldUrlInternalProps, FieldUrlState> {
   static defaultProps = {
     onInput: () => {},
   }
 
-  constructor (props: FieldUrlProps) {
+  constructor (props: FieldUrlInternalProps) {
     super(props);
     this.state = {
-      error: validate(props.value)
+      error: validate(props.value, props.t),
     };
   }
 
   onInput = (url: string) => {
     this.setState({
-      error: validate(url)
+      error: validate(url, this.props.t),
     });
     if (this.props.onInput) this.props.onInput(url);
   }
 
   onChange = (url: string) => {
     this.setState({
-      error: validate(url)
+      error: validate(url, this.props.t),
     });
     this.props.onChange(url);
   }
@@ -106,3 +115,5 @@ export default class FieldUrl extends React.Component<FieldUrlProps, FieldUrlSta
   }
 }
 
+const FieldUrl = withTranslation()(FieldUrlInternal);
+export default FieldUrl;