Merge pull request #126 from ReCodEx/new_localization

New localization

src/components/Assignments/AdminAssignmentsTable/AdminAssignmentsTable.js

@@ -3,14 +3,14 @@ import PropTypes from 'prop-types';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import { List } from 'immutable';
 import { Table } from 'react-bootstrap';
-import { FormattedMessage } from 'react-intl';
+import { FormattedMessage, injectIntl } from 'react-intl';
 
 import AdminAssignmentsTableRow from './AdminAssignmentsTableRow';
 import NoAssignmentsTableRow from './NoAssignmentsTableRow';
 import LoadingAssignmentTableRow from './LoadingAssignmentTableRow';
 import ResourceRenderer from '../../helpers/ResourceRenderer';
 
-const AdminAssignmentsTable = ({ assignments = List() }) => (
+const AdminAssignmentsTable = ({ assignments = List(), intl: { locale } }) =>
   <Table hover>
     <thead>
       <tr>
@@ -51,25 +51,28 @@ const AdminAssignmentsTable = ({ assignments = List() }) => (
     >
       {(...assignments) =>
         assignments.length === 0
-          ? <tbody><NoAssignmentsTableRow /></tbody>
+          ? <tbody>
+              <NoAssignmentsTableRow />
+            </tbody>
           : <tbody>
               {assignments
                 .sort((a, b) => a.firstDeadline - b.firstDeadline)
-                .map(assignment => (
+                .map(assignment =>
                   <AdminAssignmentsTableRow
                     key={assignment.id}
                     {...assignment}
+                    locale={locale}
                   />
-                ))}
+                )}
             </tbody>}
     </ResourceRenderer>
-  </Table>
-);
+  </Table>;
 
 AdminAssignmentsTable.propTypes = {
   assignments: ImmutablePropTypes.list.isRequired,
   showGroup: PropTypes.bool,
-  statuses: PropTypes.object
+  statuses: PropTypes.object,
+  intl: PropTypes.shape({ locale: PropTypes.string.isRequired }).isRequired
 };
 
-export default AdminAssignmentsTable;
+export default injectIntl(AdminAssignmentsTable);

src/components/Assignments/AdminAssignmentsTable/AdminAssignmentsTableRow.js

@@ -5,10 +5,10 @@ import { FormattedDate, FormattedTime, FormattedMessage } from 'react-intl';
 import { ButtonGroup } from 'react-bootstrap';
 import Button from '../../widgets/FlatButton';
 import { LinkContainer } from 'react-router-bootstrap';
-import DeleteAssignmentButtonContainer
-  from '../../../containers/DeleteAssignmentButtonContainer';
+import DeleteAssignmentButtonContainer from '../../../containers/DeleteAssignmentButtonContainer';
 
 import withLinks from '../../../hoc/withLinks';
+import { getLocalizedName } from '../../../helpers/getLocalizedData';
 import {
   EditIcon,
   MaybePublicIcon,
@@ -20,30 +20,36 @@ const AdminAssignmentTableRow = ({
   isPublic,
   name,
   allowSecondDeadline,
+  localizedTexts,
   firstDeadline,
   secondDeadline,
   isBonus,
+  locale,
   links: {
     ASSIGNMENT_DETAIL_URI_FACTORY: detail,
     ASSIGNMENT_EDIT_URI_FACTORY: edit
   }
-}) => (
+}) =>
   <tr>
     <td className="text-center">
       <MaybePublicIcon id={id} isPublic={isPublic} />
     </td>
     <td>
       <MaybeBonusAssignmentIcon id={id} isBonus={isBonus} />
-      <Link to={detail(id)}>{name}</Link>
+      <Link to={detail(id)}>
+        {getLocalizedName({ name, localizedTexts }, locale)}
+      </Link>
     </td>
     <td>
-      <FormattedDate value={new Date(firstDeadline * 1000)} />{', '}
+      <FormattedDate value={new Date(firstDeadline * 1000)} />
+      {', '}
       <FormattedTime value={new Date(firstDeadline * 1000)} />
     </td>
     <td>
       {allowSecondDeadline
         ? <span>
-            <FormattedDate value={new Date(secondDeadline * 1000)} />{', '}
+            <FormattedDate value={new Date(secondDeadline * 1000)} />
+            {', '}
             <FormattedTime value={new Date(secondDeadline * 1000)} />
           </span>
         : <span>-</span>}
