the animation now works

src/components/modal/addtostudio/animate-hoc.jsx

@@ -7,28 +7,42 @@ const PropTypes = require('prop-types');
  * @return {React.Component}           a wrapped studio button component
  */
 
-const AnimateHOC = ({
-    Component
-}) => {
+const AnimateHOC = Component => {
     class WrappedComponent extends React.Component {
-        constructor(props) {
+        constructor (props) {
             super(props);
-            let wasClicked = false;
+
+            this.state = {
+                wasClicked: false
+            };
+
+            this.handleClick = this.handleClick.bind(this);
         }
-        onClick () {
-            this.wasClicked = true; // BUT PROPS ARE READONLY?
+        handleClick () {
+            if (this.state.wasClicked) {
+                this.props.onClick(this.props.id);
+            } else {
+                this.setState({
+                    wasClicked: true
+                }, () => this.props.onClick(this.props.id));
+            }
         }
         render () {
+            const {wasClicked} = this.state;
             return (<Component
-                wasClicked={this.wasClicked}
                 {...this.props}
+                wasClicked={wasClicked}
+                onClick={this.handleClick}
             />);
         }
     }
 
+    WrappedComponent.propTypes = {
+        id: PropTypes.number,
+        onClick: PropTypes.func
+    };
+
     return WrappedComponent;
 };
 
-AnimateHOC.propTypes = {
-    Component: PropTypes.element
-};
+module.exports = AnimateHOC;

src/components/modal/addtostudio/modal.scss

@@ -179,8 +179,8 @@
 }
 
 .studio-status-icon-spinner {
-    animation-name: bump, spin;
-    -webkit-animation-name: bump, spin;
+    animation-name: intro, spin;
+    -webkit-animation-name: intro, spin;
     animation-duration: .25s, .5s;
     -webkit-animation-duration: .25s, .5s;
     animation-iteration-count: 1, infinite;

src/components/modal/addtostudio/presentation.jsx

@@ -31,7 +31,7 @@ const AddToStudioModalPresentation = ({
             includesProject={studio.includesProject}
             key={studio.id}
             title={studio.title}
-            onToggleStudio={onToggleStudio}
+            onClick={onToggleStudio}
         />
     ));
 

src/components/modal/addtostudio/studio-button.jsx

 const PropTypes = require('prop-types');
 const React = require('react');
 const classNames = require('classnames');
-const AnimateHOC = require('./animate-hoc');
+
+const AnimateHOC = require('./animate-hoc.jsx');
 
 require('./modal.scss');
 
@@ -10,15 +11,15 @@ const StudioButton = ({
     id,
     includesProject,
     title,
-    onToggleStudio,
+    onClick,
     wasClicked
 }) => {
     const checkmark = (
         <img
             alt="checkmark-icon"
             className={classNames(
-                {'studio-status-icon-with-animation': true},
-                'studio-status-icon-checkmark-img'
+                'studio-status-icon-checkmark-img',
+                {'studio-status-icon-with-animation': wasClicked}
             )}
             src="/svgs/modal/confirm.svg"
         />
@@ -34,8 +35,8 @@ const StudioButton = ({
         <img
             alt="plus-icon"
             className={classNames(
-                {'studio-status-icon-with-animation': true},
-                'studio-status-icon-plus-img'
+                'studio-status-icon-plus-img',
+                {'studio-status-icon-with-animation': wasClicked}
             )}
             src="/svgs/modal/add.svg"
         />
@@ -49,7 +50,7 @@ const StudioButton = ({
                     includesProject && !hasRequestOutstanding}
             )}
             data-id={id}
-            onClick={onToggleStudio}
+            onClick={onClick}
         >
             <div
                 className={classNames(
@@ -79,7 +80,7 @@ StudioButton.propTypes = {
     hasRequestOutstanding: PropTypes.bool,
     id: PropTypes.number,
     includesProject: PropTypes.bool,
-    onToggleStudio: PropTypes.func,
+    onClick: PropTypes.func,
     title: PropTypes.string,
     wasClicked: PropTypes.bool
 };

src/views/preview/preview.jsx

@@ -207,8 +207,8 @@ class Preview extends React.Component {
             );
         }
     }
-    handleToggleStudio (event) {
-        const studioId = parseInt(event.currentTarget.dataset.id, 10);
+    handleToggleStudio (id) {
+        const studioId = parseInt(id, 10);
         if (isNaN(studioId)) { // sanity check in case event had no integer data-id
             return;
         }