Fix propType warnings

Including action-menu which was also giving one when the backdrop library opened.
Localize the costume library, I missed it while doing the other libraries.

src/components/action-menu/action-menu.jsx

@@ -137,12 +137,12 @@ class ActionMenu extends React.Component {
                 <div className={styles.moreButtonsOuter}>
                     <div className={styles.moreButtons}>
                         {(moreButtons || []).map(({img, title, onClick: handleClick,
-                            fileAccept, fileChange, fileInput}) => {
+                            fileAccept, fileChange, fileInput}, keyId) => {
                             const isComingSoon = !handleClick;
                             const hasFileInput = fileInput;
                             const tooltipId = title;
                             return (
-                                <div key={tooltipId}>
+                                <div key={`${tooltipId}-${keyId}`}>
                                     <button
                                         aria-label={title}
                                         className={classNames(styles.button, styles.moreButton, {

src/components/button/button.jsx

@@ -48,7 +48,7 @@ ButtonComponent.propTypes = {
     disabled: PropTypes.bool,
     iconClassName: PropTypes.string,
     iconSrc: PropTypes.string,
-    onClick: PropTypes.func.isRequired
+    onClick: PropTypes.func
 };
 
 export default ButtonComponent;

src/components/language-selector/language-selector.jsx

@@ -53,7 +53,7 @@ const LanguageSelector = ({
 LanguageSelector.propTypes = {
     currentLocale: PropTypes.string,
     onChange: PropTypes.func,
-    open: PropTypes.boolean
+    open: PropTypes.bool
 };
 
 export default LanguageSelector;

src/components/library/library.jsx

@@ -171,7 +171,7 @@ LibraryComponent.propTypes = {
     onItemMouseLeave: PropTypes.func,
     onItemSelected: PropTypes.func,
     onRequestClose: PropTypes.func,
-    tags: PropTypes.arrayOf(TagButton.propTypes),
+    tags: PropTypes.arrayOf(PropTypes.shape(TagButton.propTypes)),
     title: PropTypes.string.isRequired
 };
 

src/containers/backdrop-library.jsx

@@ -1,7 +1,7 @@
 import bindAll from 'lodash.bindall';
 import PropTypes from 'prop-types';
 import React from 'react';
-import {injectIntl, FormattedMessage} from 'react-intl';
+import {defineMessages, injectIntl, intlShape} from 'react-intl';
 import VM from 'scratch-vm';
 
 import analytics from '../lib/analytics';
@@ -9,6 +9,14 @@ import backdropLibraryContent from '../lib/libraries/backdrops.json';
 import backdropTags from '../lib/libraries/backdrop-tags';
 import LibraryComponent from '../components/library/library.jsx';
 
+const messages = defineMessages({
+    libraryTitle: {
+        defaultMessage: 'Choose a Backdrop',
+        description: 'Heading for the backdrop library',
+        id: 'gui.costumeLibrary.chooseABackdrop'
+    }
+});
+
 
 class BackdropLibrary extends React.Component {
     constructor (props) {
@@ -37,13 +45,7 @@ class BackdropLibrary extends React.Component {
             <LibraryComponent
                 data={backdropLibraryContent}
                 tags={backdropTags}
-                title={
-                    <FormattedMessage
-                        defaultMessage="Choose a Backdrop"
-                        description="Heading for the backdrop library"
-                        id="gui.backdropLibrary.chooseABackdrop"
-                    />
-                }
+                title={this.props.intl.formatMessage(messages.libraryTitle)}
                 onItemSelected={this.handleItemSelect}
                 onRequestClose={this.props.onRequestClose}
             />
@@ -52,6 +54,7 @@ class BackdropLibrary extends React.Component {
 }
 
 BackdropLibrary.propTypes = {
+    intl: intlShape.isRequired,
     onRequestClose: PropTypes.func,
     vm: PropTypes.instanceOf(VM).isRequired
 };

src/containers/costume-library.jsx

@@ -1,6 +1,7 @@
 import bindAll from 'lodash.bindall';
 import PropTypes from 'prop-types';
 import React from 'react';
+import {defineMessages, injectIntl, intlShape} from 'react-intl';
 import VM from 'scratch-vm';
 
 import analytics from '../lib/analytics';
@@ -8,6 +9,14 @@ import costumeLibraryContent from '../lib/libraries/costumes.json';
 import spriteTags from '../lib/libraries/sprite-tags';
 import LibraryComponent from '../components/library/library.jsx';
 
+const messages = defineMessages({
+    libraryTitle: {
+        defaultMessage: 'Choose a Costume',
+        description: 'Heading for the costume library',
+        id: 'gui.costumeLibrary.chooseACostume'
+    }
+});
+
 
 class CostumeLibrary extends React.PureComponent {
     constructor (props) {
@@ -36,7 +45,7 @@ class CostumeLibrary extends React.PureComponent {
             <LibraryComponent
                 data={costumeLibraryContent}
                 tags={spriteTags}
-                title="Choose a Costume"
+                title={this.props.intl.formatMessage(messages.libraryTitle)}
                 onItemSelected={this.handleItemSelected}
                 onRequestClose={this.props.onRequestClose}
             />
@@ -45,8 +54,9 @@ class CostumeLibrary extends React.PureComponent {
 }
 
 CostumeLibrary.propTypes = {
+    intl: intlShape.isRequired,
     onRequestClose: PropTypes.func,
     vm: PropTypes.instanceOf(VM).isRequired
 };
 
-export default CostumeLibrary;
+export default injectIntl(CostumeLibrary);

src/containers/sound-library.jsx

@@ -1,7 +1,7 @@
 import bindAll from 'lodash.bindall';
 import PropTypes from 'prop-types';
 import React from 'react';
-import {injectIntl, FormattedMessage} from 'react-intl';
+import {defineMessages, injectIntl, intlShape} from 'react-intl';
 import VM from 'scratch-vm';
 import AudioEngine from 'scratch-audio';
 
@@ -13,6 +13,14 @@ import soundIcon from '../components/asset-panel/icon--sound.svg';
 import soundLibraryContent from '../lib/libraries/sounds.json';
 import soundTags from '../lib/libraries/sound-tags';
 
+const messages = defineMessages({
+    libraryTitle: {
+        defaultMessage: 'Choose a Sound',
+        description: 'Heading for the sound library',
+        id: 'gui.soundLibrary.chooseASound'
+    }
+});
+
 class SoundLibrary extends React.PureComponent {
     constructor (props) {
         super(props);
@@ -86,13 +94,7 @@ class SoundLibrary extends React.PureComponent {
             <LibraryComponent
                 data={soundLibraryThumbnailData}
                 tags={soundTags}
-                title={
-                    <FormattedMessage
-                        defaultMessage="Choose a Sound"
-                        description="Heading for the sound library"
-                        id="gui.soundLibrary.chooseASound"
-                    />
-                }
+                title={this.props.intl.formatMessage(messages.libraryTitle)}
                 onItemMouseEnter={this.handleItemMouseEnter}
                 onItemMouseLeave={this.handleItemMouseLeave}
                 onItemSelected={this.handleItemSelected}
@@ -103,6 +105,7 @@ class SoundLibrary extends React.PureComponent {
 }
 
 SoundLibrary.propTypes = {
+    intl: intlShape.isRequired,
     onNewSound: PropTypes.func.isRequired,
     onRequestClose: PropTypes.func,
     vm: PropTypes.instanceOf(VM).isRequired

src/containers/sprite-library.jsx

@@ -1,7 +1,7 @@
 import bindAll from 'lodash.bindall';
 import PropTypes from 'prop-types';
 import React from 'react';
-import {injectIntl, FormattedMessage} from 'react-intl';
+import {injectIntl, intlShape, defineMessages} from 'react-intl';
 import VM from 'scratch-vm';
 
 import analytics from '../lib/analytics';
@@ -10,6 +10,14 @@ import spriteTags from '../lib/libraries/sprite-tags';
 
 import LibraryComponent from '../components/library/library.jsx';
 
+const messages = defineMessages({
+    libraryTitle: {
+        defaultMessage: 'Choose a Sprite',
+        description: 'Heading for the sprite library',
+        id: 'gui.spriteLibrary.chooseASprite'
+    }
+});
+
 class SpriteLibrary extends React.PureComponent {
     constructor (props) {
         super(props);
@@ -74,13 +82,7 @@ class SpriteLibrary extends React.PureComponent {
             <LibraryComponent
                 data={this.state.sprites}
                 tags={spriteTags}
-                title={
-                    <FormattedMessage
-                        defaultMessage="Choose a Sprite"
-                        description="Heading for the sprite library"
-                        id="gui.spriteLibrary.chooseASprite"
-                    />
-                }
+                title={this.props.intl.formatMessage(messages.libraryTitle)}
                 onItemMouseEnter={this.handleMouseEnter}
                 onItemMouseLeave={this.handleMouseLeave}
                 onItemSelected={this.handleItemSelect}
@@ -91,6 +93,7 @@ class SpriteLibrary extends React.PureComponent {
 }
 
 SpriteLibrary.propTypes = {
+    intl: intlShape.isRequired,
     onRequestClose: PropTypes.func,
     vm: PropTypes.instanceOf(VM).isRequired
 };