root/regexper-static
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Updating LocaleSwitcher to use hooks

Browse Source
This commit is contained in:
Jeff Avallone 2019-03-26 21:25:06 -04:00
parent 18427f9fc6
commit 3105371954
3 changed files with 47 additions and 53 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
src/components/Header/__snapshots__/test.js.snap
View File

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

76
src/components/LocaleSwitcher/index.js
View File

@ -1,5 +1,5 @@
import React from 'react'; import React, { useState, useEffect, useCallback } from 'react';
import { withTranslation, Trans } from 'react-i18next'; import { Trans } from 'react-i18next';
import ExpandIcon from 'react-feather/dist/icons/chevrons-down'; 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 localeToAvailable from './locale-to-available';
import style from './style.module.css'; import style from './style.module.css';
export class LocaleSwitcher extends React.PureComponent { const LocaleSwitcher = () => {
state = { const [ current, updateCurrent ] = useState(localeToAvailable(
current: localeToAvailable( i18n.language || '',
i18n.language || '', locales.map(l => l.code),
locales.map(l => l.code), 'en'));
'en')
}
componentDidMount() { useEffect(() => {
i18n.on('languageChanged', this.handleLanguageChange); i18n.on('languageChanged', updateCurrent);
}
componentWillUnmount() { return () => {
i18n.off('languageChanged', this.handleLanguageChange); i18n.off('languageChanged', updateCurrent);
} };
});
handleSelectChange = ({ target }) => { const handleSelectChange = useCallback(({ target }) => {
i18n.changeLanguage(target.value); i18n.changeLanguage(target.value);
} });
handleLanguageChange = lang => { return <label>
this.setState({ current: lang }); <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() { export default LocaleSwitcher;
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);

10
src/components/LocaleSwitcher/test.js
View File

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