Refactor and reuse "Actions" in "Moderate" and "Community"

2026-08-18 12:30:39 +08:00 · 2017-06-22 21:50:19 +07:00
parent 259f98a4ec
commit 8bb38c5ee5
40 changed files with 430 additions and 554 deletions
@@ -0,0 +1,161 @@
+import React, {PropTypes} from 'react';
+import {Dialog} from 'coral-ui';
+import {RadioGroup, Radio} from 'react-mdl';
+import styles from './SuspendUserDialog.css';
+
+import Button from 'coral-ui/components/Button';
+
+import t, {timeago} from 'coral-framework/services/i18n';
+import {dateAdd} from 'coral-framework/utils';
+
+const initialState = {step: 0, duration: '3'};
+
+function durationsToDate(hours) {
+
+  // Add 1 minute more to help `timeago.js` to display the correct duration.
+  return dateAdd(new Date(), 'minute', hours * 60 + 1);
+}
+
+class SuspendUserDialog extends React.Component {
+
+  state = initialState;
+
+  componentWillReceiveProps(next) {
+    if (this.props.open && !next.open) {
+      this.setState(initialState);
+    }
+  }
+
+  handleDurationChange = (event) => {
+    this.setState({duration: event.target.value});
+  }
+
+  handleMessageChange = (event) => {
+    this.setState({message: event.target.value});
+  }
+
+  goToStep1 = () => {
+    this.setState({
+      step: 1,
+      message: t(
+        'suspenduser.email_message_suspend',
+        this.props.username,
+        this.props.organizationName,
+        timeago(durationsToDate(this.state.duration)),
+      ),
+    });
+  }
+
+  handlePerform = () => {
+
+    this.props.onPerform({
+      message: this.state.message,
+
+      // Add 1 minute more to help `timeago.js` to display the correct duration.
+      until: durationsToDate(this.state.duration),
+    });
+  };
+
+  renderStep0() {
+    const {onCancel, username} = this.props;
+    const {duration} = this.state;
+    return (
+      <section>
+        <h1 className={styles.header}>
+          {t('suspenduser.title_suspend')}
+        </h1>
+        <p className={styles.description}>
+         {t('suspenduser.description_suspend', username)}
+        </p>
+        <fieldset>
+          <legend className={styles.legend}>{t('suspenduser.select_duration')}</legend>
+          <RadioGroup
+            name='status filter'
+            value={duration}
+            childContainer='div'
+            onChange={this.handleDurationChange}
+            className={styles.radioGroup}
+          >
+            <Radio value='1'>{t('suspenduser.one_hour')}</Radio>
+            <Radio value='3'>{t('suspenduser.hours', 3)}</Radio>
+            <Radio value='24'>{t('suspenduser.hours', 24)}</Radio>
+            <Radio value='168'>{t('suspenduser.days', 7)}</Radio>
+          </RadioGroup>
+        </fieldset>
+        <div className={styles.buttons}>
+          <Button cStyle="white" className={styles.cancel} onClick={onCancel} raised>
+            {t('suspenduser.cancel')}
+          </Button>
+          <Button cStyle="black" className={styles.perform} onClick={this.goToStep1} raised>
+            {t('suspenduser.suspend_user')}
+          </Button>
+        </div>
+      </section>
+    );
+  }
+
+  renderStep1() {
+    const {onCancel, username} = this.props;
+    const {message} = this.state;
+    return (
+      <section>
+        <h1 className={styles.header}>
+          {t('suspenduser.title_notify')}
+        </h1>
+        <p className={styles.description}>
+         {t('suspenduser.description_notify', username)}
+        </p>
+        <fieldset>
+          <legend className={styles.legend}>{t('suspenduser.write_message')}</legend>
+          <textarea
+            rows={5}
+            className={styles.messageInput}
+            value={message}
+            onChange={this.handleMessageChange} />
+        </fieldset>
+        <div className={styles.buttons}>
+          <Button cStyle="white" className={styles.cancel} onClick={onCancel} raised>
+            {t('suspenduser.cancel')}
+          </Button>
+          <Button
+            cStyle="black"
+            className={styles.perform}
+            onClick={this.handlePerform}
+            disabled={this.state.message.length === 0}
+            raised
+          >
+            {t('suspenduser.send')}
+          </Button>
+        </div>
+      </section>
+    );
+  }
+
+  render() {
+    const {open, onCancel} = this.props;
+    const {step} = this.state;
+    return (
+      <Dialog
+        className={styles.dialog}
+        onCancel={onCancel}
+        open={open}
+      >
+        <div className={styles.close}>
+          <button aria-label="Close" onClick={onCancel} className={styles.closeButton}>×</button>
+        </div>
+        {step === 0 && this.renderStep0()}
+        {step === 1 && this.renderStep1()}
+      </Dialog>
+    );
+  }
+}
+
+SuspendUserDialog.propTypes = {
+  open: PropTypes.bool.isRequired,
+  onPerform: PropTypes.func.isRequired,
+  onCancel: PropTypes.func.isRequired,
+  organizationName: PropTypes.string,
+  username: PropTypes.string,
+};
+
+export default SuspendUserDialog;