Refs by ReactDOMNode

client/coral-admin/src/routes/Moderation/components/ButtonCopyToClipboard.js

@@ -0,0 +1,35 @@
+import React from 'react';
+import {Button} from 'coral-ui';
+import t from 'coral-framework/services/i18n';
+import {withCopyToClipboard} from 'coral-framework/hocs';
+
+class ButtonCopyToClipboard extends React.Component {
+
+  constructor() {
+    super();
+
+    this.state = {
+      emailCopied: false
+    };
+  }
+
+  showCopied() {
+    this.setState({
+      emailCopied: true
+    }, () => {
+      setTimeout(() => this.setState({
+        emailCopied: false
+      }), 3000);
+    });
+  }
+
+  render () {
+    return (
+      <Button {...this.props}>
+        {this.state.emailCopied ? t('common.copied') : t('common.copy')}
+      </Button>
+    );
+  }
+}
+
+export default withCopyToClipboard(ButtonCopyToClipboard);

client/coral-admin/src/routes/Moderation/components/Moderation.js

@@ -207,6 +207,7 @@ export default class Moderation extends Component {
           shortcutsNoteVisible={moderation.shortcutsNoteVisible}
           open={moderation.modalOpen}
           onClose={this.onClose}/>
+
         {moderation.userDetailId && (
           <UserDetail
             id={moderation.userDetailId}
@@ -218,6 +219,7 @@ export default class Moderation extends Component {
             acceptComment={props.acceptComment}
             rejectComment={props.rejectComment} />
         )}
+
         <StorySearch
           moderation={this.props.moderation}
           closeSearch={this.closeSearch}

client/coral-admin/src/routes/Moderation/components/UserDetail.js

@@ -2,20 +2,12 @@ import React, {PropTypes} from 'react';
 import Comment from './Comment';
 import styles from './UserDetail.css';
 import {Button, Drawer} from 'coral-ui';
-import t from 'coral-framework/services/i18n';
 import {Slot} from 'coral-framework/components';
-import {withCopyToClipboard} from 'coral-framework/hocs';
+import ButtonCopyToClipboard from './ButtonCopyToClipboard';
 import {actionsMap} from '../helpers/moderationQueueActionsMap';
 
 export default class UserDetail extends React.Component {
 
-  constructor() {
-    super();
-    this.state = {
-      emailCopied: false
-    };
-  }
-
   static propTypes = {
     id: PropTypes.string.isRequired,
     hideUserDetail: PropTypes.func.isRequired,
@@ -97,20 +89,13 @@ export default class UserDetail extends React.Component {
       rejectedPercent = 0;
     }
 
-    const CopyToClipboard = withCopyToClipboard({ text: profile })(
-      <button className={styles.copyButton}>
-        {this.state.emailCopied ? t('common.copied') : t('common.copy')}
-      </button>
-    );
-
-    console.log(CopyToClipboard)
-
     return (
       <Drawer handleClickOutside={hideUserDetail}>
         <h3>{user.username}</h3>
 
         <div>
           {profile && <input className={styles.profileEmail} readOnly type="text" ref={(ref) => this.profile = ref} value={profile} />}
+          <ButtonCopyToClipboard className={styles.copyButton} text={profile} />
         </div>
 
         <Slot