Refactor CardVote (#96)

2021-07-08 09:10:57 +02:00 · 2021-07-08 09:10:57 +02:00 · 968b3f86c0
parent eeedf005ee
commit 968b3f86c0
6 changed files with 191 additions and 181 deletions
--- a/packages/DApp/src/components/Button.tsx
+++ b/packages/DApp/src/components/Button.tsx
@ -62,3 +62,24 @@ export const VoteSendingBtn = styled.button`
    color: ${Colors.VioletDark};
  }
 `
+
+export const VotesBtns = styled.div`
+  display: flex;
+  justify-content: space-between;
+  width: 100%;
+`
+export const VoteBtn = styled(ButtonSecondary)`
+  width: 187px;
+  padding: 11px 46px;
+  font-weight: 500;
+  font-size: 15px;
+  line-height: 22px;
+
+  & > span {
+    font-size: 20px;
+  }
+
+  @media (max-width: 768px) {
+    width: 305px;
+  }
+`
--- a/packages/DApp/src/components/Card.tsx
+++ b/packages/DApp/src/components/Card.tsx
@ -1,25 +1,12 @@
 import React, { useState } from 'react'
 import styled from 'styled-components'
 import { Colors } from '../constants/styles'
-import { ButtonSecondary } from '../components/Button'
 import { CommunityDetail } from '../models/community'
 import { LinkExternal, LinkInternal } from './Link'
 import { Modal } from './Modal'
-import { VoteModal } from './card/VoteModal'
-import { VoteChart } from './votes/VoteChart'
-import { voteTypes } from './../constants/voteTypes'
 import { VoteConfirmModal } from './card/VoteConfirmModal'
 import binIcon from '../assets/images/bin.svg'
 import { RemoveModal } from './card/RemoveModal'
-import { useEthers } from '@usedapp/core'
-import { useContractFunction } from '@usedapp/core'
-import { useContracts } from '../hooks/useContracts'
-import { getVotingWinner } from '../helpers/voting'
-import { VoteAnimatedModal } from './card/VoteAnimatedModal'
-import voting from '../helpers/voting'
-import { DetailedVotingRoom } from '../models/smartContract'
-import { VoteSubmitButton } from './card/VoteSubmitButton'
-import { useRoomAggregateVotes } from '../hooks/useRoomAggregateVotes'

 interface CardCommunityProps {
  community: CommunityDetail
@ -110,121 +97,6 @@ export const CardCommunity = ({ community, showRemoveButton, customHeading }: Ca
  )
 }

-interface CardVoteProps {
-  room: DetailedVotingRoom
-  hideModalFunction?: (val: boolean) => void
-}
-
-export const CardVote = ({ room, hideModalFunction }: CardVoteProps) => {
-  const { account } = useEthers()
-  const [showVoteModal, setShowVoteModal] = useState(false)
-  const [showConfirmModal, setShowConfirmModal] = useState(false)
-
-  const [selectedVoted, setSelectedVoted] = useState(voteTypes['Add'].for)
-
-  const { votingContract } = useContracts()
-
-  room = useRoomAggregateVotes(room, showConfirmModal)
-
-  const finalizeVoting = useContractFunction(votingContract, 'finalizeVotingRoom')
-
-  const setNext = (val: boolean) => {
-    setShowConfirmModal(val)
-    setShowVoteModal(false)
-  }
-
-  const hideConfirm = (val: boolean) => {
-    if (hideModalFunction) {
-      hideModalFunction(false)
-    }
-    setShowConfirmModal(val)
-  }
-
-  const vote = voting.fromRoom(room)
-
-  const voteConstants = voteTypes[vote.type]
-
-  const winner = getVotingWinner(vote)
-  const availableAmount = 65800076
-
-  const initialProposing = vote?.type === 'Remove' && availableAmount > 2000000 ? 2000000 : 0
-  const [proposingAmount, setProposingAmount] = useState(initialProposing)
-
-  if (!vote) {
-    return <CardVoteBlock />
-  }
-  return (
-    <CardVoteBlock>
-      {showVoteModal && (
-        <Modal heading={`${vote?.type} ${room.details.name}?`} setShowModal={setShowVoteModal}>
-          <VoteModal
-            vote={vote}
-            room={room.roomNumber}
-            selectedVote={selectedVoted}
-            availableAmount={availableAmount}
-            proposingAmount={proposingAmount}
-            setShowConfirmModal={setNext}
-            setProposingAmount={setProposingAmount}
-          />{' '}
-        </Modal>
-      )}
-      {showConfirmModal && (
-        <Modal setShowModal={hideConfirm}>
-          <VoteAnimatedModal
-            vote={vote}
-            community={room.details}
-            selectedVote={selectedVoted}
-            setShowModal={hideConfirm}
-            proposingAmount={proposingAmount}
-          />
-        </Modal>
-      )}
-      {winner ? (
-        <CardHeadingEndedVote>
-          SNT holders have decided <b>{winner == 1 ? voteConstants.against.verb : voteConstants.for.verb}</b> this
-          community to the directory!
-        </CardHeadingEndedVote>
-      ) : hideModalFunction || window.innerWidth < 769 ? (
-        <CardHeading />
-      ) : (
-        <CardHeading>{voteConstants.question}</CardHeading>
-      )}
-      <div>
-        <VoteChart vote={vote} voteWinner={winner} />
-
-        {winner ? (
-          <VoteBtnFinal onClick={() => finalizeVoting.send(room.roomNumber)} disabled={!account}>
-            Finalize the vote <span>✍️</span>
-          </VoteBtnFinal>
-        ) : (
-          <VotesBtns>
-            <VoteBtn
-              disabled={!account}
-              onClick={() => {
-                setSelectedVoted(voteConstants.against)
-                setShowVoteModal(true)
-              }}
-            >
-              {voteConstants.against.text} <span>{voteConstants.against.icon}</span>
-            </VoteBtn>
-            <VoteBtn
-              disabled={!account}
-              onClick={() => {
-                setSelectedVoted(voteConstants.for)
-                setShowVoteModal(true)
-              }}
-            >
-              {voteConstants.for.text} <span>{voteConstants.for.icon}</span>
-            </VoteBtn>
-          </VotesBtns>
-        )}
-
-        <CardVoteBottom>{vote && vote.timeLeft > 0 && <VoteSubmitButton vote={vote} />}</CardVoteBottom>
-      </div>
-    </CardVoteBlock>
-  )
-}
-
 export const Card = styled.div`
  display: flex;
  align-items: stretch;
@ -275,6 +147,13 @@ export const CardVoteWrap = styled.div`
  }
 `

+export const CardVoteBlock = styled.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  width: 100%;
+`
+
 const Community = styled.div`
  display: flex;
  margin-bottom: 16px;
@ -296,11 +175,6 @@ const CardLogo = styled.img`
  height: 64px !important;
  border-radius: 50%;
 `
-const CardVoteBottom = styled.div`
-  display: flex;
-  justify-content: flex-end;
-  align-items: center;
-`

 export const CardHeading = styled.h2`
  font-weight: bold;
