Merge pull request #2428 from benjiwheeler/fix-favorite-love

make love and favorite icons respond to click immediately, cleanly

src/views/preview/project-view.jsx

@@ -90,6 +90,8 @@ class Preview extends React.Component {
             addToStudioOpen: false,
             adminModalOpen: false,
             adminPanelOpen: adminPanelOpen || false,
+            clientFaved: false,
+            clientLoved: false,
             extensions: [],
             favoriteCount: 0,
             isRemixing: false,
@@ -150,6 +152,13 @@ class Preview extends React.Component {
                 }
             }
         }
+        if (this.props.faved !== prevProps.faved || this.props.loved !== prevProps.loved) {
+            this.setState({ // eslint-disable-line react/no-did-update-set-state
+                clientFaved: this.props.faved,
+                clientLoved: this.props.loved
+            });
+        }
+        /* eslint-enable react/no-did-update-set-state */
         if (this.props.playerMode !== prevProps.playerMode || this.props.fullScreen !== prevProps.fullScreen) {
             this.pushHistory(history.state === null);
         }
@@ -396,10 +405,12 @@ class Preview extends React.Component {
         );
         if (this.props.faved) {
             this.setState(state => ({
+                clientFaved: false,
                 favoriteCount: state.favoriteCount - 1
             }));
         } else {
             this.setState(state => ({
+                clientFaved: true,
                 favoriteCount: state.favoriteCount + 1
             }));
         }
@@ -419,10 +430,12 @@ class Preview extends React.Component {
         );
         if (this.props.loved) {
             this.setState(state => ({
+                clientLoved: false,
                 loveCount: state.loveCount - 1
             }));
         } else {
             this.setState(state => ({
+                clientLoved: true,
                 loveCount: state.loveCount + 1
             }));
         }
@@ -566,7 +579,7 @@ class Preview extends React.Component {
                         comments={this.props.comments}
                         editable={this.props.isEditable}
                         extensions={this.state.extensions}
-                        faved={this.props.faved}
+                        faved={this.state.clientFaved}
                         favoriteCount={this.state.favoriteCount}
                         isFullScreen={this.state.isFullScreen}
                         isLoggedIn={this.props.isLoggedIn}
@@ -577,7 +590,7 @@ class Preview extends React.Component {
                         justRemixed={this.state.justRemixed}
                         justShared={this.state.justShared}
                         loveCount={this.state.loveCount}
-                        loved={this.props.loved}
+                        loved={this.state.clientLoved}
                         modInfo={this.state.modInfo}
                         moreCommentsToLoad={this.props.moreCommentsToLoad}
                         originalInfo={this.props.original}
@@ -771,7 +784,7 @@ Preview.defaultProps = {
 
 const mapStateToProps = state => {
     const projectInfoPresent = state.preview.projectInfo &&
-            Object.keys(state.preview.projectInfo).length > 0 && state.preview.projectInfo.id > 0;
+        Object.keys(state.preview.projectInfo).length > 0 && state.preview.projectInfo.id > 0;
     const userPresent = state.session.session.user !== null &&
         typeof state.session.session.user !== 'undefined' &&
         Object.keys(state.session.session.user).length > 0;

src/views/preview/stats.jsx

@@ -10,7 +10,7 @@ const projectShape = require('./projectshape.jsx').projectShape;
 require('./stats.scss');
 
 const Stats = props => (
-    <FlexRow className="stats">
+    <FlexRow className="stats noselect">
         <div
             className={classNames('project-loves', {loved: props.loved})}
             key="loves"

src/views/preview/stats.scss

@@ -18,6 +18,15 @@
     }
 }
 
+.noselect {
+    -webkit-touch-callout: none;
+    -webkit-user-select: none;
+    -khtml-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+}
+
 .project-loves,
 .project-favorites,
 .project-remixes,