Move library 'selected item' tracking into individual containers

src/components/library/library.jsx

@@ -2,7 +2,6 @@ import bindAll from 'lodash.bindall';
 import PropTypes from 'prop-types';
 import React from 'react';
 
-import analytics from '../../lib/analytics';
 import LibraryItem from '../library-item/library-item.jsx';
 import ModalComponent from '../modal/modal.jsx';
 
@@ -34,11 +33,6 @@ class LibraryComponent extends React.Component {
     handleSelect (id) {
         this.props.onRequestClose();
         this.props.onItemSelected(this.getFilteredData()[id]);
-        analytics.event({
-            category: 'library',
-            action: 'Select Item',
-            value: id
-        });
     }
     handleMouseEnter (id) {
         if (this.props.onItemMouseEnter) this.props.onItemMouseEnter(this.getFilteredData()[id]);

src/containers/backdrop-library.jsx

@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import VM from 'scratch-vm';
 
+import analytics from '../lib/analytics';
 import backdropLibraryContent from '../lib/libraries/backdrops.json';
 import LibraryComponent from '../components/library/library.jsx';
 
@@ -27,6 +28,11 @@ class BackdropLibrary extends React.Component {
                 this.props.onNewBackdrop();
             }
         });
+        analytics.event({
+            category: 'library',
+            action: 'Select Backdrop',
+            label: item.name
+        });
     }
     render () {
         return (

src/containers/costume-library.jsx

@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import VM from 'scratch-vm';
 
+import analytics from '../lib/analytics';
 import costumeLibraryContent from '../lib/libraries/costumes.json';
 import LibraryComponent from '../components/library/library.jsx';
 
@@ -25,6 +26,11 @@ class CostumeLibrary extends React.PureComponent {
         this.props.vm.addCostume(item.md5, vmCostume).then(() => {
             this.props.onNewCostume();
         });
+        analytics.event({
+            category: 'library',
+            action: 'Select Costume',
+            label: item.name
+        });
     }
     render () {
         return (

src/containers/extension-library.jsx

@@ -5,6 +5,7 @@ import VM from 'scratch-vm';
 
 import extensionLibraryContent from '../lib/libraries/extensions/index';
 
+import analytics from '../lib/analytics';
 import LibraryComponent from '../components/library/library.jsx';
 import extensionIcon from '../components/sprite-selector/icon--sprite.svg';
 
@@ -30,6 +31,11 @@ class ExtensionLibrary extends React.PureComponent {
                 });
             }
         }
+        analytics.event({
+            category: 'library',
+            action: 'Select Extension',
+            label: item.name
+        });
     }
     render () {
         const extensionLibraryThumbnailData = extensionLibraryContent.map(extension => ({

src/containers/sound-library.jsx

@@ -3,6 +3,8 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import VM from 'scratch-vm';
 import AudioEngine from 'scratch-audio';
+
+import analytics from '../lib/analytics';
 import LibraryComponent from '../components/library/library.jsx';
 
 import soundIcon from '../components/asset-panel/icon--sound.svg';
@@ -58,6 +60,11 @@ class SoundLibrary extends React.PureComponent {
         this.props.vm.addSound(vmSound).then(() => {
             this.props.onNewSound();
         });
+        analytics.event({
+            category: 'library',
+            action: 'Select Sound',
+            label: soundItem.name
+        });
     }
     render () {
         // @todo need to use this hack to avoid library using md5 for image

src/containers/sprite-library.jsx

@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import VM from 'scratch-vm';
 
+import analytics from '../lib/analytics';
 import spriteLibraryContent from '../lib/libraries/sprites.json';
 
 import LibraryComponent from '../components/library/library.jsx';
@@ -29,6 +30,11 @@ class SpriteLibrary extends React.PureComponent {
     }
     handleItemSelect (item) {
         this.props.vm.addSprite2(JSON.stringify(item.json));
+        analytics.event({
+            category: 'library',
+            action: 'Select Sprite',
+            label: item.name
+        });
     }
     handleMouseEnter (item) {
         this.stopRotatingCostumes();