Split IgnoreUserWizard into own file

client/coral-embed-stream/src/IgnoreUserWizard.css

@@ -0,0 +1,14 @@
+.IgnoreUserWizard {
+  background-color: #2E343B;
+  color: white;
+  padding: 1em;
+  max-width: 220px;
+}
+
+.IgnoreUserWizard header {
+  font-weight: bold;
+}
+
+.IgnoreUserWizard .textAlignRight {
+  text-align: right;
+}

client/coral-embed-stream/src/IgnoreUserWizard.js

@@ -0,0 +1,66 @@
+import React, {PropTypes} from 'react';
+import styles from './IgnoreUserWizard.css';
+import {Button} from 'coral-ui';
+
+// Guides the user through ignoring another user, including confirming their decision
+export class IgnoreUserWizard extends React.Component {
+  static propTypes = {
+
+    // comment on which this menu appears
+    user: PropTypes.shape({
+      id: PropTypes.string.isRequired,
+      name: PropTypes.string.isRequired
+    }).isRequired,
+    cancel: PropTypes.func.isRequired,
+
+    // actually submit the ignore. Provide {id: user id to ignore}
+    ignoreUser: PropTypes.func.isRequired,
+  }
+  constructor(props) {
+    super(props);
+    this.state = {
+
+      // what step of the wizard is the user on
+      step: 1
+    };
+    this.onClickCancel = this.onClickCancel.bind(this);
+  }
+  onClickCancel() {
+    this.props.cancel();
+  }
+  render() {
+    const {user, ignoreUser} = this.props;
+    const goToStep = (stepNum) => this.setState({step: stepNum});
+    const step1 = (
+      <div>
+        <header>Ignore User</header>
+        <p>When you ignore a user, all comments they wrote on the site will be hidden from you. You can undo this later from the Profile tab.</p>
+        <div className={styles.textAlignRight}>
+          <Button cStyle='cancel' onClick={this.onClickCancel}>Cancel</Button>
+          <Button onClick={() => goToStep(2)}>Ignore user</Button>
+        </div>
+      </div>
+    );
+    const onClickIgnoreUser = async () => {
+      await ignoreUser({id: user.id});
+    };
+    const step2Confirmation = (
+      <div>
+        <header>Ignore User</header>
+        <p>Are you sure you want to ignore { user.name }?</p>
+        <div className={styles.textAlignRight}>
+          <Button cStyle='cancel' onClick={this.onClickCancel}>Cancel</Button>
+          <Button onClick={onClickIgnoreUser}>Ignore user</Button>
+        </div>
+      </div>
+    );
+    const elsForStep = [step1, step2Confirmation];
+    const {step} = this.state;
+    const elForThisStep = elsForStep[step - 1];
+    return (
+      <div className={styles.IgnoreUserWizard}>
+        { elForThisStep }
+      </div>
+    );
+  }
+}

client/coral-embed-stream/src/TopRightMenu.css

@@ -2,21 +2,6 @@
   outline: none;
 }
 
-.IgnoreUserWizard {
-  background-color: #2E343B;
-  color: white;
-  padding: 1em;
-  max-width: 220px;
-}
-
-.IgnoreUserWizard header {
-  font-weight: bold;
-}
-
-.IgnoreUserWizard .textAlignRight {
-  text-align: right;
-}
-
 /** 
  * Up/Down Chevrons for the top right menu
  */

client/coral-embed-stream/src/TopRightMenu.js

@@ -1,7 +1,7 @@
 import React, {PropTypes} from 'react';
 import classnames from 'classnames';
 
-import {Button} from 'coral-ui';
+import {IgnoreUserWizard} from './IgnoreUserWizard';
 import styles from './TopRightMenu.css';
 
 // TopRightMenu appears as a dropdown in the top right of the comment.
@@ -60,68 +60,6 @@ export class TopRightMenu extends React.Component {
   }
 }
 
-class IgnoreUserWizard extends React.Component {
-  static propTypes = {
-
-    // comment on which this menu appears
-    user: PropTypes.shape({
-      id: PropTypes.string.isRequired,
-      name: PropTypes.string.isRequired
-    }).isRequired,
-    cancel: PropTypes.func.isRequired,
-
-    // actually submit the ignore. Provide {id: user id to ignore}
-    ignoreUser: PropTypes.func.isRequired,
-  }
-  constructor(props) {
-    super(props);
-    this.state = {
-
-      // what step of the wizard is the user on
-      step: 1
-    };
-    this.onClickCancel = this.onClickCancel.bind(this);
-  }
-  onClickCancel() {
-    this.props.cancel();
-  }
-  render() {
-    const {user, ignoreUser} = this.props;
-    const goToStep = (stepNum) => this.setState({step: stepNum});
-    const step1 = (
-      <div>
-        <header>Ignore User</header>
-        <p>When you ignore a user, all comments they wrote on the site will be hidden from you. You can undo this later from the Profile tab.</p>
-        <div className={styles.textAlignRight}>
-          <Button cStyle='cancel' onClick={this.onClickCancel}>Cancel</Button>
-          <Button onClick={() => goToStep(2)}>Ignore user</Button>
-        </div>
-      </div>
-    );
-    const onClickIgnoreUser = async () => {
-      await ignoreUser({id: user.id});
-    };
-    const step2Confirmation = (
-      <div>
-        <header>Ignore User</header>
-        <p>Are you sure you want to ignore { user.name }?</p>
-        <div className={styles.textAlignRight}>
-          <Button cStyle='cancel' onClick={this.onClickCancel}>Cancel</Button>
-          <Button onClick={onClickIgnoreUser}>Ignore user</Button>
-        </div>
-      </div>
-    );
-    const elsForStep = [step1, step2Confirmation];
-    const {step} = this.state;
-    const elForThisStep = elsForStep[step - 1];
-    return (
-      <div className={styles.IgnoreUserWizard}>
-        { elForThisStep }
-      </div>
-    );
-  }
-}
-
 const upArrow = <span className={classnames(styles.chevron, styles.up)}></span>;
 const downArrow = <span className={classnames(styles.chevron, styles.down)}></span>;
 class Toggleable extends React.Component {