Merge pull request #493 from coralproject/143520971-stream-settings

Configure stream settings

client/coral-configure/components/ConfigureCommentStream.js

@@ -7,7 +7,7 @@ import I18n from 'coral-framework/modules/i18n/i18n';
 import translations from '../translations.json';
 const lang = new I18n(translations);
 
-export default ({handleChange, handleApply, changed, updateQuestionBoxContent, ...props}) => (
+export default ({handleChange, handleApply, changed, ...props}) => (
   <form onSubmit={handleApply}>
     <div className={styles.wrapper}>
       <div className={styles.container}>
@@ -38,9 +38,9 @@ export default ({handleChange, handleApply, changed, updateQuestionBoxContent, .
           <Checkbox
             className={styles.checkbox}
             cStyle={changed ? 'green' : 'darkGrey'}
-            name="premodLinks"
+            name="plinksenable"
             onChange={handleChange}
-            defaultChecked={props.premodLinks}
+            defaultChecked={props.premodLinksEnable}
             info={{
               title: lang.t('configureCommentStream.enablePremodLinks'),
               description: lang.t('configureCommentStream.enablePremodLinksDescription')
@@ -57,11 +57,10 @@ export default ({handleChange, handleApply, changed, updateQuestionBoxContent, .
               title: lang.t('configureCommentStream.enableQuestionBox'),
               description: lang.t('configureCommentStream.enableQuestionBoxDescription')
             }} />
-
           <div className={`${props.questionBoxEnable ? null : styles.hidden}`} >
             <TextField
               id="qboxcontent"
-              onChange={updateQuestionBoxContent}
+              onChange={handleChange}
               rows={3}
               value={props.questionBoxContent}
               label={lang.t('configureCommentStream.includeQuestionHere')}

client/coral-configure/containers/ConfigureStreamContainer.js

@@ -16,13 +16,13 @@ class ConfigureStreamContainer extends Component {
 
     this.state = {
       changed: false,
+      dirtySettings: props.asset.settings,
       closedAt: (props.asset.closedAt === null ? 'open' : 'closed')
     };
 
     this.toggleStatus = this.toggleStatus.bind(this);
     this.handleChange = this.handleChange.bind(this);
     this.handleApply = this.handleApply.bind(this);
-    this.updateQuestionBoxContent = this.updateQuestionBoxContent.bind(this);
   }
 
   handleApply (e) {
@@ -32,7 +32,7 @@ class ConfigureStreamContainer extends Component {
     const questionBoxEnable = elements.qboxenable.checked;
     const questionBoxContent = elements.qboxcontent.value;
 
-    const premodLinksEnable = elements.premodLinks.checked;
+    const premodLinksEnable = elements.plinksenable.checked;
     const {changed} = this.state;
 
     const newConfig = {
@@ -49,23 +49,29 @@ class ConfigureStreamContainer extends Component {
           changed: false
         });
       }, 300);
+
+      // this.props.loadAsset(this.props.data.asset);
     }
   }
 
   handleChange (e) {
+
+    // TODO: Don’t directly manipulate state and make state change immutable.
     if (e.target && e.target.id === 'qboxenable') {
-      this.props.asset.settings.questionBoxEnable = e.target.checked;
+      this.state.dirtySettings.questionBoxEnable = e.target.checked;
     }
+    if (e.target && e.target.id === 'qboxcontent') {
+      this.state.dirtySettings.questionBoxContent = e.target.value;
+    }
+    if (e.target && e.target.id === 'plinksenable') {
+      this.state.dirtySettings.premodLinksEnable = e.target.value;
+    }
+
     this.setState({
       changed: true
     });
   }
 
-  updateQuestionBoxContent(e) {
-    this.props.asset.settings.questionBoxContent = e.target.value;
-    this.handleChange(e);
-  }
-
   toggleStatus () {
 
     // update the closedAt status for the asset
@@ -85,10 +91,10 @@ class ConfigureStreamContainer extends Component {
   }
 
   render () {
-    const {settings} = this.props.asset;
+    const {dirtySettings} = this.state;
+    const premod = dirtySettings.moderation === 'PRE';
     const {closedAt} = this.state;
-    const premod = settings.moderation === 'PRE';
-    const closedTimeout = settings.closedTimeout;
+    const closedTimeout = dirtySettings.closedTimeout;
 
     return (
       <div>
@@ -96,11 +102,10 @@ class ConfigureStreamContainer extends Component {
           handleChange={this.handleChange}
           handleApply={this.handleApply}
           changed={this.state.changed}
-          premodLinks={settings.premodLinks}
+          premodLinksEnable={dirtySettings.premodLinksEnable}
           premod={premod}
-          updateQuestionBoxContent={this.updateQuestionBoxContent}
-          questionBoxEnable={settings.questionBoxEnable}
-          questionBoxContent={settings.questionBoxContent}
+          questionBoxEnable={dirtySettings.questionBoxEnable}
+          questionBoxContent={dirtySettings.questionBoxContent}
         />
         <hr />
         <h3>{closedAt === 'open' ? 'Close' : 'Open'} Comment Stream</h3>

client/coral-framework/graphql/queries/streamQuery.graphql

@@ -28,6 +28,7 @@ query AssetQuery($asset_id: ID, $asset_url: String, $comment_id: ID!, $has_comme
             moderation
             infoBoxEnable
             infoBoxContent
+            premodLinksEnable
             questionBoxEnable
             questionBoxContent
             closeTimeout