From 2ec25cd0818d2d5d15f80776cd2839964e079065 Mon Sep 17 00:00:00 2001 From: Henrique Dias Date: Thu, 4 Aug 2022 11:23:03 +0200 Subject: [PATCH 1/9] feat: ux improvements to publish modal --- public/locales/en/app.json | 3 +- .../modals/publish-modal/PublishModal.js | 46 +++++++++++++++---- 2 files changed, 39 insertions(+), 10 deletions(-) diff --git a/public/locales/en/app.json b/public/locales/en/app.json index 25dec68db..2bc3d0351 100644 --- a/public/locales/en/app.json +++ b/public/locales/en/app.json @@ -30,7 +30,8 @@ "unselectAll": "Unselect all", "generate": "Generate", "publish": "Publish", - "downloadCar": "Download as CAR" + "downloadCar": "Download as CAR", + "done": "Done" }, "cliModal": { "description": "Paste the following into your terminal to do this task in IPFS via the command line. Remember that you'll need to replace placeholders with your specific parameters." diff --git a/src/files/modals/publish-modal/PublishModal.js b/src/files/modals/publish-modal/PublishModal.js index 5f13f1b90..415d66101 100644 --- a/src/files/modals/publish-modal/PublishModal.js +++ b/src/files/modals/publish-modal/PublishModal.js @@ -10,12 +10,16 @@ import Radio from '../../../components/radio/Radio' import ProgressBar from '../../../components/progress-bar/ProgressBar' import './PublishModal.css' +import GlyphCopy from '../../../icons/GlyphCopy' +import GlyphTick from '../../../icons/GlyphTick' + const PublishModal = ({ t, tReady, onLeave, onSubmit, file, ipnsKeys, publicGateway, className, doFetchIpnsKeys, doUpdateExpectedPublishTime, expectedPublishTime, ...props }) => { const [disabled, setDisabled] = useState(true) const [error, setError] = useState(null) const [selectedKey, setSelectedKey] = useState({ name: '', id: '' }) const [link, setLink] = useState('') const [start, setStart] = useState(null) + const [copied, setCopied] = useState(false) useEffect(() => { setDisabled(selectedKey.name === '' || start !== null) @@ -25,6 +29,12 @@ const PublishModal = ({ t, tReady, onLeave, onSubmit, file, ipnsKeys, publicGate doFetchIpnsKeys() }, [doFetchIpnsKeys]) + useEffect(() => { + if (copied) { + setTimeout(() => setCopied(false), 2000) + } + }, [copied]) + const changeKey = (key) => { setLink('') setError(null) @@ -49,19 +59,36 @@ const PublishModal = ({ t, tReady, onLeave, onSubmit, file, ipnsKeys, publicGate const modalBody = () => { if (link) { + console.log(link) return (
-
{t('publishModal.publishedUnderKey')}
- {selectedKey.name}
- {selectedKey.id} +
{t('publishModal.publishedUnderKey')} +
+ {selectedKey.name} +
+
+ {selectedKey.id} +

{t('publishModal.sharingPrompt')}

-
+
+ +
+ { copied + ? <> + Link copied + + + : setCopied(true)}> + + + } +
) @@ -96,7 +123,10 @@ const PublishModal = ({ t, tReady, onLeave, onSubmit, file, ipnsKeys, publicGate return ( -
{t('publishModal.cidToPublish')}
{file.cid.toString()}
+
+ {t('publishModal.cidToPublish')} +
{file.cid.toString()}
+
{modalBody()} @@ -104,9 +134,7 @@ const PublishModal = ({ t, tReady, onLeave, onSubmit, file, ipnsKeys, publicGate { link - ? - - + ? : } From a048c4bf3b4085cecd05411da51ca94a125558d9 Mon Sep 17 00:00:00 2001 From: Henrique Dias Date: Thu, 4 Aug 2022 11:26:04 +0200 Subject: [PATCH 2/9] refactor: update import order --- src/files/modals/publish-modal/PublishModal.js | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/files/modals/publish-modal/PublishModal.js b/src/files/modals/publish-modal/PublishModal.js index 415d66101..f55a4ec2e 100644 --- a/src/files/modals/publish-modal/PublishModal.js +++ b/src/files/modals/publish-modal/PublishModal.js @@ -8,10 +8,9 @@ import Icon from '../../../icons/StrokeSpeaker' import { connect } from 'redux-bundler-react' import Radio from '../../../components/radio/Radio' import ProgressBar from '../../../components/progress-bar/ProgressBar' -import './PublishModal.css' - import GlyphCopy from '../../../icons/GlyphCopy' import GlyphTick from '../../../icons/GlyphTick' +import './PublishModal.css' const PublishModal = ({ t, tReady, onLeave, onSubmit, file, ipnsKeys, publicGateway, className, doFetchIpnsKeys, doUpdateExpectedPublishTime, expectedPublishTime, ...props }) => { const [disabled, setDisabled] = useState(true) From ac5493d9a13fdde0fd4a82dc51e403aa562aa0a2 Mon Sep 17 00:00:00 2001 From: Henrique Dias Date: Thu, 4 Aug 2022 11:28:20 +0200 Subject: [PATCH 3/9] fix: return timeout clearance --- src/files/modals/publish-modal/PublishModal.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/files/modals/publish-modal/PublishModal.js b/src/files/modals/publish-modal/PublishModal.js index f55a4ec2e..8bf73819e 100644 --- a/src/files/modals/publish-modal/PublishModal.js +++ b/src/files/modals/publish-modal/PublishModal.js @@ -30,7 +30,8 @@ const PublishModal = ({ t, tReady, onLeave, onSubmit, file, ipnsKeys, publicGate useEffect(() => { if (copied) { - setTimeout(() => setCopied(false), 2000) + const timeoutId = setTimeout(() => setCopied(false), 2000) + return () => clearTimeout(timeoutId) } }, [copied]) From ea2e10f0c53fa453b85eddd372a96861d581a8dd Mon Sep 17 00:00:00 2001 From: Henrique Dias Date: Thu, 4 Aug 2022 11:28:36 +0200 Subject: [PATCH 4/9] fix: remove console.log --- src/files/modals/publish-modal/PublishModal.js | 1 - 1 file changed, 1 deletion(-) diff --git a/src/files/modals/publish-modal/PublishModal.js b/src/files/modals/publish-modal/PublishModal.js index 8bf73819e..3ca84f665 100644 --- a/src/files/modals/publish-modal/PublishModal.js +++ b/src/files/modals/publish-modal/PublishModal.js @@ -59,7 +59,6 @@ const PublishModal = ({ t, tReady, onLeave, onSubmit, file, ipnsKeys, publicGate const modalBody = () => { if (link) { - console.log(link) return (
{t('publishModal.publishedUnderKey')} From 121823ed5a813aae8f727043ced2e51d10974f1d Mon Sep 17 00:00:00 2001 From: Henrique Dias Date: Thu, 4 Aug 2022 11:37:59 +0200 Subject: [PATCH 5/9] fix: e2e test --- test/e2e/ipns.test.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/test/e2e/ipns.test.js b/test/e2e/ipns.test.js index be44938f5..309c717d8 100644 --- a/test/e2e/ipns.test.js +++ b/test/e2e/ipns.test.js @@ -113,7 +113,7 @@ test.describe('IPNS publishing', () => { await ipfs.swarm.connect(peeraddr) await page.click(publishButton) await page.waitForSelector('text=Successfully published') - await page.click('button:has-text("Copy")') + await page.click('button:has-text("Done")') // confirm IPNS record in local store points at the CID const { id } = (await ipfs.key.list()).filter(k => k.name === keyName)[0] for await (const name of ipfs.name.resolve(`/ipns/${id}`, { recursive: true })) { From 4b19a136d624eaa228627c4823500f262dcb74a2 Mon Sep 17 00:00:00 2001 From: Henrique Dias Date: Mon, 8 Aug 2022 11:24:02 +0200 Subject: [PATCH 6/9] fix: link copied text --- public/locales/en/files.json | 1 + src/files/modals/publish-modal/PublishModal.js | 2 +- 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/public/locales/en/files.json b/public/locales/en/files.json index e901aab56..3f7e4c19a 100644 --- a/public/locales/en/files.json +++ b/public/locales/en/files.json @@ -122,6 +122,7 @@ "publishUnderKey": "Select key for publishing:", "help": "Go to Settings to learn about IPNS and create more keys.", "publishedUnderKey": "Successfully published under the key:", + "linkCopied": "Link copied!", "sharingPrompt": "Copy the link below and share it with others. The IPNS address will resolve as long as your node remains available on the network once a day to refresh the IPNS record.", "pleaseWait": "Please wait while the initial 20 copies of the updated IPNS record are stored with the help of DHT peers…" } diff --git a/src/files/modals/publish-modal/PublishModal.js b/src/files/modals/publish-modal/PublishModal.js index 3ca84f665..eec7cc7d8 100644 --- a/src/files/modals/publish-modal/PublishModal.js +++ b/src/files/modals/publish-modal/PublishModal.js @@ -80,7 +80,7 @@ const PublishModal = ({ t, tReady, onLeave, onSubmit, file, ipnsKeys, publicGate
{ copied ? <> - Link copied + {t('publishModal.linkCopied')} : setCopied(true)}> From 5d07126c7c949e1bb15badfacab2dddb141fcdf8 Mon Sep 17 00:00:00 2001 From: Henrique Dias Date: Mon, 8 Aug 2022 11:34:00 +0200 Subject: [PATCH 7/9] fix: progress is not required --- src/components/progress-bar/ProgressBar.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/components/progress-bar/ProgressBar.js b/src/components/progress-bar/ProgressBar.js index 73de0302e..4af66158c 100644 --- a/src/components/progress-bar/ProgressBar.js +++ b/src/components/progress-bar/ProgressBar.js @@ -18,7 +18,8 @@ ProgressBar.propTypes = { width: PropTypes.string, height: PropTypes.string, br: PropTypes.string, - progress: PropTypes.number.isRequired + time: PropTypes.number, + progress: PropTypes.number } ProgressBar.defaultProps = { From 18e485fd5cf619c136509a676e166b63ffe9d295 Mon Sep 17 00:00:00 2001 From: Henrique Dias Date: Mon, 8 Aug 2022 11:34:32 +0200 Subject: [PATCH 8/9] styles: add padding and color --- src/files/modals/publish-modal/PublishModal.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/files/modals/publish-modal/PublishModal.js b/src/files/modals/publish-modal/PublishModal.js index eec7cc7d8..45abdd474 100644 --- a/src/files/modals/publish-modal/PublishModal.js +++ b/src/files/modals/publish-modal/PublishModal.js @@ -75,9 +75,10 @@ const PublishModal = ({ t, tReady, onLeave, onSubmit, file, ipnsKeys, publicGate value={link} readOnly className={'input-reset flex-grow-1 charcoal-muted ba b--black-20 br1 pa2 focus-outline'} + style={{ color: `rgba(128, 133, 145, ${copied ? 0.6 : 1})` }} type='text' /> -
+
{ copied ? <> {t('publishModal.linkCopied')} From 95408694a4128efad0693c38c3bdb3bf95d0d08e Mon Sep 17 00:00:00 2001 From: Henrique Dias Date: Mon, 8 Aug 2022 11:41:36 +0200 Subject: [PATCH 9/9] fix: done button action --- src/files/modals/publish-modal/PublishModal.js | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/src/files/modals/publish-modal/PublishModal.js b/src/files/modals/publish-modal/PublishModal.js index 45abdd474..a6d68c3e3 100644 --- a/src/files/modals/publish-modal/PublishModal.js +++ b/src/files/modals/publish-modal/PublishModal.js @@ -131,11 +131,12 @@ const PublishModal = ({ t, tReady, onLeave, onSubmit, file, ipnsKeys, publicGate - - { link - ? - : + ? + : <> + + + }