Improve components performance (#76)

packages/proposal-components/src/components/Proposal.tsx

@@ -10,24 +10,23 @@ import { VotingRoom } from '@status-waku-voting/core/dist/esm/src/types/PollType
 import { useTokenBalance } from '@status-waku-voting/react-components'
 import { NewVoteModal } from './newVoteModal/NewVoteModal'
 import { useEthers } from '@usedapp/core'
-import { Modal, Networks, useMobileVersion } from '@status-waku-voting/react-components'
+import { Modal, Networks, useMobileVersion, Theme } from '@status-waku-voting/react-components'
 import { useHistory } from 'react-router'
 import { useVotingRooms } from '@status-waku-voting/proposal-hooks'
 
-type ProposalProps = {
+type ProposalListHeaderProps = {
+  votes: VotingRoom[]
+  theme: Theme
   wakuVoting: WakuVoting
+  tokenBalance: number
   account: string | null | undefined
 }
 
-export function Proposal({ wakuVoting, account }: ProposalProps) {
+function ProposalListHeader({ votes, theme, wakuVoting, tokenBalance, account }: ProposalListHeaderProps) {
-  const votes = useVotingRooms(wakuVoting)
-  const tokenBalance = useTokenBalance(account, wakuVoting)
   const [showNewVoteModal, setShowNewVoteModal] = useState(false)
   const [showConnectionModal, setShowConnectionModal] = useState(false)
-
   const { activateBrowserWallet } = useEthers()
   const history = useHistory()
-
   const ref = useRef<HTMLHeadingElement>(null)
   const mobileVersion = useMobileVersion(ref, 600)
 
@@ -42,37 +41,51 @@ export function Proposal({ wakuVoting, account }: ProposalProps) {
   }, [])
 
   return (
-    <ProposalWrapper ref={ref}>
+    <div ref={ref}>
       <NewVoteModal
-        theme={blueTheme}
+        theme={theme}
         availableAmount={tokenBalance}
         setShowModal={setShowNewVoteModal}
         showModal={showNewVoteModal}
         wakuVoting={wakuVoting}
       />
       {showConnectionModal && (
-        <Modal heading="Connect" setShowModal={setShowConnectionModal} theme={blueTheme}>
+        <Modal heading="Connect" setShowModal={setShowConnectionModal} theme={theme}>
           <Networks />
         </Modal>
       )}
-      {votes && votes?.length === 0 ? (
+      {votes?.length === 0 ? (
-        <VotingEmpty
+        <VotingEmpty account={account} theme={theme} onConnectClick={onConnectClick} onCreateClick={onCreateClick} />
-          account={account}
-          theme={blueTheme}
-          onConnectClick={onConnectClick}
-          onCreateClick={onCreateClick}
-        />
       ) : (
-        <ProposalVotesWrapper>
+        <ProposalHeader account={account} theme={theme} onConnectClick={onConnectClick} onCreateClick={onCreateClick} />
-          <ProposalHeader
-            account={account}
-            theme={blueTheme}
-            onConnectClick={onConnectClick}
-            onCreateClick={onCreateClick}
-          />
-          <ProposalList theme={blueTheme} wakuVoting={wakuVoting} votes={votes} availableAmount={tokenBalance} />
-        </ProposalVotesWrapper>
       )}
+    </div>
+  )
+}
+
+type ProposalProps = {
+  wakuVoting: WakuVoting
+  account: string | null | undefined
+}
+
+export function Proposal({ wakuVoting, account }: ProposalProps) {
+  const votes = useVotingRooms(wakuVoting)
+  const tokenBalance = useTokenBalance(account, wakuVoting)
+
+  return (
+    <ProposalWrapper>
+      <ProposalVotesWrapper>
+        <ProposalListHeader
+          votes={votes}
+          tokenBalance={tokenBalance}
+          theme={blueTheme}
+          account={account}
+          wakuVoting={wakuVoting}
+        />
+        {votes.length > 0 && (
+          <ProposalList theme={blueTheme} wakuVoting={wakuVoting} votes={votes} availableAmount={tokenBalance} />
+        )}
+      </ProposalVotesWrapper>
 
       <NotificationItem text={'Proposal you finalized will be settled after 10 confirmations.'} address={'#'} />
     </ProposalWrapper>

packages/proposal-components/src/components/ProposalHeader.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react'
+import React, { useEffect, useState } from 'react'
 import styled from 'styled-components'
 import { useEthers } from '@usedapp/core'
 import { Modal, Networks, CreateButton } from '@status-waku-voting/react-components'

packages/proposal-components/src/components/VotingEmpty.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { useEffect } from 'react'
 import styled from 'styled-components'
 import { CreateButton, Theme } from '@status-waku-voting/react-components'
 

packages/proposal-hooks/src/hooks/useVotingRooms.ts

@@ -15,11 +15,12 @@ export function useVotingRooms(wakuVoting: WakuVoting) {
         hash.current = newHash
       }
     }, 10000)
+    setVotes([])
     wakuVoting.getVotingRooms().then((e) => {
       setVotes(e)
       hash.current = id(e.map((votingRoom) => votingRoom.id.toString()).join(''))
     })
     return () => clearInterval(interval)
-  }, [])
+  }, [wakuVoting])
   return votes
 }

packages/react-components/src/hooks/useMobileVersion.ts

@@ -1,16 +1,27 @@
 import React, { useEffect, useState } from 'react'
-import { useRefSize } from './useRefSize'
 
 export function useMobileVersion(myRef: React.RefObject<HTMLHeadingElement>, sizeThreshold: number) {
   const [mobileVersion, setMobileVersion] = useState(false)
-  const { width } = useRefSize(myRef)
+
   useEffect(() => {
-    if (width < sizeThreshold && width > 0) {
+    const checkDimensions = () => {
-      setMobileVersion(true)
+      const width = window.innerWidth
-    } else {
+      if (width && width < sizeThreshold && width > 0) {
-      setMobileVersion(false)
+        if (mobileVersion === false) {
+          setMobileVersion(true)
+        }
+      } else {
+        if (mobileVersion === true) {
+          setMobileVersion(false)
+        }
+      }
     }
-  }, [width])
+    checkDimensions()
+    window.addEventListener('resize', checkDimensions)
+    return () => {
+      window.removeEventListener('resize', checkDimensions)
+    }
+  }, [myRef, mobileVersion])
 
   return mobileVersion
 }

packages/react-components/src/hooks/useRefSize.ts

@@ -4,16 +4,15 @@ export function useRefSize(myRef: React.RefObject<HTMLHeadingElement>) {
   const [width, setWidth] = useState(0)
   const [height, setHeight] = useState(0)
 
-  const setDimensions = () => {
-    if (myRef?.current?.offsetWidth) {
-      setWidth(myRef?.current?.offsetWidth)
-    }
-    if (myRef?.current?.offsetHeight) {
-      setHeight(myRef?.current?.offsetHeight)
-    }
-  }
-
   useEffect(() => {
+    const setDimensions = () => {
+      if (myRef?.current?.offsetWidth) {
+        setWidth(myRef?.current?.offsetWidth)
+      }
+      if (myRef?.current?.offsetHeight) {
+        setHeight(myRef?.current?.offsetHeight)
+      }
+    }
     setDimensions()
     window.addEventListener('resize', setDimensions)
     return () => {