diff --git a/src/views/preview/project-view.jsx b/src/views/preview/project-view.jsx index 3c21d9e4a..423ed6a95 100644 --- a/src/views/preview/project-view.jsx +++ b/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; diff --git a/src/views/preview/stats.jsx b/src/views/preview/stats.jsx index c8fafbfdd..0aadc10f8 100644 --- a/src/views/preview/stats.jsx +++ b/src/views/preview/stats.jsx @@ -10,7 +10,7 @@ const projectShape = require('./projectshape.jsx').projectShape; require('./stats.scss'); const Stats = props => ( - +