@@ -52,8 +58,7 @@ const AdminAssignmentTableRow = ({
       <ButtonGroup>
         <LinkContainer to={edit(id)}>
           <Button bsSize="xs" bsStyle="warning">
-            <EditIcon />
-            {' '}
+            <EditIcon />{' '}
             <FormattedMessage
               id="app.adminAssignmentsTableRow.edit"
               defaultMessage="Edit"
@@ -63,19 +68,20 @@ const AdminAssignmentTableRow = ({
         <DeleteAssignmentButtonContainer id={id} bsSize="xs" />
       </ButtonGroup>
     </td>
-  </tr>
-);
+  </tr>;
 
 AdminAssignmentTableRow.propTypes = {
   id: PropTypes.any.isRequired,
   isPublic: PropTypes.bool.isRequired,
   isBonus: PropTypes.bool.isRequired,
   name: PropTypes.string.isRequired,
+  localizedTexts: PropTypes.array.isRequired,
   firstDeadline: PropTypes.number.isRequired,
   allowSecondDeadline: PropTypes.bool.isRequired,
   secondDeadline: PropTypes.number.isRequired,
   groupId: PropTypes.string,
-  links: PropTypes.object
+  links: PropTypes.object,
+  locale: PropTypes.string.isRequired
 };
 
 export default withLinks(AdminAssignmentTableRow);

src/components/Assignments/Assignment/AssignmentTableRow/AssignmentTableRow.js

@@ -5,6 +5,7 @@ import AssignmentStatusIcon from '../AssignmentStatusIcon/AssignmentStatusIcon';
 import { FormattedDate, FormattedTime } from 'react-intl';
 
 import withLinks from '../../../../hoc/withLinks';
+import { getLocalizedName } from '../../../../helpers/getLocalizedData';
 import { MaybeBonusAssignmentIcon } from '../../../icons';
 
 const AssignmentTableRow = ({
@@ -13,6 +14,7 @@ const AssignmentTableRow = ({
     id,
     name,
     group,
+    localizedTexts,
     allowSecondDeadline,
     firstDeadline,
     secondDeadline,
@@ -21,11 +23,12 @@ const AssignmentTableRow = ({
   },
   status,
   userId,
+  locale,
   links: {
     ASSIGNMENT_DETAIL_URI_FACTORY,
     ASSIGNMENT_DETAIL_SPECIFIC_USER_URI_FACTORY
   }
-}) => (
+}) =>
   <tr>
     <td className="text-center">
       <AssignmentStatusIcon id={id} status={status} accepted={accepted} />
@@ -39,37 +42,43 @@ const AssignmentTableRow = ({
             : ASSIGNMENT_DETAIL_URI_FACTORY(id)
         }
       >
-        {name}
+        {getLocalizedName({ name, localizedTexts }, locale)}
       </Link>
     </td>
-    {showGroup && <td>{group}</td>}
+    {showGroup &&
+      <td>
+        {group}
+      </td>}
     <td>
-      <FormattedDate value={new Date(firstDeadline * 1000)} />{', '}
+      <FormattedDate value={new Date(firstDeadline * 1000)} />
+      {', '}
       <FormattedTime value={new Date(firstDeadline * 1000)} />
     </td>
     <td>
       {allowSecondDeadline
         ? <span>
-            <FormattedDate value={new Date(secondDeadline * 1000)} />{', '}
+            <FormattedDate value={new Date(secondDeadline * 1000)} />
+            {', '}
             <FormattedTime value={new Date(secondDeadline * 1000)} />
           </span>
         : <span>-</span>}
     </td>
-  </tr>
-);
+  </tr>;
 
 AssignmentTableRow.propTypes = {
   showGroup: PropTypes.bool,
   item: PropTypes.shape({
     id: PropTypes.any.isRequired,
     name: PropTypes.string.isRequired,
+    localizedTexts: PropTypes.array.isRequired,
     firstDeadline: PropTypes.number.isRequired,
     secondDeadline: PropTypes.number.isRequired,
     groupId: PropTypes.string
   }),
   status: PropTypes.string,
   userId: PropTypes.string,
-  links: PropTypes.object
+  links: PropTypes.object,
+  locale: PropTypes.string.isRequired
 };
 
 export default withLinks(AssignmentTableRow);

src/components/Assignments/Assignment/AssignmentsTable/AssignmentsTable.js

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import { List } from 'immutable';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import { Table } from 'react-bootstrap';
-import { FormattedMessage } from 'react-intl';
+import { FormattedMessage, injectIntl } from 'react-intl';
 
 import {
   isReady,
@@ -48,7 +48,8 @@ const AssignmentsTable = ({
   assignments = List(),
   statuses = [],
   showGroup = true,
-  userId = null
+  userId = null,
+  intl: { locale }
 }) =>
   <Table hover>
     <thead>
@@ -97,6 +98,7 @@ const AssignmentsTable = ({
             userId={userId}
             showGroup={showGroup}
             status={statuses[assignment.id]}
+            locale={locale}
           />
         )}
     </tbody>
@@ -106,7 +108,8 @@ AssignmentsTable.propTypes = {
   assignments: ImmutablePropTypes.list.isRequired,
   showGroup: PropTypes.bool,
   statuses: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
-  userId: PropTypes.string
+  userId: PropTypes.string,
+  intl: PropTypes.shape({ locale: PropTypes.string.isRequired }).isRequired
 };
 
-export default AssignmentsTable;
+export default injectIntl(AssignmentsTable);

src/components/Exercises/ExerciseDetail/ExerciseDetail.js

@@ -17,6 +17,10 @@ import UsersNameContainer from '../../../containers/UsersNameContainer';
 import GroupsNameContainer from '../../../containers/GroupsNameContainer';
 import styles from './ExerciseDetail.less';
 import { MaybeSucceededIcon } from '../../icons';
+import {
+  getLocalizedName,
+  getLocalizedDescription
+} from '../../../helpers/getLocalizedData';
 
 const ExerciseDetail = ({
   id,
@@ -33,9 +37,10 @@ const ExerciseDetail = ({
   runtimeEnvironments,
   isPublic,
   isLocked,
+  locale,
   links: { EXERCISE_URI_FACTORY }
-}) => (
-  <Box title={name} noPadding>
+}) =>
+  <Box title={getLocalizedName({ name, localizedTexts }, locale)} noPadding>
     <Table>
       <tbody>
         <tr>
@@ -57,20 +62,18 @@ const ExerciseDetail = ({
             />
           </th>
           <td>
-            {groupsIds.length > 0 ? (
-              groupsIds.map((groupId, i) => (
-                <div key={i}>
-                  <GroupsNameContainer groupId={groupId} />
-                </div>
-              ))
-            ) : (
-              <i>
-                <FormattedMessage
-                  id="app.exercise.publicGroup"
-                  defaultMessage="Public"
-                />
-              </i>
-            )}
+            {groupsIds.length > 0
+              ? groupsIds.map((groupId, i) =>
+                  <div key={i}>
+                    <GroupsNameContainer groupId={groupId} />
+                  </div>
+                )
+              : <i>
+                  <FormattedMessage
+                    id="app.exercise.publicGroup"
+                    defaultMessage="Public"
+                  />
+                </i>}
           </td>
         </tr>
         <tr>
@@ -92,7 +95,12 @@ const ExerciseDetail = ({
             />
           </th>
           <td>
-            <ReactMarkdown source={description} />
+            <ReactMarkdown
+              source={getLocalizedDescription(
+                { description, localizedTexts },
+                locale
+              )}
+            />
           </td>
         </tr>
         <tr>
@@ -130,7 +138,7 @@ const ExerciseDetail = ({
             v<FormattedNumber value={version} />
           </td>
         </tr>
-        {forkedFrom && (
+        {forkedFrom &&
           <tr>
             <th>
               <FormattedMessage
@@ -145,8 +153,7 @@ const ExerciseDetail = ({
                 )
               </Link>
             </td>
-          </tr>
-        )}
+          </tr>}
         <tr>
           <th>
             <FormattedMessage
@@ -155,11 +162,11 @@ const ExerciseDetail = ({
             />
           </th>
           <td>
-            {runtimeEnvironments.map(({ id, name }) => (
+            {runtimeEnvironments.map(({ id, name }) =>
               <Label key={id} className={styles.environment}>
                 {name}
               </Label>
-            ))}
+            )}
           </td>
         </tr>
         <tr>
@@ -186,8 +193,7 @@ const ExerciseDetail = ({
         </tr>
       </tbody>
     </Table>
-  </Box>
-);
+  </Box>;
 
 ExerciseDetail.propTypes = {
   id: PropTypes.string.isRequired,
@@ -204,6 +210,7 @@ ExerciseDetail.propTypes = {
   runtimeEnvironments: PropTypes.array.isRequired,
   isPublic: PropTypes.bool.isRequired,
   isLocked: PropTypes.bool.isRequired,
+  locale: PropTypes.string.isRequired,
   links: PropTypes.object
 };