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/AppMessagePanel.tsx

@@ -1,23 +1,24 @@
 import React from 'react'
 import {formatLayerId} from '../libs/format';
 import {LayerSpecification, StyleSpecification} from 'maplibre-gl';
+import { Trans, WithTranslation, withTranslation } from 'react-i18next';
 
-type AppMessagePanelProps = {
+type AppMessagePanelInternalProps = {
   errors?: unknown[]
   infos?: string[]
   mapStyle?: StyleSpecification
   onLayerSelect?(...args: unknown[]): unknown
   currentLayer?: LayerSpecification
   selectedLayerIndex?: number
-};
+} & WithTranslation;
 
-export default class AppMessagePanel extends React.Component<AppMessagePanelProps> {
+class AppMessagePanelInternal extends React.Component<AppMessagePanelInternalProps> {
   static defaultProps = {
     onLayerSelect: () => {},
   }
 
   render() {
-    const {selectedLayerIndex} = this.props;
+    const {t, selectedLayerIndex} = this.props;
     const errors = this.props.errors?.map((error: any, idx) => {
       let content;
       if (error.parsed && error.parsed.type === "layer") {
@@ -25,7 +26,9 @@ export default class AppMessagePanel extends React.Component<AppMessagePanelProp
         const layerId = this.props.mapStyle?.layers[parsed.data.index].id;
         content = (
           <>
-            Layer <span>{formatLayerId(layerId)}</span>: {parsed.data.message}
+            <Trans t={t}>
+              Layer <span>{formatLayerId(layerId)}</span>: {parsed.data.message}
+            </Trans>
             {selectedLayerIndex !== parsed.data.index &&
               <>
                 &nbsp;&mdash;&nbsp;
@@ -33,7 +36,7 @@ export default class AppMessagePanel extends React.Component<AppMessagePanelProp
                   className="maputnik-message-panel__switch-button"
                   onClick={() => this.props.onLayerSelect!(parsed.data.index)}
                 >
-                  switch to layer
+                  {t("switch to layer")}
                 </button>
               </>
             }
@@ -59,3 +62,5 @@ export default class AppMessagePanel extends React.Component<AppMessagePanelProp
   }
 }
 
+const AppMessagePanel = withTranslation()(AppMessagePanelInternal);
+export default AppMessagePanel;