Merge pull request #2211 from paulkaplan/fix-studio-modal

Connect the consolidated studio data directly

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 (
             <AddToStudioModalPresentation
@@ -56,7 +65,7 @@ class AddToStudioModal extends React.Component {
                 waitingToClose={this.state.waitingToClose}
                 onRequestClose={this.handleRequestClose}
                 onSubmit={this.handleSubmit}
-                onToggleStudio={this.props.onToggleStudio}
+                onToggleStudio={this.handleToggleStudio}
             />
         );
     }

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;

src/views/preview/presentation.jsx

@@ -69,7 +69,6 @@ const PreviewPresentation = ({
     replies,
     addToStudioOpen,
     projectStudios,
-    studios,
     userOwnsProject,
     onAddComment,
     onDeleteComment,
@@ -184,7 +183,6 @@ const PreviewPresentation = ({
                                         projectInfo={projectInfo}
                                         reportOpen={reportOpen}
                                         shareDate={shareDate}
-                                        studios={studios}
                                         onAddToStudioClicked={onAddToStudioClicked}
                                         onAddToStudioClosed={onAddToStudioClosed}
                                         onReportClicked={onReportClicked}
@@ -297,7 +295,6 @@ const PreviewPresentation = ({
                                     projectInfo={projectInfo}
                                     reportOpen={reportOpen}
                                     shareDate={shareDate}
-                                    studios={studios}
                                     onAddToStudioClicked={onAddToStudioClicked}
                                     onAddToStudioClosed={onAddToStudioClosed}
                                     onReportClicked={onReportClicked}
@@ -455,7 +452,6 @@ PreviewPresentation.propTypes = {
     remixes: PropTypes.arrayOf(PropTypes.object),
     replies: PropTypes.objectOf(PropTypes.array),
     reportOpen: PropTypes.bool,
-    studios: PropTypes.arrayOf(PropTypes.object),
     userOwnsProject: PropTypes.bool
 };
 

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
     };

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
-                    </Button>,
-                    <AddToStudioModal
-                        isOpen={props.addToStudioOpen}
-                        key="add-to-studio-modal"
-                        studios={props.studios}
-                        onRequestClose={props.onAddToStudioClosed}
-                        onToggleStudio={props.onToggleStudio}
-                    />
+                    </Button>
+                    {props.addToStudioOpen && (
+                        <AddToStudioModal
+                            isOpen
+                            key="add-to-studio-modal"
+                            onRequestClose={props.onAddToStudioClosed}
+                            onToggleStudio={props.onToggleStudio}
+                        />
+                    )}
                 </React.Fragment>
             }
             <Button className="action-button copy-link-button">
@@ -56,14 +57,16 @@ const Subactions = props => (
                     onClick={props.onReportClicked}
                 >
                     Report
-                </Button>,
-                <ReportModal
-                    isOpen={props.reportOpen}
-                    key="report-modal"
-                    type="project"
-                    onReport={props.onReportSubmit}
-                    onRequestClose={props.onReportClose}
-                />
+                </Button>
+                {props.reportOpen && (
+                    <ReportModal
+                        isOpen
+                        key="report-modal"
+                        type="project"
+                        onReport={props.onReportSubmit}
+                        onRequestClose={props.onReportClose}
+                    />
+                )}
             </React.Fragment>
             }
         </FlexRow>
@@ -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;