@ -324,19 +198,6 @@ const RemoveBtn = styled.button`
  background-size: cover;
 `

-const CardHeadingEndedVote = styled.p`
-  max-width: 290px;
-  align-self: center;
-  font-weight: normal;
-  font-size: 15px;
-  line-height: 22px;
-  margin-bottom: 18px;
-  text-align: center;
-
-  @media (max-width: 768px) {
-    display: none;
-  }
-`
 const CardText = styled.p`
  line-height: 22px;
  margin-bottom: 8px;
@ -370,37 +231,6 @@ export const CardLinks = styled.div`
  }
 `

-export const CardVoteBlock = styled.div`
-  display: flex;
-  flex-direction: column;
-  justify-content: space-between;
-  width: 100%;
-`
-
-export const VotesBtns = styled.div`
-  display: flex;
-  justify-content: space-between;
-  width: 100%;
-`
-export const VoteBtn = styled(ButtonSecondary)`
-  width: 187px;
-  padding: 11px 46px;
-  font-weight: 500;
-  font-size: 15px;
-  line-height: 22px;
-
-  & > span {
-    font-size: 20px;
-  }
-
-  @media (max-width: 768px) {
-    width: 305px;
-  }
-`
-const VoteBtnFinal = styled(VoteBtn)`
-  width: 100%;
-`
-
 const VoteHistoryTable = styled.table`
  width: 100%;
 `
--- a/packages/DApp/src/components/card/CardFeature.tsx
+++ b/packages/DApp/src/components/card/CardFeature.tsx
@ -2,7 +2,7 @@ import React, { useState } from 'react'
 import styled from 'styled-components'
 import { Colors, ColumnFlexDiv } from '../../constants/styles'
 import { addCommas } from '../../helpers/addCommas'
-import { CardHeading, CardVoteBlock, VoteBtn } from '../Card'
+import { CardHeading, CardVoteBlock } from '../Card'
 import { CommunityDetail } from '../../models/community'
 import { Modal } from '../Modal'
 import { FeatureModal } from './FeatureModal'
@ -13,7 +13,8 @@ import { useContracts } from '../../hooks/useContracts'
 import { useContractCall } from '@usedapp/core'
 import { votingFromRoom } from '../../helpers/voting'
 import { VoteSubmitButton } from './VoteSubmitButton'
-import { VoteSendingBtn } from '../Button'
+import { VoteSendingBtn, VoteBtn } from '../Button'
+
 interface CardFeatureProps {
  community: CommunityDetail
  heading: string
--- a/packages/DApp/src/components/card/CardVote/CardVote.tsx
+++ b/packages/DApp/src/components/card/CardVote/CardVote.tsx
@ -0,0 +1,156 @@
+import React, { useState } from 'react'
+import { VoteModal } from './../VoteModal'
+import { VoteChart } from './../../votes/VoteChart'
+import { voteTypes } from './../../../constants/voteTypes'
+import { useEthers } from '@usedapp/core'
+import { useContractFunction } from '@usedapp/core'
+import { useContracts } from '../../../hooks/useContracts'
+import { getVotingWinner } from '../../../helpers/voting'
+import { VoteAnimatedModal } from './../VoteAnimatedModal'
+import voting from '../../../helpers/voting'
+import { DetailedVotingRoom } from '../../../models/smartContract'
+import { VoteSubmitButton } from './../VoteSubmitButton'
+import { useRoomAggregateVotes } from '../../../hooks/useRoomAggregateVotes'
+import styled from 'styled-components'
+import { Modal } from './../../Modal'
+import { VoteBtn, VotesBtns } from '../../Button'
+import { CardHeading, CardVoteBlock } from '../../Card'
+
+interface CardVoteProps {
+  room: DetailedVotingRoom
+  hideModalFunction?: (val: boolean) => void
+}
+
+export const CardVote = ({ room, hideModalFunction }: CardVoteProps) => {
+  const { account } = useEthers()
+  const [showVoteModal, setShowVoteModal] = useState(false)
+  const [showConfirmModal, setShowConfirmModal] = useState(false)
+
+  const [selectedVoted, setSelectedVoted] = useState(voteTypes['Add'].for)
+
+  const { votingContract } = useContracts()
+
+  room = useRoomAggregateVotes(room, showConfirmModal)
+
+  const finalizeVoting = useContractFunction(votingContract, 'finalizeVotingRoom')
+
+  const setNext = (val: boolean) => {
+    setShowConfirmModal(val)
+    setShowVoteModal(false)
+  }
+
+  const hideConfirm = (val: boolean) => {
+    if (hideModalFunction) {
+      hideModalFunction(false)
+    }
+    setShowConfirmModal(val)
+  }
+
+  const vote = voting.fromRoom(room)
+
+  const voteConstants = voteTypes[vote.type]
+
+  const winner = getVotingWinner(vote)
+  const availableAmount = 65800076
+
+  const initialProposing = vote?.type === 'Remove' && availableAmount > 2000000 ? 2000000 : 0
+  const [proposingAmount, setProposingAmount] = useState(initialProposing)
+
+  if (!vote) {
+    return <CardVoteBlock />
+  }
+  return (
+    <CardVoteBlock>
+      {showVoteModal && (
+        <Modal heading={`${vote?.type} ${room.details.name}?`} setShowModal={setShowVoteModal}>
+          <VoteModal
+            vote={vote}
+            room={room.roomNumber}
+            selectedVote={selectedVoted}
+            availableAmount={availableAmount}
+            proposingAmount={proposingAmount}
+            setShowConfirmModal={setNext}
+            setProposingAmount={setProposingAmount}
+          />{' '}
+        </Modal>
+      )}
+      {showConfirmModal && (
+        <Modal setShowModal={hideConfirm}>
+          <VoteAnimatedModal
+            vote={vote}
+            community={room.details}
+            selectedVote={selectedVoted}
+            setShowModal={hideConfirm}
+            proposingAmount={proposingAmount}
+          />
+        </Modal>
+      )}
+      {winner ? (
+        <CardHeadingEndedVote>
+          SNT holders have decided <b>{winner == 1 ? voteConstants.against.verb : voteConstants.for.verb}</b> this
+          community to the directory!
+        </CardHeadingEndedVote>
+      ) : hideModalFunction || window.innerWidth < 769 ? (
+        <CardHeading />
+      ) : (
+        <CardHeading>{voteConstants.question}</CardHeading>
+      )}
+      <div>
+        <VoteChart vote={vote} voteWinner={winner} />
+
+        {winner ? (
+          <VoteBtnFinal onClick={() => finalizeVoting.send(room.roomNumber)} disabled={!account}>
+            Finalize the vote <span>✍️</span>
+          </VoteBtnFinal>
+        ) : (
+          <VotesBtns>
+            <VoteBtn
+              disabled={!account}
+              onClick={() => {
+                setSelectedVoted(voteConstants.against)
+                setShowVoteModal(true)
+              }}
+            >
+              {voteConstants.against.text} <span>{voteConstants.against.icon}</span>
+            </VoteBtn>
+            <VoteBtn
+              disabled={!account}
+              onClick={() => {
+                setSelectedVoted(voteConstants.for)
+                setShowVoteModal(true)
+              }}
+            >
+              {voteConstants.for.text} <span>{voteConstants.for.icon}</span>
+            </VoteBtn>
+          </VotesBtns>
+        )}
+
+        <CardVoteBottom>{vote && vote.timeLeft > 0 && <VoteSubmitButton vote={vote} />}</CardVoteBottom>
+      </div>
+    </CardVoteBlock>
+  )
+}
+
+const CardHeadingEndedVote = styled.p`
+  max-width: 290px;
+  align-self: center;
+  font-weight: normal;
+  font-size: 15px;
+  line-height: 22px;
+  margin-bottom: 18px;
+  text-align: center;
+
+  @media (max-width: 768px) {
+    display: none;
+  }
+`
+
+const VoteBtnFinal = styled(VoteBtn)`
+  width: 100%;
+`
+
+const CardVoteBottom = styled.div`
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+`
--- a/packages/DApp/src/components/card/OngoingVote.tsx
+++ b/packages/DApp/src/components/card/OngoingVote.tsx
@ -2,7 +2,8 @@ import React from 'react'
 import { votingFromRoom } from '../../helpers/voting'
 import { CommunityDetail } from '../../models/community'
 import { VotingRoom } from '../../models/smartContract'
-import { CardVote, CardVoteBlock } from '../Card'
+import { CardVoteBlock } from '../Card'
+import { CardVote } from './CardVote/CardVote'
 import { Modal } from '../Modal'

 export interface OngoingVoteProps {
--- a/packages/DApp/src/components/votes/VotingCard.tsx
+++ b/packages/DApp/src/components/votes/VotingCard.tsx
@ -1,6 +1,7 @@
 import React, { useState, useEffect } from 'react'
 import { DetailedVotingRoom } from '../../models/smartContract'
-import { Card, CardCommunity, CardCommunityWrap, CardVote, CardVoteWrap } from '../Card'
+import { Card, CardCommunity, CardCommunityWrap, CardVoteWrap } from '../Card'
+import { CardVote } from './../card/CardVote/CardVote'

 interface VotingCardProps {
  room: DetailedVotingRoom