From ab47c5c729cd2f99a06907853c32039861e9515e Mon Sep 17 00:00:00 2001 From: jonatansalas Date: Sat, 22 Apr 2017 18:45:28 -0300 Subject: [PATCH] #6 Work on components refactor to depend on translate from 'react-i18n-polyglot' module and also remove old components --- package.json | 1 + src/Admin.js | 2 +- src/i18n/TranslationProvider.js | 32 ++------------------------- src/i18n/TranslationUtils.js | 8 ------- src/i18n/TranslationUtils.spec.js | 21 ------------------ src/i18n/index.js | 4 ++-- src/i18n/translate.js | 15 ------------- src/i18n/translate.spec.js | 14 ------------ src/mui/auth/Login.js | 2 +- src/mui/auth/Logout.js | 2 +- src/mui/button/CancelButton.js | 2 +- src/mui/button/CreateButton.js | 2 +- src/mui/button/DeleteButton.js | 2 +- src/mui/button/EditButton.js | 2 +- src/mui/button/ListButton.js | 2 +- src/mui/button/RefreshButton.js | 2 +- src/mui/button/SaveButton.js | 4 +--- src/mui/button/ShowButton.js | 2 +- src/mui/delete/Delete.js | 2 +- src/mui/detail/Create.js | 2 +- src/mui/detail/Edit.js | 2 +- src/mui/detail/Show.js | 3 +-- src/mui/form/TabbedForm.js | 2 +- src/mui/input/ImageInput.js | 2 +- src/mui/input/NullableBooleanInput.js | 2 +- src/mui/layout/DashboardMenuItem.js | 2 +- src/mui/layout/Menu.js | 2 +- src/mui/layout/Notification.js | 4 ++-- src/mui/layout/Title.js | 2 +- src/mui/list/FilterButton.js | 2 +- src/mui/list/FilterForm.js | 2 +- src/mui/list/FilterForm.spec.js | 2 +- src/mui/list/List.js | 2 +- src/mui/list/Pagination.js | 4 ++-- src/util/FieldTitle.js | 2 +- yarn.lock | 21 ++++++++++++++++-- 36 files changed, 54 insertions(+), 125 deletions(-) delete mode 100644 src/i18n/TranslationUtils.js delete mode 100644 src/i18n/TranslationUtils.spec.js delete mode 100644 src/i18n/translate.js delete mode 100644 src/i18n/translate.spec.js diff --git a/package.json b/package.json index 85993f3..91e6da1 100644 --- a/package.json +++ b/package.json @@ -62,6 +62,7 @@ "react": "~15.4.0", "react-dom": "~15.4.0", "react-dropzone": "~3.6.0", + "react-i18n-polyglot": "^1.0.0", "react-redux": "~4.4.5", "react-router": "~2.8.1", "react-router-redux": "~4.0.6", diff --git a/src/Admin.js b/src/Admin.js index 026ccc9..35a9afb 100644 --- a/src/Admin.js +++ b/src/Admin.js @@ -16,7 +16,7 @@ import DefaultLayout from './mui/layout/Layout'; import Menu from './mui/layout/Menu'; import Login from './mui/auth/Login'; import Logout from './mui/auth/Logout'; -import TranslationProvider from './i18n/TranslationProvider'; +import { TranslationProvider } from './i18n'; import { AUTH_CHECK } from './auth'; const Admin = ({ diff --git a/src/i18n/TranslationProvider.js b/src/i18n/TranslationProvider.js index e63c28d..2bffe4b 100644 --- a/src/i18n/TranslationProvider.js +++ b/src/i18n/TranslationProvider.js @@ -1,34 +1,6 @@ -import { Children, PropTypes } from 'react'; -import Polyglot from 'node-polyglot'; import { connect } from 'react-redux'; -import { compose, withContext } from 'recompose'; - -import defaultMessages from './messages'; - -const withI18nContext = withContext({ - translate: PropTypes.func.isRequired, - locale: PropTypes.string.isRequired, -}, ({ locale, messages = {} }) => { - const userMessages = messages[locale] || {}; - const polyglot = new Polyglot({ - locale, - phrases: { ...defaultMessages, ...userMessages }, - }); - - return { - locale, - translate: polyglot.t.bind(polyglot), - }; -}); - -const TranslationProvider = ({ children }) => Children.only(children); - -TranslationProvider.propTypes = { - locale: PropTypes.string.isRequired, - messages: PropTypes.object, - children: PropTypes.element, -}; +import { TranslationProvider } from 'react-i18n-polyglot'; const mapStateToProps = state => ({ locale: state.locale }); -export default compose(connect(mapStateToProps), withI18nContext)(TranslationProvider); +export default connect(mapStateToProps)(TranslationProvider); \ No newline at end of file diff --git a/src/i18n/TranslationUtils.js b/src/i18n/TranslationUtils.js deleted file mode 100644 index 1339e1d..0000000 --- a/src/i18n/TranslationUtils.js +++ /dev/null @@ -1,8 +0,0 @@ -import { DEFAULT_LOCALE } from './index'; - -export const resolveBrowserLocale = (defaultLocale = DEFAULT_LOCALE) => { - // from http://blog.ksol.fr/user-locale-detection-browser-javascript/ - // Rely on the window.navigator object to determine user locale - const { language, browserLanguage, userLanguage } = window.navigator; - return (language || browserLanguage || userLanguage || defaultLocale).split('-')[0]; -}; diff --git a/src/i18n/TranslationUtils.spec.js b/src/i18n/TranslationUtils.spec.js deleted file mode 100644 index eb5acba..0000000 --- a/src/i18n/TranslationUtils.spec.js +++ /dev/null @@ -1,21 +0,0 @@ -import assert from 'assert'; - -import { resolveBrowserLocale, DEFAULT_LOCALE } from './index'; - -describe('TranslationUtils', () => { - describe('resolveBrowserLocale', () => { - beforeEach(() => { - global.window = {}; - }); - - it('should return default locale if there\'s no available locale in browser', () => { - window.navigator = {}; - assert(resolveBrowserLocale(), DEFAULT_LOCALE); - }); - - it('should splice browser language to take first two locale letters', () => { - window.navigator = { language: 'en-US' }; - assert(resolveBrowserLocale(), 'en'); - }); - }); -}); diff --git a/src/i18n/index.js b/src/i18n/index.js index c211894..25c7eac 100644 --- a/src/i18n/index.js +++ b/src/i18n/index.js @@ -1,7 +1,7 @@ export const DEFAULT_LOCALE = 'en'; -export * from './TranslationUtils'; +export * from 'react-i18n-polyglot/dist/lib/utils/TranslationUtils'; export englishMessages from './messages'; -export translate from './translate'; +export translate from 'react-i18n-polyglot/dist/lib/translate'; export TranslationProvider from './TranslationProvider'; diff --git a/src/i18n/translate.js b/src/i18n/translate.js deleted file mode 100644 index 0e33b9b..0000000 --- a/src/i18n/translate.js +++ /dev/null @@ -1,15 +0,0 @@ -import { PropTypes } from 'react'; -import { getContext } from 'recompose'; - -const translate = (BaseComponent) => { - const TranslatedComponent = getContext({ - translate: PropTypes.func.isRequired, - locale: PropTypes.string.isRequired, - })(BaseComponent); - - TranslatedComponent.defaultProps = BaseComponent.defaultProps; - - return TranslatedComponent; -}; - -export default translate; diff --git a/src/i18n/translate.spec.js b/src/i18n/translate.spec.js deleted file mode 100644 index 8a6454d..0000000 --- a/src/i18n/translate.spec.js +++ /dev/null @@ -1,14 +0,0 @@ -import assert from 'assert'; -import React from 'react'; - -import translate from './translate'; - -describe('translate HOC', () => { - it('should conserve base component default props', () => { - const Component = () =>
; - Component.defaultProps = { foo: 'bar' }; - - const TranslatedComponent = translate(Component); - assert.deepEqual(TranslatedComponent.defaultProps, { foo: 'bar' }); - }); -}); diff --git a/src/mui/auth/Login.js b/src/mui/auth/Login.js index 5314078..4318f15 100644 --- a/src/mui/auth/Login.js +++ b/src/mui/auth/Login.js @@ -17,7 +17,7 @@ import { cyan500, pinkA200 } from 'material-ui/styles/colors'; import defaultTheme from '../defaultTheme'; import { AUTH_LOGIN } from '../../auth'; -import translate from '../../i18n/translate'; +import { translate } from '../../i18n'; const styles = { main: { diff --git a/src/mui/auth/Logout.js b/src/mui/auth/Logout.js index a5d8f39..29f9a1c 100644 --- a/src/mui/auth/Logout.js +++ b/src/mui/auth/Logout.js @@ -6,7 +6,7 @@ import compose from 'recompose/compose'; import MenuItem from 'material-ui/MenuItem'; import ExitIcon from 'material-ui/svg-icons/action/power-settings-new'; -import translate from '../../i18n/translate'; +import { translate } from '../../i18n'; import { AUTH_LOGOUT } from '../../auth'; class Logout extends Component { diff --git a/src/mui/button/CancelButton.js b/src/mui/button/CancelButton.js index 1d9663d..78baa22 100644 --- a/src/mui/button/CancelButton.js +++ b/src/mui/button/CancelButton.js @@ -1,6 +1,6 @@ import React, { Component, PropTypes } from 'react'; import { FlatButton, RaisedButton } from 'material-ui'; -import translate from '../../i18n/translate'; +import { translate } from '../../i18n'; import { Link } from 'react-router'; class CancelButton extends Component { diff --git a/src/mui/button/CreateButton.js b/src/mui/button/CreateButton.js index f00b007..53ad1a7 100644 --- a/src/mui/button/CreateButton.js +++ b/src/mui/button/CreateButton.js @@ -6,7 +6,7 @@ import FloatingActionButton from 'material-ui/FloatingActionButton'; import ContentAdd from 'material-ui/svg-icons/content/add'; import withWidth from 'material-ui/utils/withWidth'; import compose from 'recompose/compose'; -import translate from '../../i18n/translate'; +import { translate } from '../../i18n'; const styles = { floating: { diff --git a/src/mui/button/DeleteButton.js b/src/mui/button/DeleteButton.js index 2478c5c..5cf8a61 100644 --- a/src/mui/button/DeleteButton.js +++ b/src/mui/button/DeleteButton.js @@ -3,7 +3,7 @@ import { Link } from 'react-router'; import FlatButton from 'material-ui/FlatButton'; import ActionDelete from 'material-ui/svg-icons/action/delete'; import linkToRecord from '../../util/linkToRecord'; -import translate from '../../i18n/translate'; +import { translate } from '../../i18n'; const DeleteButton = ({ basePath = '', label = 'aor.action.delete', record = {}, translate }) => ( ( { if (!title) { diff --git a/src/mui/list/FilterButton.js b/src/mui/list/FilterButton.js index 4c1db4a..1a66a7e 100644 --- a/src/mui/list/FilterButton.js +++ b/src/mui/list/FilterButton.js @@ -5,7 +5,7 @@ import Menu from 'material-ui/Menu'; import MenuItem from 'material-ui/MenuItem'; import ContentFilter from 'material-ui/svg-icons/content/filter-list'; import FieldTitle from '../../util/FieldTitle'; -import translate from '../../i18n/translate'; +import { translate } from '../../i18n'; export class FilterButton extends Component { constructor(props) { diff --git a/src/mui/list/FilterForm.js b/src/mui/list/FilterForm.js index 2de6219..bef2876 100644 --- a/src/mui/list/FilterForm.js +++ b/src/mui/list/FilterForm.js @@ -5,7 +5,7 @@ import IconButton from 'material-ui/IconButton'; import ActionHide from 'material-ui/svg-icons/action/highlight-off'; import compose from 'recompose/compose'; -import translate from '../../i18n/translate'; +import { translate } from '../../i18n'; const styles = { card: { marginTop: '-14px', paddingTop: 0, display: 'flex', justifyContent: 'flex-end', alignItems: 'flex-end', flexWrap: 'wrap' }, diff --git a/src/mui/list/FilterForm.spec.js b/src/mui/list/FilterForm.spec.js index 0b2e142..86e4c1d 100644 --- a/src/mui/list/FilterForm.spec.js +++ b/src/mui/list/FilterForm.spec.js @@ -5,7 +5,7 @@ import { createStore } from 'redux'; import { Provider } from 'react-redux'; import getMuiTheme from 'material-ui/styles/getMuiTheme'; import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider'; -import TranslationProvider from '../../i18n/TranslationProvider'; +import { TranslationProvider } from '../../i18n'; import FilterForm from './FilterForm'; import TextInput from '../input/TextInput'; diff --git a/src/mui/list/List.js b/src/mui/list/List.js index 7854e7d..1a9e000 100644 --- a/src/mui/list/List.js +++ b/src/mui/list/List.js @@ -13,7 +13,7 @@ import DefaultPagination from './Pagination'; import DefaultActions from './Actions'; import { crudGetList as crudGetListAction } from '../../actions/dataActions'; import { changeListParams as changeListParamsAction } from '../../actions/listActions'; -import translate from '../../i18n/translate'; +import { translate } from '../../i18n'; const filterFormName = 'filterForm'; diff --git a/src/mui/list/Pagination.js b/src/mui/list/Pagination.js index 0cd618f..b1608bf 100644 --- a/src/mui/list/Pagination.js +++ b/src/mui/list/Pagination.js @@ -5,10 +5,10 @@ import IconButton from 'material-ui/IconButton'; import ChevronLeft from 'material-ui/svg-icons/navigation/chevron-left'; import ChevronRight from 'material-ui/svg-icons/navigation/chevron-right'; import { Toolbar, ToolbarGroup } from 'material-ui/Toolbar'; -import { cyan500 } from 'material-ui/styles/colors' +import { cyan500 } from 'material-ui/styles/colors'; import compose from 'recompose/compose'; import withWidth from 'material-ui/utils/withWidth'; -import translate from '../../i18n/translate'; +import { translate } from '../../i18n'; const styles = { button: { diff --git a/src/util/FieldTitle.js b/src/util/FieldTitle.js index 2e5ade7..9afc4f0 100644 --- a/src/util/FieldTitle.js +++ b/src/util/FieldTitle.js @@ -3,7 +3,7 @@ import inflection from 'inflection'; import pure from 'recompose/pure'; import compose from 'recompose/compose'; -import translate from '../i18n/translate'; +import { translate } from '../i18n'; const FieldTitle = ({ resource, source, label, translate }) => ( diff --git a/yarn.lock b/yarn.lock index 031f727..e974ead 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3195,7 +3195,7 @@ node-libs-browser@^0.6.0: util "~0.10.3" vm-browserify "0.0.4" -node-polyglot@2.2.2: +node-polyglot@^2.2.2, node-polyglot@2.2.2: version "2.2.2" resolved "https://registry.yarnpkg.com/node-polyglot/-/node-polyglot-2.2.2.tgz#1a3f76d7392f836ea0823836ede817e6ea6ec26c" dependencies: @@ -3744,7 +3744,7 @@ promise@^7.1.1: dependencies: asap "~2.0.3" -prop-types@^15.5.4: +prop-types@^15.5.4, prop-types@^15.5.8: version "15.5.8" resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.5.8.tgz#6b7b2e141083be38c8595aa51fc55775c7199394" dependencies: @@ -3870,6 +3870,14 @@ react-event-listener@^0.4.0: prop-types "^15.5.4" warning "^3.0.0" +react-i18n-polyglot: + version "1.0.0" + resolved "https://registry.yarnpkg.com/react-i18n-polyglot/-/react-i18n-polyglot-1.0.0.tgz#b5ddc6e1d5254e288c6d2605ba2058061280fa83" + dependencies: + node-polyglot "^2.2.2" + prop-types "^15.5.8" + recompose "^0.23.1" + react-redux@~4.4.5: version "4.4.8" resolved "https://registry.yarnpkg.com/react-redux/-/react-redux-4.4.8.tgz#e7bc1dd100e8b64e96ac8212db113239b9e2e08f" @@ -3962,6 +3970,15 @@ recompose@^0.21.0, recompose@~0.21.2: hoist-non-react-statics "^1.0.0" symbol-observable "^1.0.4" +recompose@^0.23.1: + version "0.23.1" + resolved "https://registry.yarnpkg.com/recompose/-/recompose-0.23.1.tgz#577613e24a7ff56f9ca6b899190f8a9c0857fc20" + dependencies: + change-emitter "^0.1.2" + fbjs "^0.8.1" + hoist-non-react-statics "^1.0.0" + symbol-observable "^1.0.4" + reduce-css-calc@^1.2.6: version "1.3.0" resolved "https://registry.yarnpkg.com/reduce-css-calc/-/reduce-css-calc-1.3.0.tgz#747c914e049614a4c9cfbba629871ad1d2927716"