fix: blur QR code until root is published (#144)

ipfs-shipyard · Nov 22, 2024 · 6ae98c9 · 6ae98c9
1 parent f9b0f74
commit 6ae98c9
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 20 deletions.
diff --git a/public/locales/en/translation.json b/public/locales/en/translation.json
@@ -69,6 +69,7 @@
     "labelIndividual": "Share individual files",
     "labelAll": "Share all files",
     "footNote": "This link changes if you add more files, so be sure to share the latest version.",
+    "publishing": "Publishing...",
     "copy": "Share",
     "copied": "Copied!",
     "qrLabel": "Or scan to share all files"

diff --git a/src/components/file/file.tsx b/src/components/file/file.tsx
@@ -115,13 +115,20 @@ export const File = ({ file, isDownload }: { file: FileState, isDownload?: boole
     const copyBtnClass = classnames({
       'o-50 no-pointer-events': copied,
       'o-80 glow pointer': !copied,
-      'o-50 no-pointer-events bg-gray': disabled
+      'o-50 no-pointer-events bg-gray w4': disabled
     }, ['pa2 w3 flex items-center justify-center br-pill bg-aqua f7 fw5'])
 
+    let copyBtnTxt = t('copyLink.copy')
+    if (disabled) {
+      copyBtnTxt = t('copyLink.publishing')
+    } else if (copied) {
+      copyBtnTxt = t('copyLink.copied')
+    }
+
     return (
       <CopyToClipboard text={url} onCopy={handleOnCopyClick}>
         <div className={copyBtnClass}>
-          {copied ? t('copyLink.copied') : t('copyLink.copy')}
+          {copyBtnTxt}
         </div>
       </CopyToClipboard>
     )

diff --git a/src/components/share-all-files/share-all-files.tsx b/src/components/share-all-files/share-all-files.tsx
@@ -1,6 +1,6 @@
 import classnames from 'classnames'
 import { QRCodeSVG } from 'qrcode.react'
-import React, { useCallback, useEffect, useMemo, useState } from 'react'
+import React, { useCallback, useMemo, useState } from 'react'
 import CopyToClipboard from 'react-copy-to-clipboard'
 import { useTranslation } from 'react-i18next'
 import { useFiles } from '../../hooks/use-files.js'
@@ -29,12 +29,12 @@ export const ShareAllFiles = ({ withLabel }: { withLabel?: boolean }): React.Rea
   const shouldGenerateLink = useMemo(() => Object.keys(files).length > 0, [files])
   const allFilesArePublished = useMemo(() => Object.values(files).every((file) => file.published), [files])
 
-  useEffect(() => {})
+  const disabled = !allFilesArePublished || !rootPublished
 
   const copyBtnClass = classnames({
     'o-50 no-pointer-events': copied,
     'o-80 glow pointer': !copied,
-    'o-50 no-pointer-events bg-gray': !allFilesArePublished || !rootPublished
+    'o-50 no-pointer-events bg-gray navy w4': disabled
   }, ['pa2 w3 flex items-center justify-center br-pill bg-navy f7 white'])
 
   if (mfs == null || helia == null) {
@@ -49,6 +49,13 @@ export const ShareAllFiles = ({ withLabel }: { withLabel?: boolean }): React.Rea
     return 'Preparing link...'
   }
 
+  let copyBtnTxt = t('copyLink.copy')
+  if (disabled) {
+    copyBtnTxt = t('copyLink.publishing')
+  } else if (copied) {
+    copyBtnTxt = t('copyLink.copied')
+  }
+
   return (
     <div>
       { withLabel === true ? <div className='f5 montserrat fw4 charcoal mt4 mb1'>{t('copyLink.labelAll')}</div> : null }
@@ -61,27 +68,29 @@ export const ShareAllFiles = ({ withLabel }: { withLabel?: boolean }): React.Rea
         </div>
         <CopyToClipboard text={shareAllLink} onCopy={handleOnCopyClick}>
           <div className={copyBtnClass}>
-            { copied ? t('copyLink.copied') : t('copyLink.copy') }
+            { copyBtnTxt }
           </div>
         </CopyToClipboard>
       </div>
       <div className="overflow-hidden">
         <div className="flex flex-column items-center mb3 appear-from-below">
           <span className="f7 charcoal-muted lh-copy pb2">{t('copyLink.qrLabel')}</span>
-          <QRCodeSVG
-            value={shareAllLink}
-            bgColor={'#ffffff'}
-            fgColor={'#022E44'}
-            level={'M'}
-            imageSettings={{
-              src: 'favicon-32x32.png',
-              x: 50,
-              y: 50,
-              height: 32,
-              width: 32,
-              excavate: true
-            }}
-          />
+          <span style={ disabled ? { filter: 'blur(2px)' } : {} }>
+            <QRCodeSVG
+              value={shareAllLink}
+              bgColor={'#ffffff'}
+              fgColor={'#022E44'}
+              level={'M'}
+              imageSettings={{
+                src: 'favicon-32x32.png',
+                x: 50,
+                y: 50,
+                height: 32,
+                width: 32,
+                excavate: true
+              }}
+            />
+          </span>
         </div>
       </div>
     </div>