From d1790007c05e09ebfd459275201653e1966a67f0 Mon Sep 17 00:00:00 2001 From: Szymon Szlachtowicz <38212223+Szymx95@users.noreply.github.com> Date: Tue, 14 Sep 2021 18:06:21 +0200 Subject: [PATCH] Refactor resizing hook (#69) --- .../src/components/Proposal.tsx | 3 ++- .../src/components/ProposalList.tsx | 2 +- .../components/ProposalVoteCard/VoteChart.tsx | 21 ++++------------ .../src/components/VotingEmpty.tsx | 23 +++++------------ .../components/mobile/ProposalMainMobile.tsx | 3 ++- .../src/hooks/useWakuProposal.ts | 4 ++- packages/proposal-page/src/index.tsx | 24 +++++------------- .../src/hooks/useMobileVersion.ts | 16 ++++++++++++ .../react-components/src/hooks/useRefSize.ts | 25 +++++++++++++++++++ packages/react-components/src/index.tsx | 4 +++ 10 files changed, 70 insertions(+), 55 deletions(-) create mode 100644 packages/react-components/src/hooks/useMobileVersion.ts create mode 100644 packages/react-components/src/hooks/useRefSize.ts diff --git a/packages/proposal-components/src/components/Proposal.tsx b/packages/proposal-components/src/components/Proposal.tsx index 98cf598..a582ffe 100644 --- a/packages/proposal-components/src/components/Proposal.tsx +++ b/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([]) + const [votes, setVotes] = useState([]) useEffect(() => { const interval = setInterval(async () => { diff --git a/packages/proposal-components/src/components/ProposalList.tsx b/packages/proposal-components/src/components/ProposalList.tsx index 12fff2f..ec923b5 100644 --- a/packages/proposal-components/src/components/ProposalList.tsx +++ b/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 ( diff --git a/packages/proposal-components/src/components/ProposalVoteCard/VoteChart.tsx b/packages/proposal-components/src/components/ProposalVoteCard/VoteChart.tsx index e77ade4..8544dfa 100644 --- a/packages/proposal-components/src/components/ProposalVoteCard/VoteChart.tsx +++ b/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(null) + const mobileVersion = useMobileVersion(ref, 600) const voteSum = votesFor + votesAgainst const graphWidth = (100 * votesAgainst) / voteSum @@ -58,7 +47,7 @@ export function VoteChart({ } return ( - + (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 ( - + There are no proposals at the moment! diff --git a/packages/proposal-components/src/components/mobile/ProposalMainMobile.tsx b/packages/proposal-components/src/components/mobile/ProposalMainMobile.tsx index 379b2b1..701cd19 100644 --- a/packages/proposal-components/src/components/mobile/ProposalMainMobile.tsx +++ b/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([]) + const [votes, setVotes] = useState([]) useEffect(() => { const interval = setInterval(async () => { diff --git a/packages/proposal-hooks/src/hooks/useWakuProposal.ts b/packages/proposal-hooks/src/hooks/useWakuProposal.ts index 8c05cd5..4d1b482 100644 --- a/packages/proposal-hooks/src/hooks/useWakuProposal.ts +++ b/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(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 diff --git a/packages/proposal-page/src/index.tsx b/packages/proposal-page/src/index.tsx index 1d3bd43..4c5f940 100644 --- a/packages/proposal-page/src/index.tsx +++ b/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(null) + const mobileVersion = useMobileVersion(ref, 600) return ( - + , 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 +} diff --git a/packages/react-components/src/hooks/useRefSize.ts b/packages/react-components/src/hooks/useRefSize.ts new file mode 100644 index 0000000..be656d4 --- /dev/null +++ b/packages/react-components/src/hooks/useRefSize.ts @@ -0,0 +1,25 @@ +import React, { useEffect, useState } from 'react' + +export function useRefSize(myRef: React.RefObject) { + 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 } +} diff --git a/packages/react-components/src/index.tsx b/packages/react-components/src/index.tsx index d55d7a4..905a3d7 100644 --- a/packages/react-components/src/index.tsx +++ b/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,