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.
aragon · Nov 14, 2018 · fb8b54a · fb8b54a
1 parent 801b121
commit fb8b54a
Show file tree

Hide file tree

Showing 6 changed files with 96 additions and 72 deletions.
diff --git 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
@@ -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 ? (
+        <span title={part} key={index}>
+          {shortenAddress(part)}
+        </span>
+      ) : (
+        <span key={index}>{part}</span>
+      )
+    )
+  }
+  // Shorten addresses, render line breaks, auto link
+  renderVoteText(description) {
+    return (
+      description && (
+        <AutoLink>
+          {description.split('\n').map((line, i) => (
+            <React.Fragment key={i}>
+              {this.shortenAddresses(line)}
+              <br />
+            </React.Fragment>
+          ))}
+        </AutoLink>
+      )
+    )
+  }
   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
@@ -0,0 +1,11 @@
+import React from 'react'
+import Linkify from 'react-linkify'
+import { SafeLink } from '@aragon/ui'
+
+const AutoLink = ({ children }) => (
+  <Linkify component={SafeLink} properties={{ target: '_blank' }}>
+    {children}
+  </Linkify>
+)
+
+export default AutoLink
diff --git 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) => (
-      <React.Fragment key={i}>
-        {line}
-        <br />
-      </React.Fragment>
-    ))
-  }
   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 {
               <h2>
                 <Label>Question</Label>
               </h2>
-              <Question>{metadata}</Question>
+              <Question>{metadataNode}</Question>
             </React.Fragment>
           )}
-          {description && (
+          {descriptionNode && (
             <React.Fragment>
               <h2>
                 <Label>Description</Label>
               </h2>
-              <p>{this.renderDescription(description)}</p>
+              <p>{descriptionNode}</p>
             </React.Fragment>
           )}
         </Part>

diff --git 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 (
       <Main>
@@ -42,10 +41,10 @@ class VotingCard extends React.Component {
         </Header>
         <Card>
           <Content>
-            <Question title={`${description} (ID: ${id})`}>
+            <Label>
               <Text color={theme.textTertiary}>#{id} </Text>
-              <span>{question}</span>
-            </Question>
+              <span>{label}</span>
+            </Label>
             <VotingOptions options={options} votingPower={votingPower} />
           </Content>
           <Footer>
@@ -94,7 +93,7 @@ const Content = styled.div`
   height: 100%;
 `
 
-const Question = styled.h1`
+const Label = styled.h1`
   display: -webkit-box;
   overflow: hidden;
   -webkit-line-clamp: 2;

diff --git a/apps/voting/app/src/screens/Votes.js b/apps/voting/app/src/screens/Votes.js
@@ -4,23 +4,9 @@ import { Badge, theme } from '@aragon/ui'
 import VotingCard from '../components/VotingCard/VotingCard'
 import VotingCardGroup from '../components/VotingCard/VotingCardGroup'
 import VoteStatus from '../components/VoteStatus'
-import { shortenAddress, transformAddresses } from '../web3-utils'
 import { VOTE_YEA, VOTE_NAY } from '../vote-types'
 
 class Votes extends React.Component {
-  getQuestionLabel({ metadata = '', description = '' }) {
-    return transformAddresses(
-      [metadata, description].join(' '),
-      (part, isAddress, index) =>
-        isAddress ? (
-          <span title={part} key={index}>
-            {shortenAddress(part)}
-          </span>
-        ) : (
-          <span key={index}>{part}</span>
-        )
-    )
-  }
   optionLabel(label, vote, voteType) {
     return (
       <span>
@@ -31,8 +17,8 @@ class Votes extends React.Component {
   }
   render() {
     const { votes, onSelectVote } = this.props
-    const sortedVotes = votes.sort(
-      (a, b) => (a.data.endDate > b.data.endDate ? -1 : 1)
+    const sortedVotes = votes.sort((a, b) =>
+      a.data.endDate > b.data.endDate ? -1 : 1
     )
 
     const openVotes = sortedVotes.filter(vote => vote.data.open)
@@ -43,42 +29,44 @@ class Votes extends React.Component {
     ]
     return (
       <React.Fragment>
-        {votingGroups.map(
-          ([groupName, votes]) =>
-            votes.length ? (
-              <VotingCardGroup
-                title={groupName}
-                count={votes.length}
-                key={groupName}
-              >
-                {votes.map(vote => (
-                  <VotingCard
-                    key={vote.voteId}
-                    id={vote.voteId}
-                    status={
-                      vote.open ? null : <VoteStatus vote={vote} cardStyle />
-                    }
-                    endDate={vote.data.endDate}
-                    open={vote.data.open}
-                    question={this.getQuestionLabel(vote.data)}
-                    description={vote.data.description}
-                    votingPower={vote.numData.votingPower}
-                    onOpen={onSelectVote}
-                    options={[
-                      {
-                        label: this.optionLabel('Yes', vote, VOTE_YEA),
-                        power: vote.numData.yea,
-                      },
-                      {
-                        label: this.optionLabel('No', vote, VOTE_NAY),
-                        power: vote.numData.nay,
-                        color: theme.negative,
-                      },
-                    ]}
-                  />
-                ))}
-              </VotingCardGroup>
-            ) : null
+        {votingGroups.map(([groupName, votes]) =>
+          votes.length ? (
+            <VotingCardGroup
+              title={groupName}
+              count={votes.length}
+              key={groupName}
+            >
+              {votes.map(vote => (
+                <VotingCard
+                  key={vote.voteId}
+                  id={vote.voteId}
+                  status={
+                    vote.open ? null : <VoteStatus vote={vote} cardStyle />
+                  }
+                  endDate={vote.data.endDate}
+                  open={vote.data.open}
+                  label={
+                    vote.data.metadata
+                      ? vote.data.metadataNode
+                      : vote.data.descriptionNode
+                  }
+                  votingPower={vote.numData.votingPower}
+                  onOpen={onSelectVote}
+                  options={[
+                    {
+                      label: this.optionLabel('Yes', vote, VOTE_YEA),
+                      power: vote.numData.yea,
+                    },
+                    {
+                      label: this.optionLabel('No', vote, VOTE_NAY),
+                      power: vote.numData.nay,
+                      color: theme.negative,
+                    },
+                  ]}
+                />
+              ))}
+            </VotingCardGroup>
+          ) : null
         )}
       </React.Fragment>
     )