From 35abd285dfb7a06524895d4e6269774737a4d987 Mon Sep 17 00:00:00 2001 From: Paul Kaplan Date: Thu, 18 Oct 2018 16:45:24 -0400 Subject: [PATCH] Connect the consolidated studio data directly To the modal to prevent constantly updating. Also only render the modals if they are visible --- .../modal/addtostudio/container.jsx | 13 ++++- src/views/preview/add-to-studio.jsx | 54 +++++++++++++++++++ src/views/preview/presentation.jsx | 4 -- src/views/preview/preview.jsx | 48 +---------------- src/views/preview/subactions.jsx | 40 +++++++------- 5 files changed, 88 insertions(+), 71 deletions(-) create mode 100644 src/views/preview/add-to-studio.jsx diff --git a/src/components/modal/addtostudio/container.jsx b/src/components/modal/addtostudio/container.jsx index 582f194eb..a03f09074 100644 --- a/src/components/modal/addtostudio/container.jsx +++ b/src/components/modal/addtostudio/container.jsx @@ -8,7 +8,8 @@ class AddToStudioModal extends React.Component { super(props); bindAll(this, [ 'handleRequestClose', - 'handleSubmit' + 'handleSubmit', + 'handleToggleStudio' ]); this.state = { @@ -48,6 +49,14 @@ class AddToStudioModal extends React.Component { }); } + handleToggleStudio (id) { + const studioId = parseInt(id, 10); + if (isNaN(studioId)) { // sanity check in case event had no integer data-id + return; + } + this.props.onToggleStudio(this.props.studios.find(studio => studio.id === studioId)); + } + render () { return ( ); } diff --git a/src/views/preview/add-to-studio.jsx b/src/views/preview/add-to-studio.jsx new file mode 100644 index 000000000..80d517231 --- /dev/null +++ b/src/views/preview/add-to-studio.jsx @@ -0,0 +1,54 @@ +const connect = require('react-redux').connect; + +const previewActions = require('../../redux/preview.js'); +const AddToStudioModal = require('../../components/modal/addtostudio/container.jsx'); + +// Build consolidated curatedStudios object from all studio info. +// We add flags to indicate whether the project is currently in the studio, +// and the status of requests to join/leave studios. +const consolidateStudiosInfo = (curatedStudios, projectStudios, currentStudioIds, studioRequests) => { + const consolidatedStudios = []; + + projectStudios.forEach(projectStudio => { + const includesProject = (currentStudioIds.indexOf(projectStudio.id) !== -1); + const consolidatedStudio = + Object.assign({}, projectStudio, {includesProject: includesProject}); + consolidatedStudios.push(consolidatedStudio); + }); + + // copy the curated studios that project is not in + curatedStudios.forEach(curatedStudio => { + if (!projectStudios.some(projectStudio => (projectStudio.id === curatedStudio.id))) { + const includesProject = (currentStudioIds.indexOf(curatedStudio.id) !== -1); + const consolidatedStudio = + Object.assign({}, curatedStudio, {includesProject: includesProject}); + consolidatedStudios.push(consolidatedStudio); + } + }); + + // set studio state to hasRequestOutstanding==true if it's being fetched, + // false if it's not + consolidatedStudios.forEach(consolidatedStudio => { + const id = consolidatedStudio.id; + consolidatedStudio.hasRequestOutstanding = + ((id in studioRequests) && + (studioRequests[id] === previewActions.Status.FETCHING)); + }); + + return consolidatedStudios; +}; + +const mapStateToProps = state => ({ + studios: consolidateStudiosInfo(state.preview.curatedStudios, + state.preview.projectStudios, state.preview.currentStudioIds, + state.preview.status.studioRequests) +}); + +const mapDispatchToProps = () => ({}); + +const ConnectedAddToStudioModal = connect( + mapStateToProps, + mapDispatchToProps +)(AddToStudioModal); + +module.exports = ConnectedAddToStudioModal; diff --git a/src/views/preview/presentation.jsx b/src/views/preview/presentation.jsx index 65a1db68b..f30a75505 100644 --- a/src/views/preview/presentation.jsx +++ b/src/views/preview/presentation.jsx @@ -69,7 +69,6 @@ const PreviewPresentation = ({ replies, addToStudioOpen, projectStudios, - studios, userOwnsProject, onAddComment, onDeleteComment, @@ -183,7 +182,6 @@ const PreviewPresentation = ({ projectInfo={projectInfo} reportOpen={reportOpen} shareDate={shareDate} - studios={studios} onAddToStudioClicked={onAddToStudioClicked} onAddToStudioClosed={onAddToStudioClosed} onReportClicked={onReportClicked} @@ -296,7 +294,6 @@ const PreviewPresentation = ({ projectInfo={projectInfo} reportOpen={reportOpen} shareDate={shareDate} - studios={studios} onAddToStudioClicked={onAddToStudioClicked} onAddToStudioClosed={onAddToStudioClosed} onReportClicked={onReportClicked} @@ -454,7 +451,6 @@ PreviewPresentation.propTypes = { remixes: PropTypes.arrayOf(PropTypes.object), replies: PropTypes.objectOf(PropTypes.array), reportOpen: PropTypes.bool, - studios: PropTypes.arrayOf(PropTypes.object), userOwnsProject: PropTypes.bool }; diff --git a/src/views/preview/preview.jsx b/src/views/preview/preview.jsx index a5af64af9..2db3b6873 100644 --- a/src/views/preview/preview.jsx +++ b/src/views/preview/preview.jsx @@ -240,17 +240,12 @@ class Preview extends React.Component { ); } } - handleToggleStudio (id) { - const studioId = parseInt(id, 10); - if (isNaN(studioId)) { // sanity check in case event had no integer data-id - return; - } - const studio = this.props.studios.find(thisStudio => (thisStudio.id === studioId)); + handleToggleStudio (studio) { // only send add or leave request to server if we know current status if ((typeof studio !== 'undefined') && ('includesProject' in studio)) { this.props.toggleStudio( (studio.includesProject === false), - studioId, + studio.id, this.props.projectInfo.id, this.props.user.token ); @@ -372,7 +367,6 @@ class Preview extends React.Component { remixes={this.props.remixes} replies={this.props.replies} reportOpen={this.state.reportOpen} - studios={this.props.studios} userOwnsProject={this.props.userOwnsProject} onAddComment={this.handleAddComment} onAddToStudioClicked={this.handleAddToStudioClick} @@ -476,7 +470,6 @@ Preview.propTypes = { setFullScreen: PropTypes.func.isRequired, setLovedStatus: PropTypes.func.isRequired, setPlayer: PropTypes.func.isRequired, - studios: PropTypes.arrayOf(PropTypes.object), toggleStudio: PropTypes.func.isRequired, updateProject: PropTypes.func.isRequired, user: PropTypes.shape({ @@ -503,40 +496,6 @@ Preview.defaultProps = { user: {} }; -// Build consolidated curatedStudios object from all studio info. -// We add flags to indicate whether the project is currently in the studio, -// and the status of requests to join/leave studios. -const consolidateStudiosInfo = (curatedStudios, projectStudios, currentStudioIds, studioRequests) => { - const consolidatedStudios = []; - - projectStudios.forEach(projectStudio => { - const includesProject = (currentStudioIds.indexOf(projectStudio.id) !== -1); - const consolidatedStudio = - Object.assign({}, projectStudio, {includesProject: includesProject}); - consolidatedStudios.push(consolidatedStudio); - }); - - // copy the curated studios that project is not in - curatedStudios.forEach(curatedStudio => { - if (!projectStudios.some(projectStudio => (projectStudio.id === curatedStudio.id))) { - const includesProject = (currentStudioIds.indexOf(curatedStudio.id) !== -1); - const consolidatedStudio = - Object.assign({}, curatedStudio, {includesProject: includesProject}); - consolidatedStudios.push(consolidatedStudio); - } - }); - - // set studio state to hasRequestOutstanding==true if it's being fetched, - // false if it's not - consolidatedStudios.forEach(consolidatedStudio => { - const id = consolidatedStudio.id; - consolidatedStudio.hasRequestOutstanding = - ((id in studioRequests) && - (studioRequests[id] === previewActions.Status.FETCHING)); - }); - return consolidatedStudios; -}; - const mapStateToProps = state => { const projectInfoPresent = Object.keys(state.preview.projectInfo).length > 0; const userPresent = state.session.session.user && @@ -578,9 +537,6 @@ const mapStateToProps = state => { remixes: state.preview.remixes, replies: state.preview.replies, sessionStatus: state.session.status, // check if used - studios: consolidateStudiosInfo(state.preview.curatedStudios, - state.preview.projectStudios, state.preview.currentStudioIds, - state.preview.status.studioRequests), user: state.session.session.user, userOwnsProject: userOwnsProject }; diff --git a/src/views/preview/subactions.jsx b/src/views/preview/subactions.jsx index f09c361fa..f8b2ba837 100644 --- a/src/views/preview/subactions.jsx +++ b/src/views/preview/subactions.jsx @@ -4,7 +4,7 @@ const React = require('react'); const FlexRow = require('../../components/flex-row/flex-row.jsx'); const Button = require('../../components/forms/button.jsx'); -const AddToStudioModal = require('../../components/modal/addtostudio/container.jsx'); +const AddToStudioModal = require('./add-to-studio.jsx'); const ReportModal = require('../../components/modal/report/modal.jsx'); require('./subactions.scss'); @@ -35,14 +35,15 @@ const Subactions = props => ( onClick={props.onAddToStudioClicked} > Add to Studio - , - + + {props.addToStudioOpen && ( + + )} } , - + + {props.reportOpen && ( + + )} } @@ -81,8 +84,7 @@ Subactions.propTypes = { onReportSubmit: PropTypes.func.isRequired, onToggleStudio: PropTypes.func, reportOpen: PropTypes.bool, - shareDate: PropTypes.string, - studios: PropTypes.arrayOf(PropTypes.object) + shareDate: PropTypes.string }; module.exports = Subactions;