Inlining and unfolderizing ClickToCopy since styled-components makes it cleaner

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

@@ -1,6 +1,5 @@
-import React, { useState } from "react";
+import React, { useState, useRef } from "react";
 import styled from "styled-components";
-import useCopying from "./useCopying";
 
 const Container = styled.div`
   position: relative;
@@ -26,24 +25,42 @@ const ToolTip = styled.span`
   opacity: ${({ show }) => show ? 0.75 : 0};
 `
 
+const InvisbleTextarea = styled.textarea`
+  position: absolute;
+  top: -10000px;
+  z-index: -10000;
+  opacity: 0;
+`
+
 export default ({ text }) => {
-  const [textareaChild, copyText] = useCopying(text);
+  const textareaRef = useRef(null);
   const [hovered, setHovered] = useState(false);
   const [copied, setCopied] = useState(false);
 
+  const onClick = () => {
+    textareaRef.current.select();
+    document.execCommand("copy");
+    setCopied(true);
+  }
+
+  const onHover = () => {
+    setCopied(false);
+    setHovered(true);
+  }
+
+  const onUnhover = () => {
+    setHovered(false);
+  }
+
   return (
     <Container>
-      <UnderlinedSpan
-        onClick={() => {copyText(); setCopied(true)}}
-        onMouseOver={() => {setCopied(false); setHovered(true)}}
-        onMouseOut={() => setHovered(false)}
-      >
+      <UnderlinedSpan onClick={onClick} onMouseOver={onHover} onMouseOut={onUnhover}>
         {text}
       </UnderlinedSpan>
       <ToolTip show={hovered}>
         {copied ? "Copied!" : "Click to Copy"}
       </ToolTip>
-      {textareaChild}
+      <InvisbleTextarea ref={textareaRef} value={text} readOnly />
     </Container>
   )
 }

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

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

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

@@ -1,26 +0,0 @@
-import React, { useRef } from "react";
-import styled from "styled-components";
-
-const InvisbleTextarea = styled.textarea`
-  position: absolute;
-  top: -10000px;
-  z-index: -10000;
-  opacity: 0;
-`
-
-export default text => {
-  const textareaRef = useRef(null);
-  const copyText = () => {
-    textareaRef.current.select();
-    document.execCommand("copy");
-  };
-  const hiddenTextArea = (
-    <InvisbleTextarea
-      ref={textareaRef}
-      value={text}
-      readOnly
-    />)
-  ;
-
-  return [hiddenTextArea, copyText]
-}