Updating LocaleSwitcher to use hooks

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

@@ -67,7 +67,7 @@ exports[`Header opening the Privacy Policy modal 1`] = `
         data-requires-js="true"
       >
         <span
-          data-component="withI18nextTranslation(LocaleSwitcher)"
+          data-component="LocaleSwitcher"
           data-props="{}"
         />
       </li>
@@ -143,7 +143,7 @@ exports[`Header opening the Privacy Policy modal while holding alt key 1`] = `
         data-requires-js="true"
       >
         <span
-          data-component="withI18nextTranslation(LocaleSwitcher)"
+          data-component="LocaleSwitcher"
           data-props="{}"
         />
       </li>
@@ -219,7 +219,7 @@ exports[`Header opening the Privacy Policy modal while holding ctrl key 1`] = `
         data-requires-js="true"
       >
         <span
-          data-component="withI18nextTranslation(LocaleSwitcher)"
+          data-component="LocaleSwitcher"
           data-props="{}"
         />
       </li>
@@ -295,7 +295,7 @@ exports[`Header opening the Privacy Policy modal while holding meta key 1`] = `
         data-requires-js="true"
       >
         <span
-          data-component="withI18nextTranslation(LocaleSwitcher)"
+          data-component="LocaleSwitcher"
           data-props="{}"
         />
       </li>
@@ -371,7 +371,7 @@ exports[`Header opening the Privacy Policy modal while holding shift key 1`] = `
         data-requires-js="true"
       >
         <span
-          data-component="withI18nextTranslation(LocaleSwitcher)"
+          data-component="LocaleSwitcher"
           data-props="{}"
         />
       </li>
@@ -448,7 +448,7 @@ exports[`Header rendering 1`] = `
         data-requires-js="true"
       >
         <span
-          data-component="withI18nextTranslation(LocaleSwitcher)"
+          data-component="LocaleSwitcher"
           data-props="{}"
         />
       </li>
@@ -524,7 +524,7 @@ exports[`Header rendering with no banner 1`] = `
         data-requires-js="true"
       >
         <span
-          data-component="withI18nextTranslation(LocaleSwitcher)"
+          data-component="LocaleSwitcher"
           data-props="{}"
         />
       </li>

src/components/LocaleSwitcher/index.js

@@ -1,5 +1,5 @@
-import React from 'react';
-import { withTranslation, Trans } from 'react-i18next';
+import React, { useState, useEffect, useCallback } from 'react';
+import { Trans } from 'react-i18next';
 
 import ExpandIcon from 'react-feather/dist/icons/chevrons-down';
 
@@ -8,50 +8,40 @@ import i18n, { locales } from 'i18n';
 import localeToAvailable from './locale-to-available';
 import style from './style.module.css';
 
-export class LocaleSwitcher extends React.PureComponent {
-  state = {
-    current: localeToAvailable(
-      i18n.language || '',
-      locales.map(l => l.code),
-      'en')
-  }
+const LocaleSwitcher = () => {
+  const [ current, updateCurrent ] = useState(localeToAvailable(
+    i18n.language || '',
+    locales.map(l => l.code),
+    'en'));
 
-  componentDidMount() {
-    i18n.on('languageChanged', this.handleLanguageChange);
-  }
+  useEffect(() => {
+    i18n.on('languageChanged', updateCurrent);
 
-  componentWillUnmount() {
-    i18n.off('languageChanged', this.handleLanguageChange);
-  }
+    return () => {
+      i18n.off('languageChanged', updateCurrent);
+    };
+  });
 
-  handleSelectChange = ({ target }) => {
+  const handleSelectChange = useCallback(({ target }) => {
     i18n.changeLanguage(target.value);
-  }
+  });
 
-  handleLanguageChange = lang => {
-    this.setState({ current: lang });
-  }
+  return <label>
+    <Trans>Language</Trans>
+    <div className={ style.switcher }>
+      <select data-testid="language-select"
+        value={ current }
+        onChange={ handleSelectChange }
+      >
+        { locales.map(locale => (
+          <option value={ locale.code } key={ locale.code }>
+            { locale.name }
+          </option>
+        )) }
+      </select>
+      <ExpandIcon />
+    </div>
+  </label>;
+};
 
-  render() {
-    const { current } = this.state;
-
-    return <label>
-      <Trans>Language</Trans>
-      <div className={ style.switcher }>
-        <select data-testid="language-select"
-          value={ current }
-          onChange={ this.handleSelectChange }
-        >
-          { locales.map(locale => (
-            <option value={ locale.code } key={ locale.code }>
-              { locale.name }
-            </option>
-          )) }
-        </select>
-        <ExpandIcon />
-      </div>
-    </label>;
-  }
-}
-
-export default withTranslation()(LocaleSwitcher);
+export default LocaleSwitcher;

src/components/LocaleSwitcher/test.js

@@ -3,10 +3,10 @@ jest.mock('react-feather/dist/icons/chevrons-down', () =>
     'react-feather/dist/icons/chevrons-down'));
 
 import React from 'react';
-import { render, fireEvent } from 'react-testing-library';
+import { render, fireEvent, act } from 'react-testing-library';
 
 import i18n from 'i18n';
-import { LocaleSwitcher } from 'components/LocaleSwitcher';
+import LocaleSwitcher from 'components/LocaleSwitcher';
 
 // Ensure initial locale is always "en" during tests
 jest.mock('./locale-to-available', () => jest.fn(() => 'en'));
@@ -40,7 +40,11 @@ describe('LocaleSwitcher', () => {
     );
 
     expect(getByTestId('language-select').value).toEqual('en');
-    i18n.emit('languageChanged', 'other');
+
+    act(() => {
+      i18n.emit('languageChanged', 'other');
+    });
+
     expect(getByTestId('language-select').value).toEqual('other');
   });