Refactor hooks (#171)

packages/DApp/src/hooks/useCommunities.ts

@@ -2,34 +2,40 @@ import { getCommunityDetails } from '../helpers/apiMock'
 import { useCommunitiesProvider } from '../providers/communities/provider'
 import { useWakuFeature } from '../providers/wakuFeature/provider'
 import { BigNumber } from 'ethers'
+import { CommunityDetail } from '../models/community'
+import { useEffect, useState } from 'react'
+
 export function useCommunities(publicKeys: string[]) {
   const { communitiesDetails, dispatch } = useCommunitiesProvider()
   const { featureVotes } = useWakuFeature()
 
-  return publicKeys.map((publicKey) => {
-    const detail = communitiesDetails[publicKey]
-    if (detail) {
-      if (featureVotes[publicKey]) {
-        return { ...detail, featureVotes: featureVotes[publicKey].sum }
-      } else {
-        return { ...detail, featureVotes: BigNumber.from(0) }
-      }
-    } else {
-      if (publicKey) {
-        const setCommunity = async () => {
-          let communityDetail = await getCommunityDetails(publicKey)
+  const [returnCommunities, setReturnCommunities] = useState<(CommunityDetail | undefined)[]>([])
+
+  useEffect(() => {
+    setReturnCommunities(
+      publicKeys.map((publicKey) => {
+        const detail = communitiesDetails[publicKey]
+        if (detail) {
           if (featureVotes[publicKey]) {
-            communityDetail = { ...communityDetail, featureVotes: featureVotes[publicKey].sum }
+            return { ...detail, featureVotes: featureVotes[publicKey].sum }
           } else {
-            communityDetail = { ...communityDetail, featureVotes: BigNumber.from(0) }
+            return { ...detail, featureVotes: BigNumber.from(0) }
           }
-          if (communityDetail) {
-            dispatch(communityDetail)
+        } else {
+          if (publicKey) {
+            const setCommunity = async () => {
+              const communityDetail = await getCommunityDetails(publicKey)
+              if (communityDetail) {
+                dispatch(communityDetail)
+              }
+            }
+            setCommunity()
           }
+          return undefined
         }
-        setCommunity()
-      }
-      return undefined
-    }
-  })
+      })
+    )
+  }, [communitiesDetails, featureVotes, JSON.stringify(publicKeys)])
+
+  return returnCommunities
 }

packages/DApp/src/hooks/useCommunity.ts

@@ -1,33 +0,0 @@
-import { useContractCall } from '@usedapp/core'
-import { useEffect, useState } from 'react'
-import { getCommunityDetails } from '../helpers/apiMock'
-import { CommunityDetail } from '../models/community'
-import { useContracts } from './useContracts'
-import voting from '../helpers/voting'
-
-export function useCommunity(room: number) {
-  const { votingContract } = useContracts()
-
-  const votingRoom = useContractCall({
-    abi: votingContract.interface,
-    address: votingContract.address,
-    method: 'votingRoomMap',
-    args: [room],
-  }) as any
-
-  const [community, setCommunity] = useState<CommunityDetail | undefined>(undefined)
-
-  useEffect(() => {
-    const getCurrentVoting = async () => {
-      const communityDetails = await getCommunityDetails(votingRoom['community'])
-      if (communityDetails) {
-        communityDetails.currentVoting = voting.fromRoom(votingRoom)
-        setCommunity(communityDetails)
-      }
-    }
-    if (votingRoom) {
-      getCurrentVoting()
-    }
-  }, [votingRoom])
-  return { community }
-}

packages/DApp/src/hooks/useContracts.ts

@@ -3,21 +3,29 @@ import { useConfig } from '../providers/config'
 import { Contract } from '@usedapp/core/node_modules/ethers'
 import { Interface } from '@ethersproject/abi'
 import { VotingContract, Directory } from '@status-community-dapp/contracts/abi'
+import { useEffect, useState } from 'react'
 
 export function useContracts() {
   const { config } = useConfig()
   const { chainId } = useEthers()
 
-  let votingContract = new Contract('0x0000000000000000000000000000000000000000', new Interface(VotingContract.abi))
-  let directoryContract = new Contract('0x0000000000000000000000000000000000000000', new Interface(Directory.abi))
+  const [votingContract, setVotingContract] = useState(
+    new Contract('0x0000000000000000000000000000000000000000', new Interface(VotingContract.abi))
+  )
 
-  if (chainId) {
-    const chainConfig = config.contracts[chainId]
-    if (chainConfig) {
-      votingContract = new Contract(chainConfig.votingContract, new Interface(VotingContract.abi))
-      directoryContract = new Contract(chainConfig.directoryContract, new Interface(Directory.abi))
+  const [directoryContract, setDirectoryContract] = useState(
+    new Contract('0x0000000000000000000000000000000000000000', new Interface(Directory.abi))
+  )
+
+  useEffect(() => {
+    if (chainId) {
+      const chainConfig = config.contracts[chainId]
+      if (chainConfig) {
+        setVotingContract(new Contract(chainConfig.votingContract, new Interface(VotingContract.abi)))
+        setDirectoryContract(new Contract(chainConfig.directoryContract, new Interface(Directory.abi)))
+      }
     }
-  }
+  }, [chainId])
 
   return { votingContract, directoryContract }
 }

packages/DApp/src/hooks/useRoomAggregateVotes.ts

@@ -1,19 +1,26 @@
+import { useEffect, useState } from 'react'
 import { DetailedVotingRoom } from '../models/smartContract'
 import { useVotesAggregate } from './useVotesAggregate'
 
 export function useRoomAggregateVotes(room: DetailedVotingRoom, showConfirmModal: boolean) {
   const { votes } = useVotesAggregate(room.roomNumber)
-  if (room.endAt.toNumber() * 1000 > Date.now() && showConfirmModal === false) {
-    const reducedVotes = votes.reduce(
-      (accumulator, vote) => {
-        if (vote[1].mod(2).toNumber()) {
-          return { for: accumulator.for.add(vote[2]), against: accumulator.against }
-        }
-        return { for: accumulator.for, against: accumulator.against.add(vote[2]) }
-      },
-      { for: room.totalVotesFor, against: room.totalVotesAgainst }
-    )
-    room = { ...room, totalVotesAgainst: reducedVotes.against, totalVotesFor: reducedVotes.for }
-  }
-  return room
+
+  const [returnRoom, setReturnRoom] = useState(room)
+
+  useEffect(() => {
+    if (room.endAt.toNumber() * 1000 > Date.now() && showConfirmModal === false) {
+      const reducedVotes = votes.reduce(
+        (accumulator, vote) => {
+          if (vote[1].mod(2).toNumber()) {
+            return { for: accumulator.for.add(vote[2]), against: accumulator.against }
+          }
+          return { for: accumulator.for, against: accumulator.against.add(vote[2]) }
+        },
+        { for: room.totalVotesFor, against: room.totalVotesAgainst }
+      )
+      setReturnRoom({ ...room, totalVotesAgainst: reducedVotes.against, totalVotesFor: reducedVotes.for })
+    }
+  }, [JSON.stringify(votes), JSON.stringify(room), showConfirmModal])
+
+  return returnRoom
 }