Refactor disable PNG (#701)

* pull disabled state into ExportMenu

* use useOnline hook from the tacklebox

components/Editor.js

@@ -260,10 +260,6 @@ class Editor extends React.Component {
   }
 
   updateBackground({ photographer, ...changes } = {}) {
-    if (this.isSafari) {
-      this.disablePNG = !verifyPayloadSize(changes.backgroundImage)
-    }
-
     if (photographer) {
       this.updateState(({ code = DEFAULT_CODE }) => ({
         ...changes,
@@ -334,7 +330,7 @@ class Editor extends React.Component {
               onChange={this.updateSetting}
               export={this.export}
               exportSize={exportSize}
-              disablePNG={this.disablePNG}
+              backgroundImage={backgroundImage}
             />
           </div>
         </Toolbar>
@@ -379,13 +375,6 @@ class Editor extends React.Component {
   }
 }
 
-const MAX_PAYLOAD_SIZE = 5e6 // bytes
-function verifyPayloadSize(str) {
-  if (typeof str !== 'string') return true
-
-  return new Blob([str]).size < MAX_PAYLOAD_SIZE
-}
-
 function isImage(file) {
   return file.type.split('/')[0] === 'image'
 }

components/ExportMenu.js

@@ -1,6 +1,6 @@
 import React from 'react'
 import { withRouter } from 'next/router'
-import { useCopyTextHandler } from '@dawnlabs/tacklebox'
+import { useCopyTextHandler, useOnline } from '@dawnlabs/tacklebox'
 
 import { COLORS, EXPORT_SIZES } from '../lib/constants'
 import Button from './Button'
@@ -15,6 +15,13 @@ const toIFrame = url =>
 </iframe>
 `
 
+const MAX_PAYLOAD_SIZE = 5e6 // bytes
+function verifyPayloadSize(str) {
+  if (typeof str !== 'string') return true
+
+  return new Blob([str]).size < MAX_PAYLOAD_SIZE
+}
+
 const CopyEmbed = withRouter(
   React.memo(
     ({ router: { asPath } }) => {
@@ -175,4 +182,20 @@ class ExportMenu extends React.PureComponent {
   }
 }
 
-export default managePopout(ExportMenu)
+export default managePopout(function({ backgroundImage, ...props }) {
+  const tooLarge = React.useMemo(() => !verifyPayloadSize(backgroundImage), [backgroundImage])
+  const online = useOnline()
+
+  const [isSafari, setSafari] = React.useState(false)
+  React.useEffect(() => {
+    setSafari(
+      window.navigator &&
+        window.navigator.userAgent.indexOf('Safari') !== -1 &&
+        window.navigator.userAgent.indexOf('Chrome') === -1
+    )
+  }, [])
+
+  const disablePNG = isSafari && (tooLarge || !online)
+
+  return <ExportMenu {...props} disablePNG={disablePNG} />
+})

components/TweetButton.js

@@ -1,36 +1,9 @@
 import React from 'react'
-import { useAsyncCallback } from '@dawnlabs/tacklebox'
+import { useAsyncCallback, useOnline as useOnlineListener } from '@dawnlabs/tacklebox'
 
 import ApiContext from './ApiContext'
 import Button from './Button'
 
-function useWindowListener(key, fn) {
-  const callbackRef = React.useRef(fn)
-
-  React.useEffect(() => {
-    const cb = callbackRef.current
-    window.addEventListener(key, cb)
-    return () => window.removeEventListener(key, cb)
-  }, [key])
-}
-
-function useOnlineListener() {
-  const [online, setOnline] = React.useState(true)
-
-  React.useEffect(() => {
-    setOnline(
-      typeof navigator !== 'undefined' && typeof navigator.onLine === 'boolean'
-        ? navigator.onLine
-        : true
-    )
-  }, [])
-
-  useWindowListener('offline', () => setOnline(false))
-  useWindowListener('online', () => setOnline(true))
-
-  return online
-}
-
 function TweetButton(props) {
   const api = React.useContext(ApiContext)
   const online = useOnlineListener()

package.json

@@ -19,7 +19,7 @@
     "now-build": "cross-env NODE_ENV=production yarn build && yarn export -o dist"
   },
   "dependencies": {
-    "@dawnlabs/tacklebox": "^0.0.5",
+    "@dawnlabs/tacklebox": "^0.0.6",
     "axios": "^0.18.0",
     "codemirror": "^5.42.2",
     "codemirror-graphql": "^0.8.3",

yarn.lock

@@ -775,10 +775,10 @@
     debug "^3.1.0"
     lodash.once "^4.1.1"
 
-"@dawnlabs/tacklebox@^0.0.5":
-  version "0.0.5"
-  resolved "https://registry.yarnpkg.com/@dawnlabs/tacklebox/-/tacklebox-0.0.5.tgz#e33b1983c576bb617c01d516b1f7419a6c5d299a"
-  integrity sha512-DFyQ7FbEVwzOkg/sNSey7J98s/XXBbT0U9AGrCVuQpbC8VrrLCzgKlbeexJfVFvTm5B1tFTmzne3vpAmBezY0A==
+"@dawnlabs/tacklebox@^0.0.6":
+  version "0.0.6"
+  resolved "https://registry.yarnpkg.com/@dawnlabs/tacklebox/-/tacklebox-0.0.6.tgz#3286922209113e36655f103bb8e738f75b66b5b3"
+  integrity sha512-tV7N/Qs2aBS2Z17L7g17/KukVcqe2UYS+zCF5KG7k2oZQdmy9wyCj4hHB8gtRHyzWd/1UpGFAs3TzXqx89z38w==
   dependencies:
     copy-to-clipboard "^3.0.8"
     react-click-outside "^3.0.1"