diff --git a/packages/proposal-components/src/components/Proposal.tsx b/packages/proposal-components/src/components/Proposal.tsx index 7e2f6a5..5534996 100644 --- a/packages/proposal-components/src/components/Proposal.tsx +++ b/packages/proposal-components/src/components/Proposal.tsx @@ -1,21 +1,37 @@ -import React from 'react' +import React, { useEffect, useState } from 'react' import styled from 'styled-components' import { ProposalHeader } from './ProposalHeader' import { blueTheme } from '@status-waku-voting/react-components/dist/esm/src/style/themes' import { ProposalList } from './ProposalList' import { NotificationItem } from './NotificationItem' import { WakuVoting } from '@status-waku-voting/core' +import { VotingEmpty } from './VotingEmpty' type ProposalProps = { wakuVoting: WakuVoting } export function Proposal({ wakuVoting }: ProposalProps) { + const [votes, setVotes] = useState([]) + + useEffect(() => { + const interval = setInterval(async () => { + setVotes(await wakuVoting.getVotes()) + }, 10000) + return () => clearInterval(interval) + }, []) + return ( - - - {/* */} + {votes && votes?.length === 0 ? ( + + ) : ( + + + + + )} + ) @@ -31,3 +47,7 @@ const ProposalWrapper = styled.div` width: 100%; min-height: 100vh; ` +export const ProposalVotesWrapper = styled(ProposalWrapper)` + width: 100%; + padding: 0; +` diff --git a/packages/proposal-components/src/components/ProposalList.tsx b/packages/proposal-components/src/components/ProposalList.tsx index 1327992..e1bf19b 100644 --- a/packages/proposal-components/src/components/ProposalList.tsx +++ b/packages/proposal-components/src/components/ProposalList.tsx @@ -1,30 +1,20 @@ -import React, { useEffect, useState } from 'react' +import React from 'react' import styled from 'styled-components' import { Theme } from '@status-waku-voting/react-components' import { ProposalCard } from './ProposalCard' import { WakuVoting } from '@status-waku-voting/core' -import { VotingEmpty } from './VotingEmpty' type ProposalListProps = { theme: Theme wakuVoting: WakuVoting + votes: any[] } -export function ProposalList({ theme, wakuVoting }: ProposalListProps) { - const [votes, setVotes] = useState([]) - - useEffect(() => { - const interval = setInterval(async () => { - setVotes(await wakuVoting.getVotes()) - }, 10000) - return () => clearInterval(interval) - }, []) - +export function ProposalList({ theme, wakuVoting, votes }: ProposalListProps) { return ( {votes.map((vote, idx) => { return })} - {votes && votes?.length === 0 && } ) } diff --git a/packages/proposal-components/src/components/mobile/ProposalHeaderMobile.tsx b/packages/proposal-components/src/components/mobile/ProposalHeaderMobile.tsx index be993d4..640b3d2 100644 --- a/packages/proposal-components/src/components/mobile/ProposalHeaderMobile.tsx +++ b/packages/proposal-components/src/components/mobile/ProposalHeaderMobile.tsx @@ -60,6 +60,7 @@ const Header = styled.div` padding: 12px 16px 0; width: 100%; background: #f8faff; + z-index: 10; } ` diff --git a/packages/proposal-components/src/components/mobile/ProposalMainMobile.tsx b/packages/proposal-components/src/components/mobile/ProposalMainMobile.tsx index 5e8ff17..18fdbac 100644 --- a/packages/proposal-components/src/components/mobile/ProposalMainMobile.tsx +++ b/packages/proposal-components/src/components/mobile/ProposalMainMobile.tsx @@ -1,4 +1,4 @@ -import React from 'react' +import React, { useEffect, useState } from 'react' import { blueTheme } from '@status-waku-voting/react-components/dist/esm/src/style/themes' import { ProposalList } from '../ProposalList' import { VotingEmpty } from '../VotingEmpty' @@ -6,17 +6,32 @@ import { NotificationItem } from '../NotificationItem' import { ProposalHeaderMobile } from './ProposalHeaderMobile' import styled from 'styled-components' import { WakuVoting } from '@status-waku-voting/core' +import { ProposalVotesWrapper } from '../Proposal' type ProposalMainMobileProps = { wakuVoting: WakuVoting } export function ProposalMainMobile({ wakuVoting }: ProposalMainMobileProps) { + const [votes, setVotes] = useState([]) + + useEffect(() => { + const interval = setInterval(async () => { + setVotes(await wakuVoting.getVotes()) + }, 10000) + return () => clearInterval(interval) + }, []) + return ( - - - {/* */} + {votes && votes?.length === 0 ? ( + + ) : ( + + + + + )} )