diff --git a/client/coral-embed-stream/src/IgnoreUserWizard.css b/client/coral-embed-stream/src/IgnoreUserWizard.css
new file mode 100644
index 000000000..838f2f76a
--- /dev/null
+++ b/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;
+}
diff --git a/client/coral-embed-stream/src/IgnoreUserWizard.js b/client/coral-embed-stream/src/IgnoreUserWizard.js
new file mode 100644
index 000000000..371e6d48b
--- /dev/null
+++ b/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 = (
+
+
+
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.
+
+
+
+
+
+ );
+ const onClickIgnoreUser = async () => {
+ await ignoreUser({id: user.id});
+ };
+ const step2Confirmation = (
+
+
+
Are you sure you want to ignore { user.name }?
+
+
+
+
+
+ );
+ const elsForStep = [step1, step2Confirmation];
+ const {step} = this.state;
+ const elForThisStep = elsForStep[step - 1];
+ return (
+
+ { elForThisStep }
+
+ );
+ }
+}
diff --git a/client/coral-embed-stream/src/TopRightMenu.css b/client/coral-embed-stream/src/TopRightMenu.css
index 587920c5f..5cddae125 100644
--- a/client/coral-embed-stream/src/TopRightMenu.css
+++ b/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
*/
diff --git a/client/coral-embed-stream/src/TopRightMenu.js b/client/coral-embed-stream/src/TopRightMenu.js
index 1e06997dd..e6b264c27 100644
--- a/client/coral-embed-stream/src/TopRightMenu.js
+++ b/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 = (
-
-
-
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.
-
-
-
-
-
- );
- const onClickIgnoreUser = async () => {
- await ignoreUser({id: user.id});
- };
- const step2Confirmation = (
-
-
-
Are you sure you want to ignore { user.name }?
-
-
-
-
-
- );
- const elsForStep = [step1, step2Confirmation];
- const {step} = this.state;
- const elForThisStep = elsForStep[step - 1];
- return (
-
- { elForThisStep }
-
- );
- }
-}
-
const upArrow = ;
const downArrow = ;
class Toggleable extends React.Component {