Turn StreamSettings to container

2026-08-13 12:40:11 +08:00 · 2017-10-06 22:17:51 +07:00
parent 5073ef6c1b
commit ae3d1c1819
7 changed files with 304 additions and 194 deletions
@@ -2,11 +2,12 @@ import React, {Component} from 'react';

 import {Button, List, Item} from 'coral-ui';
 import styles from './Configure.css';
-import StreamSettings from './StreamSettings';
+import StreamSettings from '../containers/StreamSettings';
 import ModerationSettings from './ModerationSettings';
 import TechSettings from './TechSettings';
 import t from 'coral-framework/services/i18n';
 import {can} from 'coral-framework/services/perms';
+import PropTypes from 'prop-types';

 export default class Configure extends Component {

@@ -23,9 +24,9 @@ export default class Configure extends Component {
    switch(section){
    case 'stream':
      sectionComponent = <StreamSettings
+        data={this.props.data}
+        root={this.props.root}
        settings={this.props.settings}
-        updateSettings={this.props.updateSettings}
-        errors={this.props.errors}
      />;
      break;
    case 'moderation':
@@ -105,3 +106,17 @@ export default class Configure extends Component {
    );
  }
 }
+
+Configure.propTypes = {
+  notify: PropTypes.func.isRequired,
+  updateWordlist: PropTypes.func.isRequired,
+  updateDomainlist: PropTypes.func.isRequired,
+  updateSettings: PropTypes.func.isRequired,
+  errors: PropTypes.object.isRequired,
+  savePending: PropTypes.func.isRequired,
+  auth: PropTypes.object.isRequired,
+  data: PropTypes.object.isRequired,
+  root: PropTypes.object.isRequired,
+  settings: PropTypes.object.isRequired,
+  canSave: PropTypes.bool.isRequired,
+};
@@ -1,4 +1,5 @@
 import React from 'react';
+import PropTypes from 'prop-types';
 import {Card} from 'coral-ui';
 import styles from './Configure.css';
 import TagsInput from 'coral-admin/src/components/TagsInput';
@@ -22,4 +23,9 @@ const Domainlist = ({domains, onChangeDomainlist}) => {
  );
 };

+Domainlist.propTypes = {
+  domains: PropTypes.array.isRequired,
+  onChangeDomainlist: PropTypes.func.isRequired,
+};
+
 export default Domainlist;
