From 75ca7667d8359d2c44bb945aced303e606c81f6e Mon Sep 17 00:00:00 2001
From: Daniel Ternyak <dternyak@gmail.com>
Date: Sun, 17 Feb 2019 15:57:06 -0600
Subject: [PATCH] Refactor CopyInput out into it's own component

---
 .../ContributionModal/PaymentInfo.tsx         | 44 ++-----------------
 frontend/client/components/CopyInput.tsx      | 44 +++++++++++++++++++
 2 files changed, 47 insertions(+), 41 deletions(-)
 create mode 100644 frontend/client/components/CopyInput.tsx

diff --git a/frontend/client/components/ContributionModal/PaymentInfo.tsx b/frontend/client/components/ContributionModal/PaymentInfo.tsx
index 9d555c14..f7731951 100644
--- a/frontend/client/components/ContributionModal/PaymentInfo.tsx
+++ b/frontend/client/components/ContributionModal/PaymentInfo.tsx
@@ -1,13 +1,13 @@
 import React, { ReactNode } from 'react';
 import classnames from 'classnames';
-import { Form, Input, Button, Icon, Radio, message } from 'antd';
+import { Button, Form, Icon, Radio } from 'antd';
 import { RadioChangeEvent } from 'antd/lib/radio';
 import QRCode from 'qrcode.react';
-import CopyToClipboard from 'react-copy-to-clipboard';
-import { formatZcashURI, formatZcashCLI } from 'utils/formatters';
+import { formatZcashCLI, formatZcashURI } from 'utils/formatters';
 import { ContributionWithAddresses } from 'types';
 import Loader from 'components/Loader';
 import './PaymentInfo.less';
+import CopyInput from 'components/CopyInput';
 
 interface Props {
   contribution?: ContributionWithAddresses | Falsy;
@@ -110,41 +110,3 @@ export default class PaymentInfo extends React.Component<Props, State> {
     this.setState({ sendType: ev.target.value });
   };
 }
-
-interface CopyInputProps {
-  label: string;
-  value: string | undefined;
-  className?: string;
-  help?: string;
-  isTextarea?: boolean;
-}
-
-const CopyInput: React.SFC<CopyInputProps> = ({
-  label,
-  value,
-  help,
-  className,
-  isTextarea,
-}) => (
-  <Form.Item
-    className={classnames('CopyInput', className, isTextarea && 'is-textarea')}
-    label={label}
-    help={help}
-  >
-    {isTextarea ? (
-      <>
-        <Input.TextArea value={value} readOnly rows={3} />
-        <CopyToClipboard text={value || ''} onCopy={() => message.success('Copied!', 2)}>
-          <Button icon="copy" />
-        </CopyToClipboard>
-      </>
-    ) : (
-      <>
-        <Input value={value} readOnly />
-        <CopyToClipboard text={value || ''} onCopy={() => message.success('Copied!', 2)}>
-          <Button icon="copy" />
-        </CopyToClipboard>
-      </>
-    )}
-  </Form.Item>
-);
diff --git a/frontend/client/components/CopyInput.tsx b/frontend/client/components/CopyInput.tsx
new file mode 100644
index 00000000..50a1cd50
--- /dev/null
+++ b/frontend/client/components/CopyInput.tsx
@@ -0,0 +1,44 @@
+import React from 'react';
+import { Button, Form, Input, message } from 'antd';
+import classnames from 'classnames';
+import CopyToClipboard from 'react-copy-to-clipboard';
+
+interface CopyInputProps {
+  label: string;
+  value: string | undefined;
+  className?: string;
+  help?: string;
+  isTextarea?: boolean;
+}
+
+const CopyInput: React.SFC<CopyInputProps> = ({
+  label,
+  value,
+  help,
+  className,
+  isTextarea,
+}) => (
+  <Form.Item
+    className={classnames('CopyInput', className, isTextarea && 'is-textarea')}
+    label={label}
+    help={help}
+  >
+    {isTextarea ? (
+      <>
+        <Input.TextArea value={value} readOnly rows={3} />
+        <CopyToClipboard text={value || ''} onCopy={() => message.success('Copied!', 2)}>
+          <Button icon="copy" />
+        </CopyToClipboard>
+      </>
+    ) : (
+      <>
+        <Input value={value} readOnly />
+        <CopyToClipboard text={value || ''} onCopy={() => message.success('Copied!', 2)}>
+          <Button icon="copy" />
+        </CopyToClipboard>
+      </>
+    )}
+  </Form.Item>
+);
+
+export default CopyInput;