From fb8b54af3cca4d6c8ae4b7a57e1d961713b6835c Mon Sep 17 00:00:00 2001 From: Pierre Bertet Date: Wed, 14 Nov 2018 20:17:22 +0000 Subject: [PATCH] Voting: Fix the question and the description (card + panel) (#573) - The card now only displays the question. - The title attribute has been removed since it has the same content than the children. - Ethereum addresses are shortened on both the question and the description. - The question and description render line breaks + transforms URLs into links. --- apps/voting/app/package.json | 1 + apps/voting/app/src/App.js | 35 ++++++- apps/voting/app/src/components/AutoLink.js | 11 +++ .../app/src/components/VotePanelContent.js | 18 +--- .../src/components/VotingCard/VotingCard.js | 11 +-- apps/voting/app/src/screens/Votes.js | 92 ++++++++----------- 6 files changed, 96 insertions(+), 72 deletions(-) create mode 100644 apps/voting/app/src/components/AutoLink.js diff --git a/apps/voting/app/package.json b/apps/voting/app/package.json index cd755d9c3f..4f862418a0 100644 --- a/apps/voting/app/package.json +++ b/apps/voting/app/package.json @@ -13,6 +13,7 @@ "react": "^16.5.2", "react-blockies": "^1.2.2", "react-dom": "^16.2.0", + "react-linkify": "^0.2.2", "react-spring": "^5.7.2", "seed-random": "^2.2.0", "styled-components": "3.4.6" diff --git a/apps/voting/app/src/App.js b/apps/voting/app/src/App.js index 0340ff4191..ddccb90465 100644 --- a/apps/voting/app/src/App.js +++ b/apps/voting/app/src/App.js @@ -14,13 +14,15 @@ import Votes from './screens/Votes' import tokenAbi from './abi/token-balanceOfAt.json' import VotePanelContent from './components/VotePanelContent' import NewVotePanelContent from './components/NewVotePanelContent' +import AutoLink from './components/AutoLink' import { networkContextType } from './utils/provideNetwork' import { settingsContextType } from './utils/provideSettings' import { hasLoadedVoteSettings } from './vote-settings' import { VOTE_YEA } from './vote-types' -import { makeEtherscanBaseUrl } from './utils' import { EMPTY_CALLSCRIPT } from './evmscript-utils' +import { makeEtherscanBaseUrl } from './utils' import { isVoteOpen, voteTypeFromContractEnum } from './vote-utils' +import { shortenAddress, transformAddresses } from './web3-utils' class App extends React.Component { static propTypes = { @@ -142,6 +144,33 @@ class App extends React.Component { handleVoteTransitionEnd = opened => { this.setState(opened ? { voteSidebarOpened: true } : { currentVoteId: -1 }) } + + shortenAddresses(label) { + return transformAddresses(label, (part, isAddress, index) => + isAddress ? ( + + {shortenAddress(part)} + + ) : ( + {part} + ) + ) + } + // Shorten addresses, render line breaks, auto link + renderVoteText(description) { + return ( + description && ( + + {description.split('\n').map((line, i) => ( + + {this.shortenAddresses(line)} +
+ + ))} + + ) + ) + } render() { const { app, @@ -170,6 +199,10 @@ class App extends React.Component { data: { ...vote.data, open: isVoteOpen(vote, now), + + // Render text fields + descriptionNode: this.renderVoteText(vote.data.description), + metadataNode: this.renderVoteText(vote.data.metadata), }, userAccountVote: voteTypeFromContractEnum( userAccountVotes.get(vote.voteId) diff --git a/apps/voting/app/src/components/AutoLink.js b/apps/voting/app/src/components/AutoLink.js new file mode 100644 index 0000000000..249ca06305 --- /dev/null +++ b/apps/voting/app/src/components/AutoLink.js @@ -0,0 +1,11 @@ +import React from 'react' +import Linkify from 'react-linkify' +import { SafeLink } from '@aragon/ui' + +const AutoLink = ({ children }) => ( + + {children} + +) + +export default AutoLink diff --git a/apps/voting/app/src/components/VotePanelContent.js b/apps/voting/app/src/components/VotePanelContent.js index db7e5ca2ef..2e1e442ac7 100644 --- a/apps/voting/app/src/components/VotePanelContent.js +++ b/apps/voting/app/src/components/VotePanelContent.js @@ -130,15 +130,6 @@ class VotePanelContent extends React.Component { text ) } - renderDescription = (description = '') => { - // Make '\n's real breaks - return description.split('\n').map((line, i) => ( - - {line} -
- - )) - } render() { const { network: { etherscanBaseUrl }, @@ -165,9 +156,10 @@ class VotePanelContent extends React.Component { const { creator, - description, endDate, metadata, + metadataNode, + descriptionNode, open, snapshotBlock, } = vote.data @@ -210,15 +202,15 @@ class VotePanelContent extends React.Component {

- {metadata} + {metadataNode} )} - {description && ( + {descriptionNode && (

-

{this.renderDescription(description)}

+

{descriptionNode}

 )} diff --git a/apps/voting/app/src/components/VotingCard/VotingCard.js b/apps/voting/app/src/components/VotingCard/VotingCard.js index 726355e219..5ece61786d 100644 --- a/apps/voting/app/src/components/VotingCard/VotingCard.js +++ b/apps/voting/app/src/components/VotingCard/VotingCard.js @@ -18,12 +18,11 @@ class VotingCard extends React.Component { const { options, endDate, - question, + label, open, votingPower, status, id, - description, } = this.props return (
@@ -42,10 +41,10 @@ class VotingCard extends React.Component { - + + {label} +