#6 Work on components refactor to depend on translate from 'react-i18…

…n-polyglot' module and also remove old components

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",

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 = ({

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);

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';

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: {

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 {

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 {

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: {

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 }) => <FlatButton
     secondary

src/mui/button/EditButton.js

@@ -5,7 +5,7 @@ import compose from 'recompose/compose';
 import FlatButton from 'material-ui/FlatButton';
 import ContentCreate from 'material-ui/svg-icons/content/create';
 import linkToRecord from '../../util/linkToRecord';
-import translate from '../../i18n/translate';
+import { translate } from '../../i18n';
 
 const EditButton = ({ basePath = '', label = 'aor.action.edit', record = {}, translate }) => <FlatButton
     primary

src/mui/button/ListButton.js

@@ -2,7 +2,7 @@ import React, { PropTypes } from 'react';
 import { Link } from 'react-router';
 import FlatButton from 'material-ui/FlatButton';
 import ActionList from 'material-ui/svg-icons/action/list';
-import translate from '../../i18n/translate';
+import { translate } from '../../i18n';
 
 const ListButton = ({ basePath = '', label = 'aor.action.list', translate }) => <FlatButton
     primary

src/mui/button/RefreshButton.js

@@ -1,7 +1,7 @@
 import React, { PropTypes } from 'react';
 import FlatButton from 'material-ui/FlatButton';
 import NavigationRefresh from 'material-ui/svg-icons/navigation/refresh';
-import translate from '../../i18n/translate';
+import { translate } from '../../i18n';
 
 const RefreshButton = ({ label = 'aor.action.refresh', translate, refresh }) => <FlatButton
     primary

src/mui/button/SaveButton.js

@@ -2,9 +2,7 @@ import React, { Component, PropTypes } from 'react';
 import { connect } from 'react-redux';
 import RaisedButton from 'material-ui/RaisedButton';
 import FlatButton from 'material-ui/FlatButton';
-import ContentSave from 'material-ui/svg-icons/content/save';
-import CircularProgress from 'material-ui/CircularProgress';
-import translate from '../../i18n/translate';
+import { translate } from '../../i18n';
 
 class SaveButton extends Component {
 

src/mui/button/ShowButton.js

@@ -5,7 +5,7 @@ import compose from 'recompose/compose';
 import FlatButton from 'material-ui/FlatButton';
 import ImageEye from 'material-ui/svg-icons/image/remove-red-eye';
 import linkToRecord from '../../util/linkToRecord';
-import translate from '../../i18n/translate';
+import { translate } from '../../i18n';
 
 const ShowButton = ({ basePath = '', label = 'aor.action.show', record = {}, translate }) => <FlatButton
     primary

src/mui/delete/Delete.js

@@ -11,7 +11,7 @@ import ViewTitle from '../layout/ViewTitle';
 import Title from '../layout/Title';
 import { ListButton } from '../button';
 import { crudGetOne as crudGetOneAction, crudDelete as crudDeleteAction } from '../../actions/dataActions';
-import translate from '../../i18n/translate';
+import { translate } from '../../i18n';
 
 const styles = {
     actions: { zIndex: 2, display: 'inline-block', float: 'right' },

src/mui/detail/Create.js

@@ -7,7 +7,7 @@ import ViewTitle from '../layout/ViewTitle';
 import Title from '../layout/Title';
 import { crudCreate as crudCreateAction } from '../../actions/dataActions';
 import DefaultActions from './CreateActions';
-import translate from '../../i18n/translate';
+import { translate } from '../../i18n';
 
 class Create extends Component {
     getBasePath() {

src/mui/detail/Edit.js

@@ -7,7 +7,7 @@ import ViewTitle from '../layout/ViewTitle';
 import Title from '../layout/Title';
 import { crudGetOne as crudGetOneAction, crudUpdate as crudUpdateAction } from '../../actions/dataActions';
 import DefaultActions from './EditActions';
-import translate from '../../i18n/translate';
+import { translate } from '../../i18n';
 
 /**
  * Turns a children data structure (either single child or array of children) into an array.

src/mui/detail/Show.js

@@ -5,10 +5,9 @@ import compose from 'recompose/compose';
 import inflection from 'inflection';
 import ViewTitle from '../layout/ViewTitle';
 import Title from '../layout/Title';
-import { DeleteButton, EditButton, ListButton } from '../button';
 import { crudGetOne as crudGetOneAction } from '../../actions/dataActions';
 import DefaultActions from './ShowActions';
-import translate from '../../i18n/translate';
+import { translate } from '../../i18n';
 
 /**
  * Turns a children data structure (either single child or array of children) into an array.

src/mui/form/TabbedForm.js

@@ -6,7 +6,7 @@ import { Tabs, Tab } from 'material-ui/Tabs';
 import { getFieldConstraints, getErrorsForForm, getErrorsForFieldConstraints } from '../../util/validate';
 import Toolbar from './Toolbar';
 import getDefaultValues from '../form/getDefaultValues';
-import translate from '../../i18n/translate';
+import { translate } from '../../i18n';
 
 /**
  * Validator function for redux-form

src/mui/input/ImageInput.js

@@ -1,6 +1,6 @@
 import React, { Component, PropTypes } from 'react';
 import Dropzone from 'react-dropzone';
-import translate from '../../i18n/translate';
+import { translate } from '../../i18n';
 
 const defaultStyle = {
     dropZone: {

src/mui/input/NullableBooleanInput.js

@@ -1,6 +1,6 @@
 import React, { PropTypes } from 'react';
 import SelectInput from './SelectInput';
-import translate from '../../i18n/translate';
+import { translate } from '../../i18n';
 
 export const NullableBooleanInput = ({ input, meta: { touched, error }, label, source, elStyle, resource, translate }) => (
     <SelectInput

src/mui/layout/DashboardMenuItem.js

@@ -2,7 +2,7 @@ import React, { PropTypes } from 'react';
 import MenuItem from 'material-ui/MenuItem';
 import DashboardIcon from 'material-ui/svg-icons/action/dashboard';
 import { Link } from 'react-router';
-import translate from '../../i18n/translate';
+import { translate } from '../../i18n';
 
 const DashboardMenuItem = ({ onTouchTap, translate }) => (
     <MenuItem

src/mui/layout/Menu.js

@@ -5,7 +5,7 @@ import { Link } from 'react-router';
 import pure from 'recompose/pure';
 import compose from 'recompose/compose';
 import DashboardMenuItem from './DashboardMenuItem';
-import translate from '../../i18n/translate';
+import { translate } from '../../i18n';
 
 const styles = {
     main: {

src/mui/layout/Notification.js

@@ -1,8 +1,8 @@
 import React, { PropTypes } from 'react';
 import { connect } from 'react-redux';
 import Snackbar from 'material-ui/Snackbar';
-import { hideNotification as hideNotificationAction } from '../../actions/notificationActions' ;
-import translate from '../../i18n/translate';
+import { hideNotification as hideNotificationAction } from '../../actions/notificationActions';
+import { translate } from '../../i18n';
 
 function getStyles(context) {
     if (!context) return { primary1Color: '#00bcd4', accent1Color: '#ff4081' };

src/mui/layout/Title.js

@@ -1,7 +1,7 @@
 import React, { PropTypes } from 'react';
 import onlyUpdateForKeys from 'recompose/onlyUpdateForKeys';
 import compose from 'recompose/compose';
-import translate from '../../i18n/translate';
+import { translate } from '../../i18n';
 
 const Title = ({ defaultTitle, record, title, translate }) => {
     if (!title) {

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) {

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' },

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';
 

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';
 

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: {

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 }) => (
     <span>