Spanish Translation: My Collection/My Sketch lists in My Account Menu (#1554)

* Translations for Collection functionality
* Translation for Sketch functionality
* Translation ARIA for Sketch functionality

Author: oruburos

client/modules/App/components/Overlay.jsx

@@ -1,6 +1,7 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 import { browserHistory } from 'react-router';
+import { withTranslation } from 'react-i18next';
 
 import ExitIcon from '../../../images/exit.svg';
 
@@ -80,7 +81,7 @@ class Overlay extends React.Component {
               <h2 className="overlay__title">{title}</h2>
               <div className="overlay__actions">
                 {actions}
-                <button className="overlay__close-button" onClick={this.close} aria-label={`Close ${title} overlay`} >
+                <button className="overlay__close-button" onClick={this.close} aria-label={this.props.t('Overlay.AriaLabel', { title })}>
                   <ExitIcon focusable="false" aria-hidden="true" />
                 </button>
               </div>
@@ -101,6 +102,7 @@ Overlay.propTypes = {
   ariaLabel: PropTypes.string,
   previousPath: PropTypes.string,
   isFixedHeight: PropTypes.bool,
+  t: PropTypes.func.isRequired
 };
 
 Overlay.defaultProps = {
@@ -113,4 +115,4 @@ Overlay.defaultProps = {
   isFixedHeight: false,
 };
 
-export default Overlay;
+export default withTranslation()(Overlay);

client/modules/IDE/components/AddToCollectionList.jsx

@@ -3,6 +3,7 @@ import React from 'react';
 import { Helmet } from 'react-helmet';
 import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
+import { withTranslation } from 'react-i18next';
 
 import * as ProjectActions from '../actions/project';
 import * as ProjectsActions from '../actions/projects';
@@ -42,9 +43,9 @@ class CollectionList extends React.Component {
 
   getTitle() {
     if (this.props.username === this.props.user.username) {
-      return 'p5.js Web Editor | My collections';
+      return this.props.t('AddToCollectionList.Title');
     }
-    return `p5.js Web Editor | ${this.props.username}'s collections`;
+    return this.props.t('AddToCollectionList.AnothersTitle', { anotheruser: this.props.username });
   }
 
   handleCollectionAdd = (collection) => {
@@ -74,10 +75,11 @@ class CollectionList extends React.Component {
           items={collectionWithSketchStatus}
           onAdd={this.handleCollectionAdd}
           onRemove={this.handleCollectionRemove}
+          t={this.props.t}
         />
       );
     } else {
-      content = 'No collections';
+      content = this.props.t('AddToCollectionList.Empty');
     }
 
     return (
@@ -135,7 +137,8 @@ CollectionList.propTypes = {
     owner: PropTypes.shape({
       id: PropTypes.string
     })
-  })
+  }),
+  t: PropTypes.func.isRequired
 };
 
 CollectionList.defaultProps = {
@@ -164,4 +167,4 @@ function mapDispatchToProps(dispatch) {
   );
 }
 
-export default connect(mapStateToProps, mapDispatchToProps)(CollectionList);
+export default withTranslation()(connect(mapStateToProps, mapDispatchToProps)(CollectionList));

client/modules/IDE/components/AddToCollectionSketchList.jsx

@@ -3,6 +3,7 @@ import React from 'react';
 import { Helmet } from 'react-helmet';
 import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
+import { withTranslation } from 'react-i18next';
 // import find from 'lodash/find';
 import * as ProjectsActions from '../actions/projects';
 import * as CollectionsActions from '../actions/collections';
@@ -32,9 +33,9 @@ class SketchList extends React.Component {
 
   getSketchesTitle() {
     if (this.props.username === this.props.user.username) {
-      return 'p5.js Web Editor | My sketches';
+      return this.props.t('AddToCollectionSketchList.Title');
     }
-    return `p5.js Web Editor | ${this.props.username}'s sketches`;
+    return this.props.t('AddToCollectionSketchList.AnothersTitle', { anotheruser: this.props.username });
   }
 
   handleCollectionAdd = (sketch) => {
@@ -68,7 +69,7 @@ class SketchList extends React.Component {
         />
       );
     } else {
-      content = 'No collections';
+      content = this.props.t('AddToCollectionSketchList.NoCollections');
     }
 
     return (
@@ -113,6 +114,7 @@ SketchList.propTypes = {
   }).isRequired,
   addToCollection: PropTypes.func.isRequired,
   removeFromCollection: PropTypes.func.isRequired,
+  t: PropTypes.func.isRequired
 };
 
 SketchList.defaultProps = {
@@ -136,4 +138,4 @@ function mapDispatchToProps(dispatch) {
   );
 }
 
-export default connect(mapStateToProps, mapDispatchToProps)(SketchList);
+export default withTranslation()(connect(mapStateToProps, mapDispatchToProps)(SketchList));

client/modules/IDE/components/CollectionList/CollectionList.jsx

@@ -1,6 +1,7 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 import { Helmet } from 'react-helmet';
+import { withTranslation } from 'react-i18next';
 import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
 import classNames from 'classnames';
@@ -50,9 +51,9 @@ class CollectionList extends React.Component {
 
   getTitle() {
     if (this.props.username === this.props.user.username) {
-      return 'p5.js Web Editor | My collections';
+      return this.props.t('CollectionList.Title');
     }
-    return `p5.js Web Editor | ${this.props.username}'s collections`;
+    return this.props.t('CollectionList.AnothersTitle', { anotheruser: this.props.username });
   }
 
   showAddSketches = (collectionId) => {
@@ -78,7 +79,7 @@ class CollectionList extends React.Component {
 
   _renderEmptyTable() {
     if (!this.props.loading && this.props.collections.length === 0) {
-      return (<p className="sketches-table__empty">No collections.</p>);
+      return (<p className="sketches-table__empty">{this.props.t('CollectionList.NoCollections')}</p>);
     }
     return null;
   }
@@ -88,14 +89,14 @@ class CollectionList extends React.Component {
     let buttonLabel;
     if (field !== fieldName) {
       if (field === 'name') {
-        buttonLabel = `Sort by ${displayName} ascending.`;
+        buttonLabel = this.props.t('CollectionList.ButtonLabelAscendingARIA', { displayName });
       } else {
-        buttonLabel = `Sort by ${displayName} descending.`;
+        buttonLabel = this.props.t('CollectionList.ButtonLabelDescendingARIA', { displayName });
       }
     } else if (direction === SortingActions.DIRECTION.ASC) {
-      buttonLabel = `Sort by ${displayName} descending.`;
+      buttonLabel = this.props.t('CollectionList.ButtonLabelDescendingARIA', { displayName });
     } else {
-      buttonLabel = `Sort by ${displayName} ascending.`;
+      buttonLabel = this.props.t('CollectionList.ButtonLabelAscendingARIA', { displayName });
     }
     return buttonLabel;
   }
@@ -116,10 +117,10 @@ class CollectionList extends React.Component {
         >
           <span className={headerClass}>{displayName}</span>
           {field === fieldName && direction === SortingActions.DIRECTION.ASC &&
-            <ArrowUpIcon role="img" aria-label="Ascending" focusable="false" />
+            <ArrowUpIcon role="img" aria-label={this.props.t('CollectionList.DirectionAscendingARIA')} focusable="false" />
           }
           {field === fieldName && direction === SortingActions.DIRECTION.DESC &&
-            <ArrowDownIcon role="img" aria-label="Descending" focusable="false" />
+            <ArrowDownIcon role="img" aria-label={this.props.t('CollectionList.DirectionDescendingARIA')} focusable="false" />
           }
         </button>
       </th>
@@ -142,10 +143,10 @@ class CollectionList extends React.Component {
           <table className="sketches-table" summary="table containing all collections">
             <thead>
               <tr>
-                {this._renderFieldHeader('name', 'Name')}
-                {this._renderFieldHeader('createdAt', `${mobile ? '' : 'Date '}Created`)}
-                {this._renderFieldHeader('updatedAt', `${mobile ? '' : 'Date '}Updated`)}
-                {this._renderFieldHeader('numItems', mobile ? 'Sketches' : '# sketches')}
+                {this._renderFieldHeader('name', this.props.t('CollectionList.HeaderName'))}
+                {this._renderFieldHeader('createdAt', this.props.t('CollectionList.HeaderCreatedAt', { context: mobile ? 'mobile' : '' }))}
+                {this._renderFieldHeader('updatedAt', this.props.t('CollectionList.HeaderUpdatedAt', { context: mobile ? 'mobile' : '' }))}
+                {this._renderFieldHeader('numItems', this.props.t('CollectionList.HeaderNumItems', { context: mobile ? 'mobile' : '' }))}
                 <th scope="col"></th>
               </tr>
             </thead>
@@ -165,7 +166,7 @@ class CollectionList extends React.Component {
         {
           this.state.addingSketchesToCollectionId && (
             <Overlay
-              title="Add sketch"
+              title={this.props.t('CollectionList.AddSketch')}
               actions={<SketchSearchbar />}
               closeOverlay={this.hideAddSketches}
               isFixedHeight
@@ -211,6 +212,7 @@ CollectionList.propTypes = {
       id: PropTypes.string
     })
   }),
+  t: PropTypes.func.isRequired,
   mobile: PropTypes.bool,
 };
 
@@ -242,4 +244,4 @@ function mapDispatchToProps(dispatch) {
   );
 }
 
-export default connect(mapStateToProps, mapDispatchToProps)(CollectionList);
+export default withTranslation()(connect(mapStateToProps, mapDispatchToProps)(CollectionList));

client/modules/IDE/components/CollectionList/CollectionListRow.jsx

@@ -4,6 +4,7 @@ import React from 'react';
 import { connect } from 'react-redux';
 import { Link } from 'react-router';
 import { bindActionCreators } from 'redux';
+import { withTranslation } from 'react-i18next';
 import * as ProjectActions from '../../actions/project';
 import * as CollectionsActions from '../../actions/collections';
 import * as IdeActions from '../../actions/ide';
@@ -81,7 +82,7 @@ class CollectionListRowBase extends React.Component {
 
   handleCollectionDelete = () => {
     this.closeAll();
-    if (window.confirm(`Are you sure you want to delete "${this.props.collection.name}"?`)) {
+    if (window.confirm(this.props.t('Common.DeleteConfirmation', { name: this.props.collection.name }))) {
       this.props.deleteCollection(this.props.collection.id);
     }
   }
@@ -130,7 +131,7 @@ class CollectionListRowBase extends React.Component {
           onClick={this.toggleOptions}
           onBlur={this.onBlurComponent}
           onFocus={this.onFocusComponent}
-          aria-label="Toggle Open/Close collection options"
+          aria-label={this.props.t('CollectionListRow.ToggleCollectionOptionsARIA')}
         >
           <DownFilledTriangleIcon title="Menu" />
         </button>
@@ -145,7 +146,7 @@ class CollectionListRowBase extends React.Component {
                 onBlur={this.onBlurComponent}
                 onFocus={this.onFocusComponent}
               >
-                Add sketch
+                {this.props.t('CollectionListRow.AddSketch')}
               </button>
             </li>
             {userIsOwner &&
@@ -156,7 +157,7 @@ class CollectionListRowBase extends React.Component {
                   onBlur={this.onBlurComponent}
                   onFocus={this.onFocusComponent}
                 >
-                  Delete
+                  {this.props.t('CollectionListRow.Delete')}
                 </button>
               </li>}
             {userIsOwner &&
@@ -167,7 +168,7 @@ class CollectionListRowBase extends React.Component {
                   onBlur={this.onBlurComponent}
                   onFocus={this.onFocusComponent}
                 >
-                  Rename
+                  {this.props.t('CollectionListRow.Rename')}
                 </button>
               </li>}
           </ul>
@@ -248,6 +249,7 @@ CollectionListRowBase.propTypes = {
   editCollection: PropTypes.func.isRequired,
   onAddSketches: PropTypes.func.isRequired,
   mobile: PropTypes.bool,
+  t: PropTypes.func.isRequired
 };
 
 CollectionListRowBase.defaultProps = {
@@ -258,4 +260,4 @@ function mapDispatchToPropsSketchListRow(dispatch) {
   return bindActionCreators(Object.assign({}, CollectionsActions, ProjectActions, IdeActions, ToastActions), dispatch);
 }
 
-export default connect(null, mapDispatchToPropsSketchListRow)(CollectionListRowBase);
+export default withTranslation()(connect(null, mapDispatchToPropsSketchListRow)(CollectionListRowBase));

client/modules/IDE/components/QuickAddList/QuickAddList.jsx

@@ -1,11 +1,12 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { Link } from 'react-router';
+import { withTranslation } from 'react-i18next';
 
 import Icons from './Icons';
 
 const Item = ({
-  isAdded, onSelect, name, url
+  isAdded, onSelect, name, url, t
 }) => {
   const buttonLabel = isAdded ? 'Remove from collection' : 'Add to collection';
   return (
@@ -20,7 +21,7 @@ const Item = ({
         target="_blank"
         onClick={e => e.stopPropogation()}
       >
-        View
+        {t('QuickAddList.View')}
       </Link>
     </li>
   );
@@ -37,10 +38,11 @@ Item.propTypes = {
   url: PropTypes.string.isRequired,
   isAdded: PropTypes.bool.isRequired,
   onSelect: PropTypes.func.isRequired,
+  t: PropTypes.func.isRequired
 };
 
 const QuickAddList = ({
-  items, onAdd, onRemove
+  items, onAdd, onRemove, t
 }) => {
   const handleAction = (item) => {
     if (item.isAdded) {
@@ -53,6 +55,7 @@ const QuickAddList = ({
   return (
     <ul className="quick-add">{items.map(item => (<Item
       key={item.id}
+      t={t}
       {...item}
       onSelect={
         (event) => {
@@ -70,6 +73,7 @@ QuickAddList.propTypes = {
   items: PropTypes.arrayOf(ItemType).isRequired,
   onAdd: PropTypes.func.isRequired,
   onRemove: PropTypes.func.isRequired,
+  t: PropTypes.func.isRequired
 };
 
-export default QuickAddList;
+export default withTranslation()(QuickAddList);