From 7faa00c46387bce0052a01a3bce5e00d0f742d13 Mon Sep 17 00:00:00 2001
From: Belen Curcio <curciobelen@gmail.com>
Date: Tue, 20 Jun 2017 09:05:01 -0300
Subject: [PATCH] withCopyToClipboard

---
 .../Moderation/components/UserDetail.js       | 17 ++++----
 client/coral-framework/components/Copy.js     | 39 -------------------
 client/coral-framework/components/index.js    |  1 -
 client/coral-framework/hocs/index.js          |  2 +-
 .../hocs/withCopyToClipboard.js               | 33 ++++++++++++++++
 5 files changed, 44 insertions(+), 48 deletions(-)
 delete mode 100644 client/coral-framework/components/Copy.js
 create mode 100644 client/coral-framework/hocs/withCopyToClipboard.js

diff --git a/client/coral-admin/src/routes/Moderation/components/UserDetail.js b/client/coral-admin/src/routes/Moderation/components/UserDetail.js
index bf8b80267..116e043ca 100644
--- a/client/coral-admin/src/routes/Moderation/components/UserDetail.js
+++ b/client/coral-admin/src/routes/Moderation/components/UserDetail.js
@@ -3,7 +3,8 @@ import Comment from './Comment';
 import styles from './UserDetail.css';
 import {Button, Drawer} from 'coral-ui';
 import t from 'coral-framework/services/i18n';
-import {Slot, Copy} from 'coral-framework/components';
+import {Slot} from 'coral-framework/components';
+import {withCopyToClipboard} from 'coral-framework/hocs';
 import {actionsMap} from '../helpers/moderationQueueActionsMap';
 
 export default class UserDetail extends React.Component {
@@ -96,18 +97,20 @@ 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} />}
-
-          <Copy onCopy={() => this.showCopied()} text={profile}>
-            <Button className={styles.copyButton}>
-              {this.state.emailCopied ? t('common.copied') : t('common.copy')}
-            </Button>
-          </Copy>
         </div>
 
         <Slot
diff --git a/client/coral-framework/components/Copy.js b/client/coral-framework/components/Copy.js
deleted file mode 100644
index 2c0a0b6ea..000000000
--- a/client/coral-framework/components/Copy.js
+++ /dev/null
@@ -1,39 +0,0 @@
-import React, {Component} from 'react';
-import Clipboard from 'clipboard';
-
-export default class Copy extends Component {
-
-  constructor(props) {
-    super(props);
-    this.refCopyButton = this.refCopyButton.bind(this);
-  }
-
-  componentDidMount() {
-    const clipboard = new Clipboard(this.copyButtonEl);
-
-    clipboard.on('success', (e) => {
-      this.props.onCopy();
-      e.clearSelection();
-    });
-  }
-
-  refCopyButton(button) {
-    this.copyButtonEl = button;
-  }
-
-  render() {
-    const {children, target = '', text = '', className = ''} = this.props;
-
-    return (
-     <span
-       className={className}
-       ref={this.refCopyButton}
-       data-clipboard-action="copy"
-       data-clipboard-text={text}
-       data-clipboard-target={target}
-     >
-     {children}
-     </span>
-    );
-  }
-}
diff --git a/client/coral-framework/components/index.js b/client/coral-framework/components/index.js
index 6c9a3f876..b7aaef665 100644
--- a/client/coral-framework/components/index.js
+++ b/client/coral-framework/components/index.js
@@ -1,2 +1 @@
 export {default as Slot} from './Slot';
-export {default as Copy} from './Copy';
diff --git a/client/coral-framework/hocs/index.js b/client/coral-framework/hocs/index.js
index 01b3daff4..782f840bd 100644
--- a/client/coral-framework/hocs/index.js
+++ b/client/coral-framework/hocs/index.js
@@ -1,4 +1,4 @@
 export {default as withFragments} from './withFragments';
 export {default as withMutation} from './withMutation';
 export {default as withQuery} from './withQuery';
-
+export {default as withCopyToClipboard} from './withCopyToClipboard';
diff --git a/client/coral-framework/hocs/withCopyToClipboard.js b/client/coral-framework/hocs/withCopyToClipboard.js
new file mode 100644
index 000000000..2ca9e1b13
--- /dev/null
+++ b/client/coral-framework/hocs/withCopyToClipboard.js
@@ -0,0 +1,33 @@
+import React from 'react';
+import Clipboard from 'clipboard';
+
+export default (config) => (WrappedComponent) => {
+  console.log(config, WrappedComponent)
+
+  class withCopyToClipboard extends React.Component {
+
+    componentDidMount() {
+      const node = ReactDOM.findDOMNode(WrappedComponent);
+      const clipboard = new Clipboard(node);
+
+      clipboard.on('success', (e) => {
+        this.props.onCopy();
+        e.clearSelection();
+      });
+    }
+
+    render() {
+      const {target = '', text = ''} = config;
+
+      return <WrappedComponent
+        className={className}
+        data-clipboard-action="copy"
+        data-clipboard-text={text}
+        data-clipboard-target={target}
+        {...this.props}
+      />;
+    }
+  }
+
+  return withCopyToClipboard;
+};