replace copy button with tacklebox's

.eslintrc.js

@@ -14,7 +14,7 @@ module.exports = {
     },
     sourceType: 'module'
   },
-  plugins: ['react', 'import', 'jsx-a11y'],
+  plugins: ['react', 'import', 'jsx-a11y', 'react-hooks'],
   rules: {
     'react/prop-types': 'off',
     'react/display-name': 'off',
@@ -22,7 +22,8 @@ module.exports = {
     'react/jsx-uses-vars': 'error',
     'import/no-unresolved': 'error',
     'no-duplicate-imports': 'error',
-    'jsx-a11y/click-events-have-key-events': 'off'
+    'jsx-a11y/click-events-have-key-events': 'off',
+    'react-hooks/rules-of-hooks': 'error'
   },
   settings: {
     react: {

components/CopyButton.js

@@ -1,36 +0,0 @@
-// TODO publish rucksack and import from there
-
-import React from 'react'
-import CopyToClipboard from 'react-copy-to-clipboard'
-
-class CopyButton extends React.Component {
-  constructor(props) {
-    super(props)
-
-    this.state = {
-      copied: false
-    }
-    this.onCopy = this.onCopy.bind(this)
-  }
-
-  onCopy() {
-    this.setState({ copied: true })
-    const component = this
-    setTimeout(
-      () => component.setState({ copied: false }),
-      this.props.interval == null ? 1000 : this.props.interval
-    )
-  }
-
-  render() {
-    return (
-      <CopyToClipboard text={this.props.text} onCopy={this.onCopy}>
-        {this.props.children({
-          copied: this.state.copied
-        })}
-      </CopyToClipboard>
-    )
-  }
-}
-
-export default CopyButton

components/ExportMenu.js

@@ -1,10 +1,10 @@
 import React from 'react'
 import { withRouter } from 'next/router'
+import { useCopyTextHandler } from '@dawnlabs/tacklebox'
 
 import { COLORS, EXPORT_SIZES } from '../lib/constants'
 import Button from './Button'
 import Input from './Input'
-import CopyButton from './CopyButton'
 import Popout, { managePopout } from './Popout'
 
 const toIFrame = url =>
@@ -17,15 +17,15 @@ const toIFrame = url =>
 
 const CopyEmbed = withRouter(
   React.memo(
-    ({ router: { asPath } }) => (
-      <CopyButton text={toIFrame(asPath)}>
-        {({ copied }) => (
-          <Button center color={COLORS.PURPLE} padding="12px 16px" flex="1 0 68px">
-            {copied ? 'Copied!' : 'Copy Embed'}
-          </Button>
-        )}
-      </CopyButton>
-    ),
+    ({ router: { asPath } }) => {
+      const { onClick, copied } = useCopyTextHandler(toIFrame(asPath))
+
+      return (
+        <Button onClick={onClick} center color={COLORS.PURPLE} padding="12px 16px" flex="1 0 68px">
+          {copied ? 'Copied!' : 'Copy Embed'}
+        </Button>
+      )
+    },
     (prevProps, nextProps) => prevProps.router.asPath === nextProps.router.asPath
   )
 )

components/WindowControls.js

@@ -1,6 +1,6 @@
 import React from 'react'
+import { useCopyTextHandler } from '@dawnlabs/tacklebox'
 
-import CopyButton from './CopyButton'
 import { COLORS } from '../lib/constants'
 import { Controls, ControlsBW } from './svg/Controls'
 import CopySVG from './svg/Copy'
@@ -8,9 +8,11 @@ import CheckMark from './svg/Checkmark'
 
 const size = 24
 
-function renderCopyButton({ copied }) {
+const CopyButton = React.memo(function CopyButton({ text }) {
+  const { onClick, copied } = useCopyTextHandler(text)
+
   return (
-    <button aria-label="Copy Button">
+    <button onClick={onClick} aria-label="Copy Button">
       {copied ? (
         <CheckMark color={COLORS.GRAY} width={size} height={size} />
       ) : (
@@ -32,7 +34,7 @@ function renderCopyButton({ copied }) {
       </style>
     </button>
   )
-}
+})
 
 export default ({ titleBar, theme, handleTitleBarChange, copyable, code }) => (
   <div className="window-controls">
@@ -48,7 +50,7 @@ export default ({ titleBar, theme, handleTitleBarChange, copyable, code }) => (
     </div>
     {copyable && (
       <div className="copy-button">
-        <CopyButton text={code}>{renderCopyButton}</CopyButton>
+        <CopyButton text={code} />
       </div>
     )}
     <style jsx>

package.json

@@ -19,6 +19,7 @@
     "now-build": "cross-env NODE_ENV=production yarn build && yarn export -o dist"
   },
   "dependencies": {
+    "@dawnlabs/tacklebox": "^0.0.2",
     "axios": "^0.18.0",
     "codemirror": "^5.42.2",
     "codemirror-graphql": "^0.8.3",
@@ -58,6 +59,7 @@
     "eslint-plugin-import": "^2.16.0",
     "eslint-plugin-jsx-a11y": "^6.2.1",
     "eslint-plugin-react": "^7.12.3",
+    "eslint-plugin-react-hooks": "^1.0.1",
     "husky": "^1.3.1",
     "lint-staged": "^8.1.3",
     "now": "^13.1.3",

yarn.lock

@@ -733,6 +733,15 @@
     debug "^3.1.0"
     lodash.once "^4.1.1"
 
+"@dawnlabs/tacklebox@^0.0.2":
+  version "0.0.2"
+  resolved "https://registry.yarnpkg.com/@dawnlabs/tacklebox/-/tacklebox-0.0.2.tgz#be9afc9fdd0a0dae04ea56c83b04e874bf2ae43a"
+  integrity sha512-TCcIQyQlPTQ4LcremkwvFIdVvqSo9Xz4Ayj8tVdsIHrZxp7VZSSgYKfi3K56w2TLdWu3pINUMmV46u1O1ryZpQ==
+  dependencies:
+    copy-to-clipboard "^3.0.8"
+    react-click-outside "^3.0.1"
+    react-fast-compare "^2.0.2"
+
 "@iamstarkov/listr-update-renderer@0.4.1":
   version "0.4.1"
   resolved "https://registry.yarnpkg.com/@iamstarkov/listr-update-renderer/-/listr-update-renderer-0.4.1.tgz#d7c48092a2dcf90fd672b6c8b458649cb350c77e"
@@ -2232,7 +2241,7 @@ copy-descriptor@^0.1.0:
   resolved "https://registry.yarnpkg.com/copy-descriptor/-/copy-descriptor-0.1.1.tgz#676f6eb3c39997c2ee1ac3a924fd6124748f578d"
   integrity sha1-Z29us8OZl8LuGsOpJP1hJHSPV40=
 
-copy-to-clipboard@^3:
+copy-to-clipboard@^3, copy-to-clipboard@^3.0.8:
   version "3.0.8"
   resolved "https://registry.yarnpkg.com/copy-to-clipboard/-/copy-to-clipboard-3.0.8.tgz#f4e82f4a8830dce4666b7eb8ded0c9bcc313aba9"
   integrity sha512-c3GdeY8qxCHGezVb1EFQfHYK/8NZRemgcTIzPq7PuxjHAf/raKibn2QdhHPb/y6q74PMgH6yizaDZlRmw6QyKw==
@@ -2828,6 +2837,11 @@ eslint-plugin-jsx-a11y@^6.2.1:
     has "^1.0.3"
     jsx-ast-utils "^2.0.1"
 
+eslint-plugin-react-hooks@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-1.0.1.tgz#76b6fb4edafab02eab0090078977687157605dd9"
+  integrity sha512-yNhvY7EFBp0mq0Bt8BHoS57GwJ4e1qSYdvDFSfPnjmiSmyGUfQFQGcQs4K0JQFDGopWkURWq58psbUJIhWZ2Kg==
+
 eslint-plugin-react@^7.12.3:
   version "7.12.4"
   resolved "https://registry.yarnpkg.com/eslint-plugin-react/-/eslint-plugin-react-7.12.4.tgz#b1ecf26479d61aee650da612e425c53a99f48c8c"
@@ -5761,7 +5775,7 @@ rc@^1.2.7:
     minimist "^1.2.0"
     strip-json-comments "~2.0.1"
 
-react-click-outside@^3.0.0:
+react-click-outside@^3.0.0, react-click-outside@^3.0.1:
   version "3.0.1"
   resolved "https://registry.yarnpkg.com/react-click-outside/-/react-click-outside-3.0.1.tgz#6e77e84d2f17afaaac26dbad743cbbf909f5e24c"
   integrity sha512-d0KWFvBt+esoZUF15rL2UBB7jkeAqLU8L/Ny35oLK6fW6mIbOv/ChD+ExF4sR9PD26kVx+9hNfD0FTIqRZEyRQ==
@@ -5816,6 +5830,11 @@ react-error-overlay@4.0.0:
   resolved "https://registry.yarnpkg.com/react-error-overlay/-/react-error-overlay-4.0.0.tgz#d198408a85b4070937a98667f500c832f86bd5d4"
   integrity sha512-FlsPxavEyMuR6TjVbSSywovXSEyOg6ZDj5+Z8nbsRl9EkOzAhEIcS+GLoQDC5fz/t9suhUXWmUrOBrgeUvrMxw==
 
+react-fast-compare@^2.0.2:
+  version "2.0.4"
+  resolved "https://registry.yarnpkg.com/react-fast-compare/-/react-fast-compare-2.0.4.tgz#e84b4d455b0fec113e0402c329352715196f81f9"
+  integrity sha512-suNP+J1VU1MWFKcyt7RtjiSWUjvidmQSlqu+eHslq+342xCbGTYmC0mEhPCOHxlW0CywylOC1u2DFAT+bv4dBw==
+
 react-image-crop@6.0.0:
   version "6.0.0"
   resolved "https://registry.yarnpkg.com/react-image-crop/-/react-image-crop-6.0.0.tgz#e5875c2a784e490c66bfb21b17c0c21f3823efcf"