Refactor current voting (#156)

packages/DApp/src/components/directory/DirectoryCard.tsx

@@ -3,9 +3,7 @@ import { Card, CardCommunityWrap, CardVoteWrap } from '../Card'
 import { CardCommunity } from '../card/CardCommunity'
 import { CardFeature } from '../card/CardFeature'
 import { CommunityDetail } from '../../models/community'
-import { useContracts } from '../../hooks/useContracts'
-import { useContractCall } from '@usedapp/core'
-import { votingFromRoom } from '../../helpers/voting'
+import { useGetCurrentVoting } from '../../hooks/useGetCurrentVoting'
 
 export interface DirectoryCardProps {
   community: CommunityDetail
@@ -33,22 +31,7 @@ export function DirectoryCard({ community }: DirectoryCardProps) {
     timeLeft = `1 weeks left`
   }
 
-  const { votingContract } = useContracts()
-  let votingRoom = useContractCall({
-    abi: votingContract.interface,
-    address: votingContract.address,
-    method: 'getCommunityVoting',
-    args: [community.publicKey],
-  }) as any
-
-  if (votingRoom && (votingRoom.roomNumber.toNumber() === 0 || votingRoom.finalized == true)) {
-    votingRoom = undefined
-  }
-
-  let currentVoting
-  if (votingRoom) {
-    currentVoting = votingFromRoom(votingRoom)
-  }
+  const { currentVoting, votingRoom } = useGetCurrentVoting(community?.publicKey)
 
   return (
     <Card>

packages/DApp/src/componentsMobile/FeatureMobile.tsx

@@ -9,15 +9,14 @@ import {
 import { VotePropose } from '../components/votes/VotePropose'
 import styled from 'styled-components'
 import { useCommunities } from '../hooks/useCommunities'
-import { useParams } from 'react-router'
+import { useHistory, useParams } from 'react-router'
 import { ButtonSecondary, VoteSendingBtn } from '../components/Button'
 import { CommunitySkeleton } from '../components/skeleton/CommunitySkeleton'
 import { HeaderVotingMobile } from './VotingMobile'
 import { ConnectMobile } from './ConnectMobile'
 import { HistoryLink } from './CardVoteMobile'
-import { VoteSubmitButton } from '../components/card/VoteSubmitButton'
-import { FeatureBottom } from '../components/card/CardFeature'
 import { useEthers } from '@usedapp/core'
+import { useGetCurrentVoting } from '../hooks/useGetCurrentVoting'
 
 export function FeatureMobile() {
   const { publicKey } = useParams<{ publicKey: string }>()
@@ -29,6 +28,9 @@ export function FeatureMobile() {
   const [showHistory, setShowHistory] = useState(false)
   const isDisabled = community ? community.votingHistory.length === 0 : false
 
+  const { currentVoting } = useGetCurrentVoting(community?.publicKey)
+  const history = useHistory()
+
   if (!community) {
     return <CommunitySkeleton />
   } else {
@@ -51,11 +53,12 @@ export function FeatureMobile() {
           <FeatureBtn disabled={disabled}>
             Feature this community! <span style={{ fontSize: '20px' }}>⭐️</span>
           </FeatureBtn>
-          {community.currentVoting && community && (
-            <FeatureBottom>
-              <VoteSendingBtn>Removal vote in progress</VoteSendingBtn>
-              {community.currentVoting && <VoteSubmitButton vote={community.currentVoting} />}
-            </FeatureBottom>
+          {currentVoting && (
+            <div>
+              <VoteSendingBtn onClick={() => history.push(`/votingRoom/${currentVoting.ID}`)}>
+                Removal vote in progress
+              </VoteSendingBtn>
+            </div>
           )}
           {!isDisabled && (
             <HistoryLink
@@ -66,7 +69,6 @@ export function FeatureMobile() {
               Voting history
             </HistoryLink>
           )}
-
           {showHistory && (
             <VoteHistoryTable>
               <tbody>

packages/DApp/src/hooks/useGetCurrentVoting.ts

@@ -0,0 +1,35 @@
+import { useContractCall } from '@usedapp/core'
+import { useEffect, useState } from 'react'
+import { votingFromRoom } from '../helpers/voting'
+import { CurrentVoting } from '../models/community'
+import { VotingRoom } from '../models/smartContract'
+import { useContracts } from './useContracts'
+
+export function useGetCurrentVoting(publicKey: string | undefined) {
+  const [currentVoting, setCurrentVoting] = useState<undefined | CurrentVoting>(undefined)
+  const [votingRoomState, setVotingRoomState] = useState<undefined | VotingRoom>(undefined)
+  const { votingContract } = useContracts()
+  const votingRoom = useContractCall({
+    abi: votingContract.interface,
+    address: votingContract.address,
+    method: 'getCommunityVoting',
+    args: [publicKey],
+  }) as any
+
+  useEffect(() => {
+    if (votingRoom) {
+      if (votingRoom.roomNumber.toNumber() === 0 || votingRoom.finalized == true) {
+        setCurrentVoting(undefined)
+        setVotingRoomState(undefined)
+      } else {
+        setVotingRoomState(votingRoom)
+        setCurrentVoting(votingFromRoom(votingRoom))
+      }
+    } else {
+      setCurrentVoting(undefined)
+      setVotingRoomState(undefined)
+    }
+  }, [votingRoom?.roomNumber?.toString(), votingRoom?.finalized])
+
+  return { currentVoting, votingRoom: votingRoomState }
+}