Changing ClickToCopy into a folder module to break it up a little more nicely

client/src/App.css

@@ -58,7 +58,9 @@
 
 .click-to-copy__textarea {
   position: absolute;
-  top: -1000px;
+  top: -10000px;
+  z-index: -10000;
+  opacity: 0;
 }
 
 .btn {

client/src/components/util/ClickToCopy.jsx

@@ -1,39 +0,0 @@
-import React, { useRef, useState } from "react";
-
-const tooltipClass = "click-to-copy__tooltip";
-const tooltipVisClass = `${tooltipClass}--visible`;
-
-export default ({ text }) => {
-  const textareaRef = useRef(null);
-  const [hovered, setHovered] = useState(false);
-  const [copied, setCopied] = useState(false);
-  const copyText = () => {
-    textareaRef.current.select();
-    document.execCommand("copy");
-    setCopied(true);
-  };
-
-  const hoveredClass = hovered ? tooltipVisClass : "";
-
-  return (
-    <div className="click-to-copy">
-      <span
-        className="click-to-copy__text"
-        onClick={copyText}
-        onMouseOver={() => {setCopied(false); setHovered(true)}}
-        onMouseOut={() => setHovered(false)}
-      >
-        {text}
-      </span>
-      <span className={`${tooltipClass} ${hoveredClass}`}>
-        {copied ? "Copied!" : "Click to Copy"}
-      </span>
-      <textarea
-        ref={textareaRef}
-        className="click-to-copy__textarea"
-        value={text}
-        readOnly
-      />
-    </div>
-  )
-}

client/src/components/util/ClickToCopy/ClickToCopy.jsx

@@ -0,0 +1,24 @@
+import React, { useState } from "react";
+import useCopying from "./useCopying";
+import CopyingTooltip from "./CopyingTooltip";
+
+export default ({ text }) => {
+  const [textareaChild, copyText] = useCopying(text);
+  const [hovered, setHovered] = useState(false);
+  const [copied, setCopied] = useState(false);
+
+  return (
+    <div className="click-to-copy">
+      <span
+        className="click-to-copy__text"
+        onClick={() => {copyText(); setCopied(true)}}
+        onMouseOver={() => {setCopied(false); setHovered(true)}}
+        onMouseOut={() => setHovered(false)}
+      >
+        {text}
+      </span>
+      <CopyingTooltip hovered={hovered} copied={copied}/>
+      {textareaChild}
+    </div>
+  )
+}

client/src/components/util/ClickToCopy/CopyingTooltip.jsx

@@ -0,0 +1,10 @@
+import React from "react";
+
+const tooltipClass = "click-to-copy__tooltip";
+const tooltipVisClass = `${tooltipClass}--visible`;
+
+export default ({ copied, hovered }) => (
+  <span className={`${tooltipClass} ${hovered ? tooltipVisClass : ""}`}>
+    {copied ? "Copied!" : "Click to Copy"}
+  </span>
+);

client/src/components/util/ClickToCopy/index.jsx

@@ -0,0 +1 @@
+export { default } from './ClickToCopy';

client/src/components/util/ClickToCopy/useCopying.jsx

@@ -0,0 +1,19 @@
+import React, { useRef } from "react";
+
+export default text => {
+  const textareaRef = useRef(null);
+  const copyText = () => {
+    textareaRef.current.select();
+    document.execCommand("copy");
+  };
+  const hiddenTextArea = (
+    <textarea
+      ref={textareaRef}
+      className="click-to-copy__textarea"
+      value={text}
+      readOnly
+    />)
+  ;
+
+  return [hiddenTextArea, copyText]
+}