Fix group localization against API

ReCodEx · Nov 11, 2017 · 553c103 · 553c103
1 parent 7e4f03d
commit 553c103
Show file tree

Hide file tree

Showing 8 changed files with 75 additions and 42 deletions.
diff --git a/src/components/Groups/GroupTree/GroupTree.js b/src/components/Groups/GroupTree/GroupTree.js
@@ -6,6 +6,7 @@ import Button from '../../widgets/FlatButton';
 import { LinkContainer } from 'react-router-bootstrap';
 import { TreeView, TreeViewItem } from '../../widgets/TreeView';
 import { isReady, getJsData } from '../../../redux/helpers/resourceManager';
+import GroupsName from '../GroupsName';
 
 import withLinks from '../../../hoc/withLinks';
 
@@ -59,6 +60,7 @@ class GroupTree extends Component {
 
     const {
       name,
+      localizedTexts,
       admins,
       childGroups: { all: allChildGroups, public: publicChildGroups },
       canView
@@ -68,7 +70,14 @@ class GroupTree extends Component {
       <TreeView>
         {level !== 0 &&
           <TreeViewItem
-            title={name}
+            title={
+              <GroupsName
+                id={id}
+                name={name}
+                localizedTexts={localizedTexts}
+                noLink
+              />
+            }
             level={level}
             admins={admins}
             isOpen={currentGroupId === id || isOpen}

diff --git a/src/components/Users/UsersStats/UsersStats.js b/src/components/Users/UsersStats/UsersStats.js
@@ -1,37 +1,46 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { FormattedMessage, FormattedNumber } from 'react-intl';
+import { FormattedMessage, FormattedNumber, injectIntl } from 'react-intl';
 import InfoBox from '../../widgets/InfoBox';
+import { getLocalizedName } from '../../../helpers/getLocalizedData';
 
 const UsersStats = ({
   id,
   name,
-  stats: { assignments, points, hasLimit, passesLimit }
-}) => (
-  <InfoBox
-    color={!hasLimit ? 'blue' : passesLimit ? 'green' : 'red'}
-    icon={!hasLimit ? 'info' : passesLimit ? 'check' : 'exclamation-triangle'}
-    title={name}
-    value={
-      <FormattedNumber
-        value={points.total > 0 ? points.gained / points.total : 0}
-        style="percent"
-      />
-    }
-    progress={points.total > 0 ? Math.min(1, points.gained / points.total) : 0}
-    description={
-      <FormattedMessage
-        id="app.usersStats.description"
-        defaultMessage="Points gained from {name}."
-        values={{ name }}
-      />
-    }
-  />
-);
+  localizedTexts,
+  stats: { assignments, points, hasLimit, passesLimit },
+  intl: { locale }
+}) => {
+  const localizedName = getLocalizedName({ name, localizedTexts }, locale);
+  return (
+    <InfoBox
+      color={!hasLimit ? 'blue' : passesLimit ? 'green' : 'red'}
+      icon={!hasLimit ? 'info' : passesLimit ? 'check' : 'exclamation-triangle'}
+      title={localizedName}
+      value={
+        <FormattedNumber
+          value={points.total > 0 ? points.gained / points.total : 0}
+          style="percent"
+        />
+      }
+      progress={
+        points.total > 0 ? Math.min(1, points.gained / points.total) : 0
+      }
+      description={
+        <FormattedMessage
+          id="app.usersStats.description"
+          defaultMessage="Points gained from {name}."
+          values={{ name: localizedName }}
+        />
+      }
+    />
+  );
+};
 
 UsersStats.propTypes = {
   id: PropTypes.string.isRequired,
   name: PropTypes.string.isRequired,
+  localizedTexts: PropTypes.array.isRequired,
   stats: PropTypes.shape({
     assignments: PropTypes.shape({
       total: PropTypes.number.isRequired,
@@ -41,7 +50,8 @@ UsersStats.propTypes = {
       total: PropTypes.number.isRequired,
       gained: PropTypes.number.isRequired
     })
-  }).isRequired
+  }).isRequired,
+  intl: PropTypes.shape({ locale: PropTypes.string.isRequired }).isRequired
 };
 
-export default UsersStats;
+export default injectIntl(UsersStats);
diff --git a/src/components/forms/EditGroupForm/EditGroupForm.js b/src/components/forms/EditGroupForm/EditGroupForm.js
@@ -48,7 +48,7 @@ const EditGroupForm = ({
             submit: createNew
               ? <FormattedMessage
                   id="app.editGroupForm.successNew"
-                  defaultMessage="Group has been created"
+                  defaultMessage="Create group"
                 />
               : <FormattedMessage
                   id="app.editGroupForm.set"

diff --git a/src/components/widgets/Sidebar/MenuGroup/MenuGroup.js b/src/components/widgets/Sidebar/MenuGroup/MenuGroup.js
@@ -97,7 +97,9 @@ class MenuGroup extends Component {
                     title={getLocalizedName(
                       {
                         name: item.getIn(['data', 'name']),
-                        localizedTexts: item.getIn(['data', 'localizedTexts'])
+                        localizedTexts: item
+                          .getIn(['data', 'localizedTexts'])
+                          .toJS()
                       },
                       locale
                     )}

diff --git a/src/components/widgets/TreeView/TreeViewLeaf.js b/src/components/widgets/TreeView/TreeViewLeaf.js
@@ -4,6 +4,7 @@ import { FormattedMessage } from 'react-intl';
 import Icon from 'react-fontawesome';
 import { LoadingIcon } from '../../icons';
 import LevelGap from './LevelGap';
+import GroupsName from '../../../components/Groups/GroupsName';
 
 const TreeViewLeaf = ({
   loading = false,
@@ -44,7 +45,7 @@ TreeViewLeaf.propTypes = {
   loading: PropTypes.bool,
   title: PropTypes.oneOfType([
     PropTypes.string,
-    PropTypes.shape({ type: PropTypes.oneOf([FormattedMessage]) })
+    PropTypes.shape({ type: PropTypes.oneOf([FormattedMessage, GroupsName]) })
   ]).isRequired,
   admins: PropTypes.array,
   icon: PropTypes.string,

diff --git a/src/pages/Dashboard/Dashboard.js b/src/pages/Dashboard/Dashboard.js
@@ -2,7 +2,7 @@ import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import { connect } from 'react-redux';
-import { FormattedMessage } from 'react-intl';
+import { FormattedMessage, injectIntl } from 'react-intl';
 import { Row, Col } from 'react-bootstrap';
 import Button from '../../components/widgets/FlatButton';
 import { Link } from 'react-router';
@@ -47,6 +47,7 @@ import { getJsData } from '../../redux/helpers/resourceManager';
 import SisIntegrationContainer from '../../containers/SisIntegrationContainer';
 import SisSupervisorGroupsContainer from '../../containers/SisSupervisorGroupsContainer';
 
+import { getLocalizedName } from '../../helpers/getLocalizedData';
 import withLinks from '../../hoc/withLinks';
 
 class Dashboard extends Component {
@@ -107,7 +108,8 @@ class Dashboard extends Component {
       usersStatistics,
       allGroups,
       isAdmin,
-      links: { GROUP_URI_FACTORY }
+      links: { GROUP_URI_FACTORY },
+      intl: { locale }
     } = this.props;
 
     return (
@@ -208,7 +210,7 @@ class Dashboard extends Component {
                             <Row>
                               <Col lg={4}>
                                 <LoadingInfoBox
-                                  title={<GroupsName {...group} noLink />}
+                                  title={getLocalizedName(group, locale)}
                                 />
                               </Col>
                             </Row>
@@ -342,7 +344,8 @@ Dashboard.propTypes = {
   usersStatistics: PropTypes.func.isRequired,
   allGroups: PropTypes.array,
   isAdmin: PropTypes.bool,
-  links: PropTypes.object
+  links: PropTypes.object,
+  intl: PropTypes.shape({ locale: PropTypes.string.isRequired }).isRequired
 };
 
 export default withLinks(
@@ -373,5 +376,5 @@ export default withLinks(
       loadAsync: loggedInUserId =>
         Dashboard.loadAsync(params, dispatch, loggedInUserId)
     })
-  )(Dashboard)
+  )(injectIntl(Dashboard))
 );
diff --git a/src/pages/EditGroup/EditGroup.js b/src/pages/EditGroup/EditGroup.js
@@ -5,7 +5,7 @@ import { FormattedMessage } from 'react-intl';
 import { HelpBlock } from 'react-bootstrap';
 import { connect } from 'react-redux';
 import { push } from 'react-router-redux';
-import { reset } from 'redux-form';
+import { reset, getFormValues } from 'redux-form';
 
 import Page from '../../components/layout/Page';
 import EditGroupForm from '../../components/forms/EditGroupForm';
@@ -40,6 +40,7 @@ class EditGroup extends Component {
       group,
       links: { GROUP_URI_FACTORY },
       editGroup,
+      formValues,
       push
     } = this.props;
 
@@ -75,6 +76,7 @@ class EditGroup extends Component {
             <EditGroupForm
               initialValues={this.getInitialValues(group)}
               onSubmit={editGroup}
+              formValues={formValues}
             />
 
             <Box
@@ -129,7 +131,8 @@ EditGroup.propTypes = {
   }).isRequired,
   group: ImmutablePropTypes.map,
   editGroup: PropTypes.func.isRequired,
-  push: PropTypes.func.isRequired
+  push: PropTypes.func.isRequired,
+  formValues: PropTypes.object
 };
 
 export default withLinks(
@@ -140,7 +143,8 @@ export default withLinks(
       return {
         group: selectGroup(state),
         userId,
-        isStudentOf: groupId => isSupervisorOf(userId, groupId)(state)
+        isStudentOf: groupId => isSupervisorOf(userId, groupId)(state),
+        formValues: getFormValues('editGroup')(state)
       };
     },
     (dispatch, { params: { groupId } }) => ({

diff --git a/src/pages/Group/Group.js b/src/pages/Group/Group.js
@@ -5,7 +5,7 @@ import { connect } from 'react-redux';
 import { push } from 'react-router-redux';
 import { LinkContainer } from 'react-router-bootstrap';
 import Button from '../../components/widgets/FlatButton';
-import { FormattedMessage } from 'react-intl';
+import { FormattedMessage, injectIntl } from 'react-intl';
 import { List, Map } from 'immutable';
 
 import Page from '../../components/layout/Page';
@@ -62,6 +62,7 @@ import { getStatuses } from '../../redux/selectors/stats';
 import { fetchInstanceIfNeeded } from '../../redux/modules/instances';
 import { instanceSelector } from '../../redux/selectors/instances';
 
+import { getLocalizedName } from '../../helpers/getLocalizedData';
 import withLinks from '../../hoc/withLinks';
 
 class Group extends Component {
@@ -124,7 +125,7 @@ class Group extends Component {
   }
 
   getBreadcrumbs = () => {
-    const { group, instance } = this.props;
+    const { group, instance, intl: { locale } } = this.props;
     const breadcrumbs = [
       {
         resource: instance,
@@ -139,7 +140,7 @@ class Group extends Component {
         resource: group,
         iconName: 'group',
         breadcrumb: data => ({
-          text: data.name
+          text: getLocalizedName(data, locale)
         })
       }
     ];
@@ -294,7 +295,8 @@ Group.propTypes = {
   assignExercise: PropTypes.func.isRequired,
   createGroupExercise: PropTypes.func.isRequired,
   push: PropTypes.func.isRequired,
-  links: PropTypes.object
+  links: PropTypes.object,
+  intl: PropTypes.shape({ locale: PropTypes.string.isRequired }).isRequired
 };
 
 Group.contextTypes = {
@@ -351,4 +353,6 @@ const mapDispatchToProps = (dispatch, { params }) => ({
   push: url => dispatch(push(url))
 });
 
-export default withLinks(connect(mapStateToProps, mapDispatchToProps)(Group));
+export default withLinks(
+  connect(mapStateToProps, mapDispatchToProps)(injectIntl(Group))
+);