From 7dd9701fe01a64fb3f1a2b9e4667db174245e143 Mon Sep 17 00:00:00 2001
From: Andrew Sliwinski <andrewsliwinski@acm.org>
Date: Fri, 12 Jan 2018 15:46:50 -0500
Subject: [PATCH] Move library 'selected item' tracking into individual
 containers

---
 src/components/library/library.jsx   | 6 ------
 src/containers/backdrop-library.jsx  | 6 ++++++
 src/containers/costume-library.jsx   | 6 ++++++
 src/containers/extension-library.jsx | 6 ++++++
 src/containers/sound-library.jsx     | 7 +++++++
 src/containers/sprite-library.jsx    | 6 ++++++
 6 files changed, 31 insertions(+), 6 deletions(-)

diff --git a/src/components/library/library.jsx b/src/components/library/library.jsx
index 6dadeed1d..1592e99c5 100644
--- a/src/components/library/library.jsx
+++ b/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]);
diff --git a/src/containers/backdrop-library.jsx b/src/containers/backdrop-library.jsx
index 07b55f03e..e6b7d4d39 100644
--- a/src/containers/backdrop-library.jsx
+++ b/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 (
diff --git a/src/containers/costume-library.jsx b/src/containers/costume-library.jsx
index c79240f29..2e631bd95 100644
--- a/src/containers/costume-library.jsx
+++ b/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 (
diff --git a/src/containers/extension-library.jsx b/src/containers/extension-library.jsx
index 0d64b564f..9998fbb3e 100644
--- a/src/containers/extension-library.jsx
+++ b/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 => ({
diff --git a/src/containers/sound-library.jsx b/src/containers/sound-library.jsx
index 7a834c2eb..928e85db8 100644
--- a/src/containers/sound-library.jsx
+++ b/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
diff --git a/src/containers/sprite-library.jsx b/src/containers/sprite-library.jsx
index 6062e02a9..00b3d07ca 100644
--- a/src/containers/sprite-library.jsx
+++ b/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();
-- 
GitLab