From 283edd861325727a05c1571b84f081b086aba058 Mon Sep 17 00:00:00 2001
From: Maria Rushkova <66270386+mrushkova@users.noreply.github.com>
Date: Tue, 14 Sep 2021 15:30:26 +0200
Subject: [PATCH] Hide header (#67)

---
 .../src/components/Proposal.tsx               | 28 ++++++++++++++++---
 .../src/components/ProposalList.tsx           | 16 ++---------
 .../mobile/ProposalHeaderMobile.tsx           |  1 +
 .../components/mobile/ProposalMainMobile.tsx  | 23 ++++++++++++---
 4 files changed, 47 insertions(+), 21 deletions(-)

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