Add OngoingVoteModal (#56)

2021-06-25 10:33:01 +02:00 · 2021-06-25 10:33:01 +02:00 · 06cb8559d2
parent ce1437a81b
commit 06cb8559d2
7 changed files with 112 additions and 61 deletions
--- a/packages/DApp/src/components/Card.tsx
+++ b/packages/DApp/src/components/Card.tsx
@ -98,9 +98,10 @@ export const CardCommunity = ({ community, showRemoveButton }: CardCommunityProp

 interface CardVoteProps {
  community: CommunityDetail
+  hideModalFunction?: (val: boolean) => void
 }

-export const CardVote = ({ community }: CardVoteProps) => {
+export const CardVote = ({ community, hideModalFunction }: CardVoteProps) => {
  const [showVoteModal, setShowVoteModal] = useState(false)
  const [showConfirmModal, setShowConfirmModal] = useState(false)

@ -111,6 +112,13 @@ export const CardVote = ({ community }: CardVoteProps) => {
    setShowVoteModal(false)
  }

+  const hideConfirm = (val: boolean) => {
+    if (hideModalFunction) {
+      hideModalFunction(false)
+    }
+    setShowConfirmModal(val)
+  }
+
  const vote = community.currentVoting

  if (!vote) {
@ -125,6 +133,21 @@ export const CardVote = ({ community }: CardVoteProps) => {

  return (
    <CardVoteBlock>
+      {showVoteModal && (
+        <Modal heading={`${vote?.type} ${community.name}?`} setShowModal={setShowVoteModal}>
+          <VoteModal
+            vote={vote}
+            selectedVote={selectedVoted}
+            availableAmount={65245346}
+            setShowConfirmModal={setNext}
+          />{' '}
+        </Modal>
+      )}
+      {showConfirmModal && (
+        <Modal setShowModal={hideConfirm}>
+          <VoteConfirmModal community={community} selectedVote={selectedVoted} setShowModal={hideConfirm} />
+        </Modal>
+      )}
      {winner ? (
        <CardHeadingEndedVote>
          SNT holders have decided{' '}
@ -133,6 +156,8 @@ export const CardVote = ({ community }: CardVoteProps) => {
          </b>{' '}
          this community to the directory!
        </CardHeadingEndedVote>
+      ) : hideModalFunction ? (
+        <CardHeading />
      ) : (
        <CardHeading>{voteConstants.question}</CardHeading>
      )}
@ -145,21 +170,6 @@ export const CardVote = ({ community }: CardVoteProps) => {
          </VoteBtnFinal>
        ) : (
          <VotesBtns>
-            {showVoteModal && (
-              <Modal heading={`${vote?.type} ${community.name} ?`} setShowModal={setShowVoteModal}>
-                <VoteModal
-                  vote={vote}
-                  selectedVote={selectedVoted}
-                  availableAmount={65245346}
-                  setShowConfirmModal={setNext}
-                />{' '}
-              </Modal>
-            )}
-            {showConfirmModal && (
-              <Modal setShowModal={setShowConfirmModal}>
-                <VoteConfirmModal community={community} selectedVote={selectedVoted} setShowModal={setNext} />
-              </Modal>
-            )}
            <VoteBtn
              onClick={() => {
                setSelectedVoted(voteConstants.against)
@ -184,9 +194,9 @@ export const CardVote = ({ community }: CardVoteProps) => {
 }

 export const Card = styled.div`
-  margin: 20px;
  display: flex;
  align-items: stretch;
+  margin: 20px;
 `
 export const CardCommunityWrap = styled.div`
  width: 50%;
@ -195,6 +205,14 @@ export const CardCommunityWrap = styled.div`
  box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.1);
  border-radius: 6px 0px 0px 6px;
 `
+export const CardVoteWrap = styled.div`
+  width: 50%;
+  display: flex;
+  align-items: stretch;
+  padding: 24px 24px 32px;
+  box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.1);
+  border-radius: 6px 0px 0px 6px;
+`
 const CardInfoBlock = styled.div`
  display: flex;
  flex-direction: column;
@ -278,16 +296,13 @@ export const CardLinks = styled.div`
 `

 export const CardVoteBlock = styled.div`
-  width: 50%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
-  padding: 24px 24px 32px;
-  box-shadow: 0px 2px 12px rgba(0, 0, 0, 0.15);
-  border-radius: 6px;
+  width: 100%;
 `

-const VotesBtns = styled.div`
+export const VotesBtns = styled.div`
  display: flex;
  justify-content: space-between;
  width: 100%;
--- a/packages/DApp/src/components/card/CardFeature.tsx
+++ b/packages/DApp/src/components/card/CardFeature.tsx
@ -9,6 +9,7 @@ import { CommunityDetail } from '../../models/community'
 import { Modal } from '../Modal'
 import { FeatureModal } from './FeatureModal'
 import { VoteConfirmModal } from './VoteConfirmModal'
+import { OngoingVote } from './OngoingVote'

 interface CardFeatureProps {
  community: CommunityDetail
@ -23,6 +24,7 @@ interface CardFeatureProps {
 export const CardFeature = ({ community, heading, text, icon, sum, timeLeft, voting }: CardFeatureProps) => {
  const [showFeatureModal, setShowFeatureModal] = useState(false)
  const [showConfirmModal, setShowConfirmModal] = useState(false)
+  const [showOngoingVote, setShowOngoingVote] = useState(false)

  const setNewModal = (val: boolean) => {
    setShowConfirmModal(val)
@ -33,7 +35,12 @@ export const CardFeature = ({ community, heading, text, icon, sum, timeLeft, vot
    <CardVoteBlock style={{ backgroundColor: `${Colors.GrayLight}` }}>
      <FeatureTop>
        <CardHeading>{heading}</CardHeading>
-        {voting && <CardLinkFeature>Ongoing vote for removal</CardLinkFeature>}
+        {voting && (
+          <div>
+            {showOngoingVote && <OngoingVote community={community} setShowOngoingVote={setShowOngoingVote} />}
+            <CardLinkFeature onClick={() => setShowOngoingVote(true)}>Ongoing vote for removal</CardLinkFeature>
+          </div>
+        )}
      </FeatureTop>

      <FeatureVote>
--- a/packages/DApp/src/components/card/OngoingVote.tsx
+++ b/packages/DApp/src/components/card/OngoingVote.tsx
@ -0,0 +1,22 @@
+import React from 'react'
+import { CommunityDetail } from '../../models/community'
+import { CardVote, CardVoteBlock } from '../Card'
+import { Modal } from '../Modal'
+
+export interface OngoingVoteProps {
+  community: CommunityDetail
+  setShowOngoingVote: (show: boolean) => void
+}
+
+export function OngoingVote({ community, setShowOngoingVote }: OngoingVoteProps) {
+  const vote = community.currentVoting
+  if (!vote) {
+    return <CardVoteBlock />
+  }
+
+  return (
+    <Modal heading={`${vote?.type} ${community.name}?`} setShowModal={setShowOngoingVote}>
+      <CardVote community={community} hideModalFunction={setShowOngoingVote} />
+    </Modal>
+  )
+}
--- a/packages/DApp/src/components/card/VoteModal.tsx
+++ b/packages/DApp/src/components/card/VoteModal.tsx
@ -43,7 +43,7 @@ export function VoteModal({ vote, selectedVote, availableAmount, setShowConfirmM
  )
 }

-const CardProposing = styled.div`
+export const CardProposing = styled.div`
  display: flex;
  flex-direction: column;
  align-items: center;
--- a/packages/DApp/src/components/directory/DirectoryCards.tsx
+++ b/packages/DApp/src/components/directory/DirectoryCards.tsx
@ -1,5 +1,5 @@
 import React, { useState } from 'react'
-import { Card, CardCommunity, CardCommunityWrap } from '../Card'
+import { Card, CardCommunity, CardCommunityWrap, CardVoteWrap } from '../Card'
 import { CardFeature } from '../card/CardFeature'
 import styled from 'styled-components'
 import { CommunityDetail, DirectorySortingEnum } from '../../models/community'
@ -11,6 +11,7 @@ import { PageBar } from '../PageBar'
 import { DirectorySortingOptions } from '../../constants/SortingOptions'
 import { SpinnerIcon } from '../../assets/animatedIcons/spinnerIcon'
 import { useConfig } from '../../providers/config'
+import { Colors } from '../../constants/styles'

 interface DirectoryCardProps {
  community: CommunityDetail
@ -31,15 +32,17 @@ function DirectoryCard({ community }: DirectoryCardProps) {
        {' '}
        <CardCommunity community={community} showRemoveButton={true} />
      </CardCommunityWrap>
-      <CardFeature
-        community={community}
-        heading="Feature this community?"
-        text={timeLeft ? 'This community has to wait until it can be featured again' : 'Weekly Feature vote'}
-        icon={timeLeft ? '⏳' : '⭐'}
-        sum={community.directoryInfo.featureVotes?.toNumber()}
-        voting={Boolean(community.currentVoting)}
-        timeLeft={timeLeft}
-      />
+      <CardVoteWrap style={{ backgroundColor: `${Colors.GrayLight}` }}>
+        <CardFeature
+          community={community}
+          heading="Feature this community?"
+          text={timeLeft ? 'This community has to wait until it can be featured again' : 'Weekly Feature vote'}
+          icon={timeLeft ? '⏳' : '⭐'}
+          sum={community.directoryInfo.featureVotes?.toNumber()}
+          voting={Boolean(community.currentVoting)}
+          timeLeft={timeLeft}
+        />
+      </CardVoteWrap>
    </Card>
  )
 }
--- a/packages/DApp/src/components/votes/VotingCard.tsx
+++ b/packages/DApp/src/components/votes/VotingCard.tsx
@ -1,6 +1,6 @@
 import React from 'react'
 import { CommunityDetail } from '../../models/community'
-import { Card, CardCommunity, CardCommunityWrap, CardVote } from '../Card'
+import { Card, CardCommunity, CardCommunityWrap, CardVote, CardVoteWrap } from '../Card'

 interface VotingCardProps {
  community: CommunityDetail
@ -12,8 +12,10 @@ export const VotingCard = ({ community }: VotingCardProps) => {
        {' '}
        <CardCommunity community={community} />
      </CardCommunityWrap>
-
-      <CardVote community={community} />
+      <CardVoteWrap>
+        {' '}
+        <CardVote community={community} />
+      </CardVoteWrap>
    </Card>
  )
 }
--- a/packages/DApp/src/components/votes/VotingCardSkeleton.tsx
+++ b/packages/DApp/src/components/votes/VotingCardSkeleton.tsx
@ -1,6 +1,6 @@
 import React from 'react'
 import styled from 'styled-components'
-import { Card, CardCommunityWrap, CardLinks, CardVoteBlock } from '../Card'
+import { Card, CardCommunityWrap, CardLinks, CardVoteBlock, CardVoteWrap } from '../Card'
 import { LinkExternal, LinkInternal } from '../Link'
 import { Skeleton } from '../skeleton/Skeleton'
 import { TagsSkeletonList } from '../skeleton/TagSkeleton'
@ -24,29 +24,31 @@ export const VotingCardSkeleton = () => {
          <StyledInternalink>Voting history </StyledInternalink>
        </CardLinks>
      </CardCommunityWrap>
-      <CardVoteBlock>
-        <CardHeader>
-          <Skeleton width="50%" />
-        </CardHeader>
-        <Row>
-          <div>
-            <span>❓</span>
-            <Skeleton width="90px" height="16px" />
-          </div>
-          <div>
-            <Skeleton width="43px" height="8px" />
-          </div>
-          <div>
-            <span>❓</span>
-            <Skeleton width="90px" height="16px" />
-          </div>
-        </Row>
-        <ProgressSkeleton />
-        <ButtonsRow>
-          <SkeletonButton />
-          <SkeletonButton />
-        </ButtonsRow>
-      </CardVoteBlock>
+      <CardVoteWrap>
+        <CardVoteBlock>
+          <CardHeader>
+            <Skeleton width="50%" />
+          </CardHeader>
+          <Row>
+            <div>
+              <span>❓</span>
+              <Skeleton width="90px" height="16px" />
+            </div>
+            <div>
+              <Skeleton width="43px" height="8px" />
+            </div>
+            <div>
+              <span>❓</span>
+              <Skeleton width="90px" height="16px" />
+            </div>
+          </Row>
+          <ProgressSkeleton />
+          <ButtonsRow>
+            <SkeletonButton />
+            <SkeletonButton />
+          </ButtonsRow>
+        </CardVoteBlock>
+      </CardVoteWrap>
    </Card>
  )
 }