Hide header (#67)

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<any[]>([])
+
+  useEffect(() => {
+    const interval = setInterval(async () => {
+      setVotes(await wakuVoting.getVotes())
+    }, 10000)
+    return () => clearInterval(interval)
+  }, [])
+
   return (
     <ProposalWrapper>
-      <ProposalHeader theme={blueTheme} wakuVoting={wakuVoting} />
-      <ProposalList theme={blueTheme} wakuVoting={wakuVoting} />
-      {/* <VotingEmpty theme={blueTheme} /> */}
+      {votes && votes?.length === 0 ? (
+        <VotingEmpty wakuVoting={wakuVoting} theme={blueTheme} />
+      ) : (
+        <ProposalVotesWrapper>
+          <ProposalHeader theme={blueTheme} wakuVoting={wakuVoting} />
+          <ProposalList theme={blueTheme} wakuVoting={wakuVoting} votes={votes} />
+        </ProposalVotesWrapper>
+      )}
+
       <NotificationItem text={'Proposal you finalized will be settled after 10 confirmations.'} address={'#'} />
     </ProposalWrapper>
   )
@@ -31,3 +47,7 @@ const ProposalWrapper = styled.div`
   width: 100%;
   min-height: 100vh;
 `
+export const ProposalVotesWrapper = styled(ProposalWrapper)`
+  width: 100%;
+  padding: 0;
+`

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<any[]>([])
-
-  useEffect(() => {
-    const interval = setInterval(async () => {
-      setVotes(await wakuVoting.getVotes())
-    }, 10000)
-    return () => clearInterval(interval)
-  }, [])
-
+export function ProposalList({ theme, wakuVoting, votes }: ProposalListProps) {
   return (
     <List>
       {votes.map((vote, idx) => {
         return <ProposalCard heading={vote[2]} text={vote[3]} address={'#'} theme={theme} key={idx} id={idx} />
       })}
-      {votes && votes?.length === 0 && <VotingEmpty wakuVoting={wakuVoting} theme={theme} />}
     </List>
   )
 }

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;
   }
 `
 

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<any[]>([])
+
+  useEffect(() => {
+    const interval = setInterval(async () => {
+      setVotes(await wakuVoting.getVotes())
+    }, 10000)
+    return () => clearInterval(interval)
+  }, [])
+
   return (
     <ProposalWrapper>
-      <ProposalHeaderMobile theme={blueTheme} />
-      <ProposalList theme={blueTheme} wakuVoting={wakuVoting} />
-      {/* <VotingEmpty theme={blueTheme} /> */}
+      {votes && votes?.length === 0 ? (
+        <VotingEmpty wakuVoting={wakuVoting} theme={blueTheme} />
+      ) : (
+        <ProposalVotesWrapper>
+          <ProposalHeaderMobile theme={blueTheme} />
+          <ProposalList theme={blueTheme} wakuVoting={wakuVoting} votes={votes} />
+        </ProposalVotesWrapper>
+      )}
       <NotificationItem text={'Proposal you finalized will be settled after 10 confirmations.'} address={'#'} />
     </ProposalWrapper>
   )