Merge pull request #3164 from chrisgarrity/issue/2501-localize-tags

Localize library tags

src/components/library/library.jsx

@@ -13,17 +13,22 @@ import analytics from '../../lib/analytics';
 
 import styles from './library.css';
 
-const ALL_TAG_TITLE = 'All';
-const tagListPrefix = [{title: ALL_TAG_TITLE}];
-
 const messages = defineMessages({
     filterPlaceholder: {
         id: 'gui.library.filterPlaceholder',
         defaultMessage: 'Search',
         description: 'Placeholder text for library search field'
+    },
+    allTag: {
+        id: 'gui.library.allTag',
+        defaultMessage: 'All',
+        description: 'Label for library tag to revert to all items after filtering by tag.'
     }
 });
 
+const ALL_TAG = {tag: 'all', intlLabel: messages.allTag};
+const tagListPrefix = [ALL_TAG];
+
 class LibraryComponent extends React.Component {
     constructor (props) {
         super(props);
@@ -42,7 +47,7 @@ class LibraryComponent extends React.Component {
         this.state = {
             selectedItem: null,
             filterQuery: '',
-            selectedTag: ALL_TAG_TITLE.toLowerCase()
+            selectedTag: ALL_TAG.tag
         };
     }
     componentDidUpdate (prevProps, prevState) {
@@ -80,7 +85,7 @@ class LibraryComponent extends React.Component {
     handleFilterChange (event) {
         this.setState({
             filterQuery: event.target.value,
-            selectedTag: ALL_TAG_TITLE.toLowerCase()
+            selectedTag: ALL_TAG.tag
         });
     }
     handleFilterClear () {
@@ -141,7 +146,7 @@ class LibraryComponent extends React.Component {
                             <div className={styles.tagWrapper}>
                                 {tagListPrefix.concat(this.props.tags).map((tagProps, id) => (
                                     <TagButton
-                                        active={this.state.selectedTag === tagProps.title.toLowerCase()}
+                                        active={this.state.selectedTag === tagProps.tag.toLowerCase()}
                                         className={classNames(
                                             styles.filterBarItem,
                                             styles.tagButton,

src/components/tag-button/tag-button.jsx

 import classNames from 'classnames';
 import PropTypes from 'prop-types';
 import React from 'react';
+import {FormattedMessage} from 'react-intl';
 
 import Button from '../button/button.jsx';
 
@@ -10,7 +11,8 @@ const TagButtonComponent = ({
     active,
     iconClassName,
     className,
-    title,
+    tag, // eslint-disable-line no-unused-vars
+    intlLabel,
     ...props
 }) => (
     <Button
@@ -26,17 +28,19 @@ const TagButtonComponent = ({
         )}
         {...props}
     >
-        {title}
+        <FormattedMessage {...intlLabel} />
     </Button>
 );
 
 TagButtonComponent.propTypes = {
     ...Button.propTypes,
     active: PropTypes.bool,
-    title: PropTypes.oneOfType([
-        PropTypes.string,
-        PropTypes.object // FormattedMessage
-    ]).isRequired
+    intlLabel: PropTypes.shape({
+        defaultMessage: PropTypes.string,
+        description: PropTypes.string,
+        id: PropTypes.string
+    }).isRequired,
+    tag: PropTypes.string.isRequired
 };
 
 TagButtonComponent.defaultProps = {

src/containers/tag-button.jsx

@@ -12,7 +12,7 @@ class TagButton extends React.Component {
         ]);
     }
     handleClick () {
-        this.props.onClick(this.props.title);
+        this.props.onClick(this.props.tag);
     }
     render () {
         return (
@@ -26,11 +26,7 @@ class TagButton extends React.Component {
 
 TagButton.propTypes = {
     ...TagButtonComponent.propTypes,
-    onClick: PropTypes.func,
-    title: PropTypes.oneOfType([
-        PropTypes.string,
-        PropTypes.object
-    ]).isRequired
+    onClick: PropTypes.func
 };
 
 export default TagButton;

src/lib/libraries/backdrop-tags.js

+import messages from './tag-messages.js';
 export default [
-    {title: 'Fantasy'},
-    {title: 'Music'},
-    {title: 'Sports'},
-    {title: 'Outdoors'},
-    {title: 'Indoors'},
-    {title: 'Space'},
-    {title: 'Underwater'},
-    {title: 'Patterns'}
+    {tag: 'fantasy', intlLabel: messages.fantasy},
+    {tag: 'music', intlLabel: messages.music},
+    {tag: 'sports', intlLabel: messages.sports},
+    {tag: 'outdoors', intlLabel: messages.outdoors},
+    {tag: 'indoors', intlLabel: messages.indoors},
+    {tag: 'space', intlLabel: messages.space},
+    {tag: 'underwater', intlLabel: messages.underwater},
+    {tag: 'patterns', intlLabel: messages.patterns}
 ];

src/lib/libraries/sound-tags.js

+import messages from './tag-messages.js';
 export default [
-    {title: 'Animals'},
-    {title: 'Effects'},
-    {title: 'Loops'},
-    {title: 'Notes'},
-    {title: 'Percussion'},
-    {title: 'Space'},
-    {title: 'Sports'},
-    {title: 'Voice'},
-    {title: 'Wacky'}
+    {tag: 'animals', intlLabel: messages.animals},
+    {tag: 'effects', intlLabel: messages.effects},
+    {tag: 'loops', intlLabel: messages.loops},
+    {tag: 'notes', intlLabel: messages.notes},
+    {tag: 'percussion', intlLabel: messages.percussion},
+    {tag: 'space', intlLabel: messages.space},
+    {tag: 'sports', intlLabel: messages.sports},
+    {tag: 'voice', intlLabel: messages.voice},
+    {tag: 'wacky', intlLabel: messages.wacky}
 ];

src/lib/libraries/sprite-tags.js

+import messages from './tag-messages.js';
 export default [
-    {title: 'Animals'},
-    {title: 'People'},
-    {title: 'Fantasy'},
-    {title: 'Dance'},
-    {title: 'Music'},
-    {title: 'Sports'},
-    {title: 'Food'},
-    {title: 'Fashion'}
+    {tag: 'animals', intlLabel: messages.animals},
+    {tag: 'people', intlLabel: messages.people},
+    {tag: 'fantasy', intlLabel: messages.fantasy},
+    {tag: 'dance', intlLabel: messages.dance},
+    {tag: 'music', intlLabel: messages.music},
+    {tag: 'sports', intlLabel: messages.sports},
+    {tag: 'food', intlLabel: messages.food},
+    {tag: 'fashion', intlLabel: messages.fashion}
 ];

src/lib/libraries/tag-messages.js

+import {defineMessages} from 'react-intl';
+
+export default defineMessages({
+    all: {
+        defaultMessage: 'All',
+        description: 'Tag for filtering a library for everything',
+        id: 'gui.libraryTags.all'
+    },
+    animals: {
+        defaultMessage: 'Animals',
+        description: 'Tag for filtering a library for animals',
+        id: 'gui.libraryTags.animals'
+    },
+    dance: {
+        defaultMessage: 'Dance',
+        description: 'Tag for filtering a library for dance',
+        id: 'gui.libraryTags.dance'
+    },
+    effects: {
+        defaultMessage: 'Effects',
+        description: 'Tag for filtering a library for effects',
+        id: 'gui.libraryTags.effects'
+    },
+    fantasy: {
+        defaultMessage: 'Fantasy',
+        description: 'Tag for filtering a library for fantasy',
+        id: 'gui.libraryTags.fantasy'
+    },
+    fashion: {
+        defaultMessage: 'Fashion',
+        description: 'Tag for filtering a library for fashion',
+        id: 'gui.libraryTags.fashion'
+    },
+    food: {
+        defaultMessage: 'Food',
+        description: 'Tag for filtering a library for food',
+        id: 'gui.libraryTags.food'
+    },
+    indoors: {
+        defaultMessage: 'Indoors',
+        description: 'Tag for filtering a library for indoors',
+        id: 'gui.libraryTags.indoors'
+    },
+    loops: {
+        defaultMessage: 'Loops',
+        description: 'Tag for filtering a library for loops',
+        id: 'gui.libraryTags.loops'
+    },
+    music: {
+        defaultMessage: 'Music',
+        description: 'Tag for filtering a library for music',
+        id: 'gui.libraryTags.music'
+    },
+    notes: {
+        defaultMessage: 'Notes',
+        description: 'Tag for filtering a library for notes',
+        id: 'gui.libraryTags.notes'
+    },
+    outdoors: {
+        defaultMessage: 'Outdoors',
+        description: 'Tag for filtering a library for outdoors',
+        id: 'gui.libraryTags.outdoors'
+    },
+    patterns: {
+        defaultMessage: 'Patterns',
+        description: 'Tag for filtering a library for patterns',
+        id: 'gui.libraryTags.patterns'
+    },
+    people: {
+        defaultMessage: 'People',
+        description: 'Tag for filtering a library for people',
+        id: 'gui.libraryTags.people'
+    },
+    percussion: {
+        defaultMessage: 'Percussion',
+        description: 'Tag for filtering a library for percussion',
+        id: 'gui.libraryTags.percussion'
+    },
+    space: {
+        defaultMessage: 'Space',
+        description: 'Tag for filtering a library for space',
+        id: 'gui.libraryTags.space'
+    },
+    sports: {
+        defaultMessage: 'Sports',
+        description: 'Tag for filtering a library for sports',
+        id: 'gui.libraryTags.sports'
+    },
+    underwater: {
+        defaultMessage: 'Underwater',
+        description: 'Tag for filtering a library for underwater',
+        id: 'gui.libraryTags.underwater'
+    },
+    voice: {
+        defaultMessage: 'Voice',
+        description: 'Tag for filtering a library for voice',
+        id: 'gui.libraryTags.voice'
+    },
+    wacky: {
+        defaultMessage: 'Wacky',
+        description: 'Tag for filtering a library for wacky',
+        id: 'gui.libraryTags.wacky'
+    }
+});