Refactor resizing hook (#69)

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

@@ -6,13 +6,14 @@ import { ProposalList } from './ProposalList'
 import { NotificationItem } from './NotificationItem'
 import { WakuVoting } from '@status-waku-voting/core'
 import { VotingEmpty } from './VotingEmpty'
+import { VotingRoom } from '@status-waku-voting/core/dist/esm/src/types/PollType'
 
 type ProposalProps = {
   wakuVoting: WakuVoting
 }
 
 export function Proposal({ wakuVoting }: ProposalProps) {
-  const [votes, setVotes] = useState<any[]>([])
+  const [votes, setVotes] = useState<VotingRoom[]>([])
 
   useEffect(() => {
     const interval = setInterval(async () => {

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

@@ -9,7 +9,7 @@ import { VotingRoom } from '@status-waku-voting/core/dist/esm/src/types/PollType
 type ProposalListProps = {
   theme: Theme
   wakuVoting: WakuVoting
-  votes: any[]
+  votes: VotingRoom[]
 }
 export function ProposalList({ theme, wakuVoting, votes }: ProposalListProps) {
   return (

packages/proposal-components/src/components/ProposalVoteCard/VoteChart.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react'
+import React, { useRef } from 'react'
 import CountUp from 'react-countup'
 import styled from 'styled-components'
 import { addCommas } from '../../helpers/addCommas'
@@ -8,6 +8,7 @@ import crossIcon from '../../assets/svg/cross.svg'
 import crossWinnerIcon from '../../assets/svg/crossWinner.svg'
 import checkIcon from '../../assets/svg/check.svg'
 import checkWinnerIcon from '../../assets/svg/checkWinner.svg'
+import { useMobileVersion } from '@status-waku-voting/react-components'
 
 export interface VoteChartProps {
   votesFor: number
@@ -30,20 +31,8 @@ export function VoteChart({
   isAnimation,
   tabletMode,
 }: VoteChartProps) {
-  const [mobileVersion, setMobileVersion] = useState(false)
-
-  useEffect(() => {
-    const handleResize = () => {
-      if (window.innerWidth < 600) {
-        setMobileVersion(true)
-      } else {
-        setMobileVersion(false)
-      }
-    }
-    handleResize()
-    window.addEventListener('resize', handleResize)
-    return () => window.removeEventListener('resize', handleResize)
-  }, [])
+  const ref = useRef<HTMLHeadingElement>(null)
+  const mobileVersion = useMobileVersion(ref, 600)
 
   const voteSum = votesFor + votesAgainst
   const graphWidth = (100 * votesAgainst) / voteSum
@@ -58,7 +47,7 @@ export function VoteChart({
   }
 
   return (
-    <Votes>
+    <Votes ref={ref}>
       <VotesChart className={selectedVote || tabletMode ? '' : 'notModal'}>
         <VoteBox
           style={{

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

@@ -1,8 +1,8 @@
-import React, { useEffect, useState } from 'react'
+import React, { useEffect, useState, useRef } from 'react'
 import { useHistory } from 'react-router'
 import { useEthers } from '@usedapp/core'
 import styled from 'styled-components'
-import { CreateButton, Modal, Networks, Theme } from '@status-waku-voting/react-components'
+import { CreateButton, Modal, Networks, Theme, useMobileVersion } from '@status-waku-voting/react-components'
 import { ProposeModal } from './ProposeModal'
 import { ProposeVoteModal } from './ProposeVoteModal'
 import { WakuVoting } from '@status-waku-voting/core'
@@ -17,31 +17,20 @@ export function VotingEmpty({ wakuVoting, theme }: VotingEmptyProps) {
   const [selectConnect, setSelectConnect] = useState(false)
   const [showProposeModal, setShowProposeModal] = useState(false)
   const [showProposeVoteModal, setShowProposeVoteModal] = useState(false)
-  const [mobileVersion, setMobileVersion] = useState(false)
   const [title, setTitle] = useState('')
   const [text, setText] = useState('')
   const history = useHistory()
 
+  const ref = useRef<HTMLHeadingElement>(null)
+  const mobileVersion = useMobileVersion(ref, 600)
+
   const setNext = (val: boolean) => {
     setShowProposeVoteModal(val)
     setShowProposeModal(false)
   }
 
-  useEffect(() => {
-    const handleResize = () => {
-      if (window.innerWidth < 600) {
-        setMobileVersion(true)
-      } else {
-        setMobileVersion(false)
-      }
-    }
-    handleResize()
-    window.addEventListener('resize', handleResize)
-    return () => window.removeEventListener('resize', handleResize)
-  }, [])
-
   return (
-    <VotingEmptyWrap>
+    <VotingEmptyWrap ref={ref}>
       <EmptyWrap>
         <EmptyHeading>There are no proposals at the moment!</EmptyHeading>
         <EmptyText>

packages/proposal-components/src/components/mobile/ProposalMainMobile.tsx

@@ -7,13 +7,14 @@ import { ProposalHeaderMobile } from './ProposalHeaderMobile'
 import styled from 'styled-components'
 import { WakuVoting } from '@status-waku-voting/core'
 import { ProposalVotesWrapper } from '../Proposal'
+import { VotingRoom } from '@status-waku-voting/core/dist/esm/src/types/PollType'
 
 type ProposalMainMobileProps = {
   wakuVoting: WakuVoting
 }
 
 export function ProposalMainMobile({ wakuVoting }: ProposalMainMobileProps) {
-  const [votes, setVotes] = useState<any[]>([])
+  const [votes, setVotes] = useState<VotingRoom[]>([])
 
   useEffect(() => {
     const interval = setInterval(async () => {

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

@@ -3,10 +3,10 @@ import React, { useEffect, useState } from 'react'
 import { providers } from 'ethers'
 
 export function useWakuProposal() {
-  ;(window as any).ethereum.on('chainChanged', () => window.location.reload())
   const [waku, setWaku] = useState<WakuVoting | undefined>(undefined)
 
   useEffect(() => {
+    ;(window as any).ethereum.on('chainChanged', () => window.location.reload())
     const createWaku = async () => {
       const provider = new providers.Web3Provider((window as any).ethereum)
       const wak = await WakuVoting.create(
@@ -18,6 +18,8 @@ export function useWakuProposal() {
       setWaku(wak)
     }
     createWaku()
+
+    return () => (window as any).ethereum.removeListener('chainChanged', () => window.location.reload())
   }, [])
 
   return waku

packages/proposal-page/src/index.tsx

@@ -1,7 +1,7 @@
-import React, { useEffect, useState } from 'react'
+import React, { useRef } from 'react'
 import { useWakuProposal } from '@status-waku-voting/proposal-hooks'
 import { Proposal, ProposalMobile } from '@status-waku-voting/proposal-components'
-import { TopBar, GlobalStyle } from '@status-waku-voting/react-components'
+import { TopBar, GlobalStyle, useMobileVersion } from '@status-waku-voting/react-components'
 import votingIcon from './assets/images/voting.svg'
 import styled from 'styled-components'
 import { blueTheme } from '@status-waku-voting/react-components/dist/esm/src/style/themes'
@@ -25,25 +25,13 @@ const config = {
 }
 
 function Proposals() {
-  const { account, library, activateBrowserWallet, deactivate } = useEthers()
+  const { account, activateBrowserWallet, deactivate } = useEthers()
   const waku = useWakuProposal()
-  const [mobileVersion, setMobileVersion] = useState(false)
-
-  useEffect(() => {
-    const handleResize = () => {
-      if (window.innerWidth < 600) {
-        setMobileVersion(true)
-      } else {
-        setMobileVersion(false)
-      }
-    }
-    handleResize()
-    window.addEventListener('resize', handleResize)
-    return () => window.removeEventListener('resize', handleResize)
-  }, [])
+  const ref = useRef<HTMLHeadingElement>(null)
+  const mobileVersion = useMobileVersion(ref, 600)
 
   return (
-    <Wrapper>
+    <Wrapper ref={ref}>
       <TopBar
         logo={votingIcon}
         title={'Proposals Dapp'}

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

@@ -0,0 +1,16 @@
+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) {
+      setMobileVersion(true)
+    } else {
+      setMobileVersion(false)
+    }
+  }, [width])
+
+  return mobileVersion
+}

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

@@ -0,0 +1,25 @@
+import React, { useEffect, useState } from 'react'
+
+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(() => {
+    setDimensions()
+    window.addEventListener('resize', setDimensions)
+    return () => {
+      window.removeEventListener('resize', setDimensions)
+    }
+  }, [myRef])
+
+  return { width, height }
+}

packages/react-components/src/index.tsx

@@ -14,7 +14,11 @@ import dappIcon from './assets/svg/dapp.svg'
 import metamaskIcon from './assets/metamask.png'
 import statusIcon from './assets/svg/status.svg'
 import themes, { Theme } from './style/themes'
+import { useRefSize } from './hooks/useRefSize'
+import { useMobileVersion } from './hooks/useMobileVersion'
 export {
+  useMobileVersion,
+  useRefSize,
   Modal,
   Input,
   Networks,