Adding a LocaleSwitch component

Still needs some styling, but it is functional

src/components/LocaleSwitcher/__snapshots__/test.js.snap

@@ -0,0 +1,14 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`LocaleSwitcher rendering 1`] = `
+<label>
+  <Trans>
+    Language
+  </Trans>
+  <select
+    className="switcher"
+    onChange={[Function]}
+    value="en"
+  />
+</label>
+`;

src/components/LocaleSwitcher/index.js

@@ -0,0 +1,65 @@
+import React from 'react';
+import { translate, Trans } from 'react-i18next';
+import i18n from 'i18next';
+
+import style from './style.css';
+
+import locales from 'locales';
+
+const localeToAvailable = (locale, available, defaultLocale) => {
+  if (available.includes(locale)) {
+    return locale;
+  }
+
+  const parts = locale.split('-');
+
+  if (parts.length > 0 && available.includes(parts[0])) {
+    return parts[0];
+  }
+
+  return defaultLocale;
+};
+
+class LocaleSwitcher extends React.PureComponent {
+  constructor() {
+    super();
+
+    this.state = {
+      current: localeToAvailable(i18n.language || '', Object.keys(locales), 'en')
+    };
+  }
+
+  localeSelector = React.createRef()
+
+  componentDidMount() {
+    i18n.on('languageChanged', this.handleLanguageChange);
+  }
+
+  componentWillUnmount() {
+    i18n.off('languageChanged', this.handleLanguageChange);
+  }
+
+  handleSelectChange = () => {
+    i18n.changeLanguage(this.localeSelector.current.value);
+  }
+
+  handleLanguageChange = lang => {
+    this.setState({ current: lang });
+  }
+
+  render() {
+    const { current } = this.state;
+
+    return <label>
+      <Trans>Language</Trans>
+      <select className={ style.switcher } value={ current } ref={ this.localeSelector } onChange={ this.handleSelectChange }>
+        { Object.keys(locales).map(locale => (
+          <option value={ locale } key={ locale }>{ i18n.getFixedT(locale)('/displayName') }</option>
+        )) }
+      </select>
+    </label>;
+  }
+}
+
+export default translate()(LocaleSwitcher);
+export { LocaleSwitcher };

src/components/LocaleSwitcher/style.css

@@ -0,0 +1,3 @@
+.switcher {
+  margin-left: 1ex;
+}

src/components/LocaleSwitcher/test.js

@@ -0,0 +1,16 @@
+jest.mock('components/SVG');
+
+import React from 'react';
+import { shallow } from 'enzyme';
+
+import { LocaleSwitcher } from 'components/LocaleSwitcher';
+import { translate } from '__mocks__/i18n';
+
+describe('LocaleSwitcher', () => {
+  test('rendering', () => {
+    const component = shallow(
+      <LocaleSwitcher t={ translate }/>
+    );
+    expect(component).toMatchSnapshot();
+  });
+});

src/locales/en/translation.yaml

@@ -1,3 +1,4 @@
+/displayName: English
 404 Page Not Found: '404: Page Not Found'
 Add It: Add It
 Add Regexper to your home screen?: Add Regexper to your home screen?