From efc8f6744aa2909eb00b29e834029f7b4c049ee8 Mon Sep 17 00:00:00 2001
From: Jeff Avallone <jeff.avallone@gmail.com>
Date: Thu, 31 May 2018 19:06:33 -0400
Subject: [PATCH] Adding a LocaleSwitch component

Still needs some styling, but it is functional
---
 .../LocaleSwitcher/__snapshots__/test.js.snap | 14 ++++
 src/components/LocaleSwitcher/index.js        | 65 +++++++++++++++++++
 src/components/LocaleSwitcher/style.css       |  3 +
 src/components/LocaleSwitcher/test.js         | 16 +++++
 src/locales/en/translation.yaml               |  1 +
 5 files changed, 99 insertions(+)
 create mode 100644 src/components/LocaleSwitcher/__snapshots__/test.js.snap
 create mode 100644 src/components/LocaleSwitcher/index.js
 create mode 100644 src/components/LocaleSwitcher/style.css
 create mode 100644 src/components/LocaleSwitcher/test.js

diff --git a/src/components/LocaleSwitcher/__snapshots__/test.js.snap b/src/components/LocaleSwitcher/__snapshots__/test.js.snap
new file mode 100644
index 0000000..303aac8
--- /dev/null
+++ b/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>
+`;
diff --git a/src/components/LocaleSwitcher/index.js b/src/components/LocaleSwitcher/index.js
new file mode 100644
index 0000000..c49f6c3
--- /dev/null
+++ b/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 };
diff --git a/src/components/LocaleSwitcher/style.css b/src/components/LocaleSwitcher/style.css
new file mode 100644
index 0000000..2562496
--- /dev/null
+++ b/src/components/LocaleSwitcher/style.css
@@ -0,0 +1,3 @@
+.switcher {
+  margin-left: 1ex;
+}
diff --git a/src/components/LocaleSwitcher/test.js b/src/components/LocaleSwitcher/test.js
new file mode 100644
index 0000000..f3bcd73
--- /dev/null
+++ b/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();
+  });
+});
diff --git a/src/locales/en/translation.yaml b/src/locales/en/translation.yaml
index 1258708..d8dab9b 100644
--- a/src/locales/en/translation.yaml
+++ b/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?