@@ -7,11 +7,7 @@ import {BASE_URL} from 'coral-framework/constants/url';

 class EmbedLink extends Component {

-  constructor (props) {
-    super(props);
-
-    this.state = {copied: false};
-  }
+  state = {copied: false};

  copyToClipBoard = () => {
    const copyTextarea = document.querySelector(`.${styles.embedInput}`);
@@ -4,6 +4,7 @@ import t from 'coral-framework/services/i18n';
 import styles from './Configure.css';
 import {Checkbox, Textfield} from 'react-mdl';
 import {Card, Icon, TextArea} from 'coral-ui';
+import PropTypes from 'prop-types';
 import MarkdownEditor from 'coral-framework/components/MarkdownEditor';

 const TIMESTAMPS = {
@@ -12,187 +13,6 @@ const TIMESTAMPS = {
  hours: 60 * 60
 };

-const updateCharCountEnable = (updateSettings, charCountChecked) => () => {
-  const charCountEnable = !charCountChecked;
-  updateSettings({charCountEnable});
-};
-
-const updateCharCount = (updateSettings) => (event) => {
-  let error = null;
-  const charCount = event.target.value;
-  if (charCount.match(/[^0-9]/) || charCount.length === 0) {
-    error = true;
-  }
-  updateSettings({charCount: charCount}, {setError: {'charCount': error}});
-};
-
-const updateInfoBoxEnable = (updateSettings, infoBox) => () => {
-  const infoBoxEnable = !infoBox;
-  updateSettings({infoBoxEnable});
-};
-
-const updateInfoBoxContent = (updateSettings) => (value) => {
-  const infoBoxContent = value;
-  updateSettings({infoBoxContent});
-};
-
-const updateAutoClose = (updateSettings, autoCloseStream) => () => {
-  updateSettings({autoCloseStream});
-};
-
-const updateClosedMessage = (updateSettings) => (event) => {
-  const closedMessage = event.target.value;
-  updateSettings({closedMessage});
-};
-
-// If we are changing the measure we need to recalculate using the old amount
-// Same thing if we are just changing the amount
-const updateClosedTimeout = (updateSettings, ts, isMeasure) => (event) => {
-  if (isMeasure) {
-    const amount = getTimeoutAmount(ts);
-    const closedTimeout = amount * TIMESTAMPS[event];
-    updateSettings({closedTimeout});
-  } else {
-    const val = event.target.value;
-    const measure = getTimeoutMeasure(ts);
-    const closedTimeout = val * TIMESTAMPS[measure];
-    updateSettings({closedTimeout});
-  }
-};
-
-const updateEditCommentWindowLength = (updateSettings) => (e) => {
-  const value = e.target.value;
-  const valueAsNumber = parseFloat(value);
-  const milliseconds = (!isNaN(valueAsNumber)) && (valueAsNumber * 1000);
-  updateSettings({editCommentWindowLength: milliseconds || value});
-};
-
-const StreamSettings = ({updateSettings, settings, errors}) => {
-
-  // just putting this here for shorthand below
-  const on = styles.enabledSetting;
-  const off = styles.disabledSetting;
-
-  return (
-    <div className={styles.Configure}>
-      <h3>{t('configure.stream_settings')}</h3>
-      <Card className={`${styles.configSetting} ${settings.charCountEnable ? on : off}`}>
-        <div className={styles.action}>
-          <Checkbox
-            onChange={updateCharCountEnable(updateSettings, settings.charCountEnable)}
-            checked={settings.charCountEnable} />
-        </div>
-        <div className={styles.content}>
-          <div className={styles.settingsHeader}>{t('configure.comment_count_header')}</div>
-          <p className={settings.charCountEnable ? '' : styles.disabledSettingText}>
-            <span>{t('configure.comment_count_text_pre')}</span>
-            <input type='text'
-              className={`${styles.inlineTextfield} ${styles.charCountTexfield} ${settings.charCountEnable && styles.charCountTexfieldEnabled}`}
-              htmlFor='charCount'
-              onChange={updateCharCount(updateSettings)}
-              value={settings.charCount}
-              disabled={settings.charCountEnable ? '' : 'disabled'}
-            />
-            <span>{t('configure.comment_count_text_post')}</span>
-            {
-              errors.charCount &&
-                <span className={styles.settingsError}>
-                  <br/>
-                  <Icon name="error_outline"/>
-                  {t('configure.comment_count_error')}
-                </span>
-            }
-          </p>
-        </div>
-      </Card>
-      <Card className={`${styles.configSetting} ${styles.configSettingInfoBox} ${settings.infoBoxEnable ? on : off}`}>
-        <div className={styles.action}>
-          <Checkbox
-            onChange={updateInfoBoxEnable(updateSettings, settings.infoBoxEnable)}
-            checked={settings.infoBoxEnable} />
-        </div>
-        <div className={styles.content}>
-          <div className={styles.settingsHeader}>
-            {t('configure.include_comment_stream')}
-          </div>
-          <p className={settings.infoBoxEnable ? '' : styles.disabledSettingText}>
-            {t('configure.include_comment_stream_desc')}
-          </p>
-          <div className={`${styles.configSettingInfoBox} ${settings.infoBoxEnable ? null : styles.hidden}`} >
-            <MarkdownEditor
-              className={styles.descriptionBox}
-              onChange={updateInfoBoxContent(updateSettings)}
-              value={settings.infoBoxContent}
-            />
-          </div>
-        </div>
-      </Card>
-      <Card className={`${styles.configSetting} ${styles.configSettingInfoBox}`}>
-        <div className={styles.wrapper}>
-          <div className={styles.settingsHeader}>{t('configure.closed_stream_settings')}</div>
-          <p>{t('configure.closed_comments_desc')}</p>
-          <div>
-            <TextArea className={styles.descriptionBox}
-              onChange={updateClosedMessage(updateSettings)}
-              value={settings.closedMessage}
-            />
-          </div>
-        </div>
-      </Card>
-      {/* Edit Comment Timeframe */}
-      <Card className={styles.configSetting}>
-        <div className={styles.settingsHeader}>{t('configure.edit_comment_timeframe_heading')}</div>
-        <p>
-          {t('configure.edit_comment_timeframe_text_pre')}
-          &nbsp;
-          <input
-            className={`${styles.inlineTextfield} ${styles.editCommentTimeframeTextfield}`}
-            type="number"
-            min="0"
-            onChange={updateEditCommentWindowLength(updateSettings)}
-            placeholder="30"
-            defaultValue={(settings.editCommentWindowLength / 1000) /* saved as ms, rendered as seconds */}
-            pattern='[0-9]+([\.][0-9]*)?'
-          />
-          &nbsp;
-          {t('configure.edit_comment_timeframe_text_post')}
-        </p>
-      </Card>
-      <Card className={`${styles.configSetting} ${styles.configSettingInfoBox}`}>
-        <div className={styles.action}>
-          <Checkbox
-            onChange={updateAutoClose(updateSettings, !settings.autoCloseStream)}
-            checked={settings.autoCloseStream} />
-        </div>
-        <div className={styles.content}>
-          <div className={styles.settingsHeader}>{t('configure.close_after')}</div>
-          <br />
-          <Textfield
-            type='number'
-            pattern='[0-9]+'
-            style={{width: 50}}
-            onChange={updateClosedTimeout(updateSettings, settings.closedTimeout)}
-            value={getTimeoutAmount(settings.closedTimeout)}
-            label={t('configure.closed_comments_label')} />
-          <div className={styles.configTimeoutSelect}>
-            <SelectField
-              label="comments closed time window"
-              value={getTimeoutMeasure(settings.closedTimeout)}
-              onChange={updateClosedTimeout(updateSettings, settings.closedTimeout, true)}>
-              <Option value={'hours'}>{t('configure.hours')}</Option>
-              <Option value={'days'}>{t('configure.days')}</Option>
-              <Option value={'weeks'}>{t('configure.weeks')}</Option>
-            </SelectField>
-          </div>
-        </div>
-      </Card>
-      {/* the above card should be the last one if at all possible because of z-index issues with the selects */}
-    </div>
-  );
-};
-
-export default StreamSettings;
-
 // To see if we are talking about weeks, days or hours
 // We talk the remainder of the division and see if it's 0
 const getTimeoutMeasure = (ts) => {
@@ -208,3 +28,206 @@ const getTimeoutMeasure = (ts) => {
 // Dividing the amount by it's measure (hours, days, weeks) we
 // obtain the amount of time
 const getTimeoutAmount = (ts) => ts / TIMESTAMPS[getTimeoutMeasure(ts)];
+
+class StreamSettings extends React.Component {
+
+  updateCharCountEnable = () => {
+    const updater = {charCountEnable: {$set: !this.props.settings.charCountEnable}};
+    this.props.updatePending({updater});
+  };
+
+  updateCharCount = (event) => {
+    let error = null;
+    const charCount = event.target.value;
+    if (charCount.match(/[^0-9]/) || charCount.length === 0) {
+      error = true;
+    }
+
+    const updater = {charCount: {$set: charCount}};
+    const errorUpdater = {charCount: {$set: error}};
+
+    this.props.updatePending({updater, errorUpdater});
+  };
+
+  updateInfoBoxEnable = () => {
+    const updater = {infoBoxEnable: {$set: !this.props.settings.infoBoxEnable}};
+    this.props.updatePending({updater});
+  };
+
+  updateInfoBoxContent = (value) => {
+    const updater = {infoBoxContent: {$set: value}};
+    this.props.updatePending({updater});
+  };
+
+  updateClosedMessage = (event) => {
+    const updater = {closedMessage: {$set: event.target.value}};
+    this.props.updatePending({updater});
+  };
+
+  updateEditCommentWindowLength = (e) => {
+    const value = e.target.value;
+    const valueAsNumber = parseFloat(value);
+    const milliseconds = (!isNaN(valueAsNumber)) && (valueAsNumber * 1000);
+
+    const updater = {editCommentWindowLength: {$set: milliseconds || value}};
+    this.props.updatePending({updater});
+  };
+
+  updateAutoClose = () => {
+    const updater = {autoCloseStream: {$set: !this.props.settings.autoCloseStream}};
+    this.props.updatePending({updater});
+  };
+
+  updateClosedTimeout = (event) => {
+    const val = event.target.value;
+    const measure = getTimeoutMeasure(this.props.settings.closedTimeout);
+
+    const updater = {closedTimeout: {$set: val * TIMESTAMPS[measure]}};
+    this.props.updatePending({updater});
+  };
+
+  // If we are changing the measure we need to recalculate using the old amount
+  // Same thing if we are just changing the amount
+  updateClosedTimeoutMeasure = (event) => {
+    const amount = getTimeoutAmount(this.props.settings.closedTimeout);
+
+    const updater = {closedTimeout: {$set: amount * TIMESTAMPS[event]}};
+    this.props.updatePending({updater});
+  };
+
+  render() {
+    const {settings, errors} = this.props;
+
+    // just putting this here for shorthand below
+    const on = styles.enabledSetting;
+    const off = styles.disabledSetting;
+
+    return (
+      <div className={styles.Configure}>
+        <h3>{t('configure.stream_settings')}</h3>
+        <Card className={`${styles.configSetting} ${settings.charCountEnable ? on : off}`}>
+          <div className={styles.action}>
+            <Checkbox
+              onChange={this.updateCharCountEnable}
+              checked={settings.charCountEnable} />
+          </div>
+          <div className={styles.content}>
+            <div className={styles.settingsHeader}>{t('configure.comment_count_header')}</div>
+            <p className={settings.charCountEnable ? '' : styles.disabledSettingText}>
+              <span>{t('configure.comment_count_text_pre')}</span>
+              <input type='text'
+                className={`${styles.inlineTextfield} ${styles.charCountTexfield} ${settings.charCountEnable && styles.charCountTexfieldEnabled}`}
+                htmlFor='charCount'
+                onChange={this.updateCharCount}
+                value={settings.charCount}
+                disabled={settings.charCountEnable ? '' : 'disabled'}
+              />
+              <span>{t('configure.comment_count_text_post')}</span>
+              {
+                errors.charCount &&
+                  <span className={styles.settingsError}>
+                    <br/>
+                    <Icon name="error_outline"/>
+                    {t('configure.comment_count_error')}
+                  </span>
+              }
+            </p>
+          </div>
+        </Card>
+        <Card className={`${styles.configSetting} ${styles.configSettingInfoBox} ${settings.infoBoxEnable ? on : off}`}>
+          <div className={styles.action}>
+            <Checkbox
+              onChange={this.updateInfoBoxEnable}
+              checked={settings.infoBoxEnable} />
+          </div>
+          <div className={styles.content}>
+            <div className={styles.settingsHeader}>
+              {t('configure.include_comment_stream')}
+            </div>
+            <p className={settings.infoBoxEnable ? '' : styles.disabledSettingText}>
+              {t('configure.include_comment_stream_desc')}
+            </p>
+            <div className={`${styles.configSettingInfoBox} ${settings.infoBoxEnable ? null : styles.hidden}`} >
+              <MarkdownEditor
+                className={styles.descriptionBox}
+                onChange={this.updateInfoBoxContent}
+                value={settings.infoBoxContent}
+              />
+            </div>
+          </div>
+        </Card>
+        <Card className={`${styles.configSetting} ${styles.configSettingInfoBox}`}>
+          <div className={styles.wrapper}>
+            <div className={styles.settingsHeader}>{t('configure.closed_stream_settings')}</div>
+            <p>{t('configure.closed_comments_desc')}</p>
+            <div>
+              <TextArea className={styles.descriptionBox}
+                onChange={this.updateClosedMessage}
+                value={settings.closedMessage}
+              />
+            </div>
+          </div>
+        </Card>
+        {/* Edit Comment Timeframe */}
+        <Card className={styles.configSetting}>
+          <div className={styles.settingsHeader}>{t('configure.edit_comment_timeframe_heading')}</div>
+          <p>
+            {t('configure.edit_comment_timeframe_text_pre')}
+            &nbsp;
+            <input
+              className={`${styles.inlineTextfield} ${styles.editCommentTimeframeTextfield}`}
+              type="number"
+              min="0"
+              onChange={this.updateEditCommentWindowLength}
+              placeholder="30"
+              defaultValue={(settings.editCommentWindowLength / 1000) /* saved as ms, rendered as seconds */}
+              pattern='[0-9]+([\.][0-9]*)?'
+            />
+            &nbsp;
+            {t('configure.edit_comment_timeframe_text_post')}
+          </p>
+        </Card>
+        <Card className={`${styles.configSetting} ${styles.configSettingInfoBox}`}>
+          <div className={styles.action}>
+            <Checkbox
+              onChange={this.updateAutoClose}
+              checked={settings.autoCloseStream} />
+          </div>
+          <div className={styles.content}>
+            <div className={styles.settingsHeader}>{t('configure.close_after')}</div>
+            <br />
+            <Textfield
+              type='number'
+              pattern='[0-9]+'
+              style={{width: 50}}
+              onChange={this.updateClosedTimeout}
+              value={getTimeoutAmount(settings.closedTimeout)}
+              label={t('configure.closed_comments_label')} />
+            <div className={styles.configTimeoutSelect}>
+              <SelectField
+                label="comments closed time window"
+                value={getTimeoutMeasure(settings.closedTimeout)}
+                onChange={this.updateClosedTimeoutMeasure}>
+                <Option value={'hours'}>{t('configure.hours')}</Option>
+                <Option value={'days'}>{t('configure.days')}</Option>
+                <Option value={'weeks'}>{t('configure.weeks')}</Option>
+              </SelectField>
+            </div>
+          </div>
+        </Card>
+        {/* the above card should be the last one if at all possible because of z-index issues with the selects */}
+      </div>
+    );
+  }
+}
+
+StreamSettings.propTypes = {
+  updatePending: PropTypes.func.isRequired,
+  errors: PropTypes.object.isRequired,
+  data: PropTypes.object.isRequired,
+  root: PropTypes.object.isRequired,
+  settings: PropTypes.object.isRequired,
+};
+
+export default StreamSettings;
+
@@ -2,6 +2,7 @@ import React from 'react';
 import t from 'coral-framework/services/i18n';
 import TagsInput from 'coral-admin/src/components/TagsInput';
 import styles from './Configure.css';
+import PropTypes from 'prop-types';
 import {Card} from 'coral-ui';

 const Wordlist = ({suspectWords, bannedWords, onChangeWordlist}) => (
@@ -30,4 +31,10 @@ const Wordlist = ({suspectWords, bannedWords, onChangeWordlist}) => (
  </div>
 );

+Wordlist.propTypes = {
+  suspectWords: PropTypes.array.isRequired,
+  bannedWords: PropTypes.array.isRequired,
+  onChangeWordlist: PropTypes.func.isRequired,
+};
+
 export default Wordlist;
@@ -5,9 +5,11 @@ import {compose, gql} from 'react-apollo';
 import withQuery from 'coral-framework/hocs/withQuery';
 import {Spinner} from 'coral-ui';
 import {notify} from 'coral-framework/actions/notification';
+import PropTypes from 'prop-types';
 import merge from 'lodash/merge';
 import {withUpdateSettings} from 'coral-framework/graphql/mutations';
-import {getErrorMessages} from 'coral-framework/utils';
+import {getErrorMessages, getDefinitionName} from 'coral-framework/utils';
+import StreamSettings from './StreamSettings';
 import {
  updatePending,
  clearPending,
@@ -110,13 +112,17 @@ const withConfigureQuery = withQuery(gql`
      domains {
        whitelist
      }
+      ...${getDefinitionName(StreamSettings.fragments.settings)}
    }
+    ...${getDefinitionName(StreamSettings.fragments.root)}
  }
+  ${StreamSettings.fragments.root}
+  ${StreamSettings.fragments.settings}
  `, {
-    options: () => ({
-      variables: {},
-    }),
-  });
+  options: () => ({
+    variables: {},
+  }),
+});

 const mapStateToProps = (state) => ({
  auth: state.auth,
@@ -138,3 +144,15 @@ export default compose(
  connect(mapStateToProps, mapDispatchToProps),
 )(ConfigureContainer);

+ConfigureContainer.propTypes = {
+  updatePending: PropTypes.func.isRequired,
+  updateSettings: PropTypes.func.isRequired,
+  clearPending: PropTypes.func.isRequired,
+  notify: PropTypes.func.isRequired,
+  auth: PropTypes.object.isRequired,
+  data: PropTypes.object.isRequired,
+  root: PropTypes.object.isRequired,
+  errors: PropTypes.object.isRequired,
+  canSave: PropTypes.bool.isRequired,
+  pending: PropTypes.object.isRequired,
+};
@@ -0,0 +1,45 @@
+import {connect} from 'react-redux';
+import {bindActionCreators} from 'redux';
+import {compose, gql} from 'react-apollo';
+import StreamSettings from '../components/StreamSettings';
+import withFragments from 'coral-framework/hocs/withFragments';
+import {getSlotFragmentSpreads} from 'coral-framework/utils';
+import {updatePending} from '../../../actions/configure';
+
+const slots = [
+  'adminStreamSettings',
+];
+
+const mapStateToProps = (state) => ({
+  errors: state.configure.errors,
+});
+
+const mapDispatchToProps = (dispatch) =>
+  bindActionCreators({
+    updatePending,
+  }, dispatch);
+
+export default compose(
+  withFragments({
+    root: gql`
+      fragment TalkAdmin_StreamSettings_root on RootQuery {
+        __typename
+        ${getSlotFragmentSpreads(slots, 'root')}
+      }
+    `,
+    settings: gql`
+      fragment TalkAdmin_StreamSettings_settings on Settings {
+        infoBoxEnable
+        charCount
+        charCountEnable
+        infoBoxContent
+        editCommentWindowLength
+        autoCloseStream
+        closedTimeout
+        closedMessage
+        ${getSlotFragmentSpreads(slots, 'settings')}
+      }
+    `
+  }),
+  connect(mapStateToProps, mapDispatchToProps),
+)(StreamSettings);