Hide top bar mobile (#138)

packages/DApp/src/components/directory/DirectoryCards.tsx

@@ -20,7 +20,7 @@ interface DirectoryCardProps {
   community: CommunityDetail
 }
 
-function DirectoryCard({ community }: DirectoryCardProps) {
+export function DirectoryCard({ community }: DirectoryCardProps) {
   const [customStyle, setCustomStyle] = useState(true)
 
   useEffect(() => {

packages/DApp/src/components/votes/VoteFilter.tsx

@@ -11,7 +11,7 @@ export type VoteFilterProps = {
 export const VoteFilter = ({ voteType, setVoteType }: VoteFilterProps) => {
   return (
     <VoteFilterBlock>
-      <span>Vote types:</span>
+      <VoteFilterHeading>Vote types:</VoteFilterHeading>
       <VoteTypeWrapper>
         <VoteType className={voteType == '' ? 'selected' : 'notSelected'} onClick={() => setVoteType('')}>
           All
@@ -35,7 +35,13 @@ export const VoteFilterBlock = styled.div`
   color: ${Colors.VioletDark};
 
   @media (max-width: 900px) {
-    display: none;
+    width: 450px;
+    margin-top: 16px;
+  }
+
+  @media (max-width: 500px) {
+    justify-content: center;
+    width: 100%;
   }
 `
 
@@ -52,6 +58,12 @@ export const VoteTypeWrapper = styled.div`
   }
 `
 
+const VoteFilterHeading = styled.span`
+  @media (max-width: 500px) {
+    display: none;
+  }
+`
+
 export const VoteType = styled(ButtonPrimary)`
   display: flex;
   justify-content: center;

packages/DApp/src/components/votes/VotingCards.tsx

@@ -11,7 +11,6 @@ import { useVotingCommunities } from '../../hooks/useVotingCommunities'
 import { VotingEmpty } from './VotingEmpty'
 import { SearchEmpty } from '../SearchEmpty'
 import { VoteFilter } from './VoteFilter'
-import { VoteFilterMobile } from '../../componentsMobile/VoteFilterMobile'
 import { VotingCardMobile } from '../../componentsMobile/VotingCardMobile'
 
 export function VotingCards() {
@@ -49,7 +48,6 @@ export function VotingCards() {
             <VoteFilter voteType={voteType} setVoteType={setVoteType} />
             <FilterList value={sortedBy} setValue={setSortedBy} options={VotingSortingOptions} />
           </PageDesktopBar>
-          <VoteFilterMobile voteType={voteType} setVoteType={setVoteType} />
         </VoteBar>
       </PageBar>
       {roomsToShow.map((room: any, idx) => {

packages/DApp/src/componentsMobile/TopBarMobile.tsx

@@ -1,18 +1,40 @@
-import React from 'react'
+import React, { ReactNode, useEffect, useRef, useState } from 'react'
 import styled from 'styled-components'
 import { Colors } from '../constants/styles'
-import { Header, StyledNavLink } from '../components/top/TopBar'
+import { StyledNavLink } from '../components/top/TopBar'
 import { PageInfo } from '../components/PageInfo'
 import { ConnectMobile } from './ConnectMobile'
 
 interface TopBarMobileProps {
   heading: string
   text: string
+  children?: ReactNode
 }
 
-export const TopBarMobile = ({ heading, text }: TopBarMobileProps) => {
+export const TopBarMobile = ({ heading, text, children }: TopBarMobileProps) => {
+  const scrollHeight = useRef(document.documentElement.scrollTop)
+  const [scrollingUp, setScrollingUp] = useState(0)
+
+  useEffect(() => {
+    const onScroll = () => {
+      const newScrollHeight = document.documentElement.scrollTop
+      setScrollingUp((prev) => {
+        const newPos = prev + scrollHeight.current - newScrollHeight
+
+        if (newPos > 0) return 0
+        if (newPos < -186) {
+          return -186
+        }
+        return newPos
+      })
+      scrollHeight.current = newScrollHeight
+    }
+    window.addEventListener('scroll', onScroll)
+    return () => window.removeEventListener('scroll', onScroll)
+  }, [])
+
   return (
-    <HeaderMobile>
+    <HeaderMobile style={{ top: scrollingUp }}>
       <HeaderWrapperMobile>
         <ConnectMobile />
         <PageInfo heading={heading} text={text} />
@@ -31,13 +53,18 @@ export const TopBarMobile = ({ heading, text }: TopBarMobileProps) => {
           </NavLinks>
         </NavigationMobile>
       </HeaderWrapperMobile>
+      {children}
     </HeaderMobile>
   )
 }
 
-const HeaderMobile = styled(Header)`
+const HeaderMobile = styled.header`
-  height: 186px;
+  position: fixed;
+  width: 100%;
+  background-color: ${Colors.GrayLight};
 
+  z-index: 100;
+  height: 186px;
   @media (max-width: 340px) {
     height: 205px;
   }
@@ -46,15 +73,14 @@ const HeaderMobile = styled(Header)`
 const HeaderWrapperMobile = styled.div`
   display: flex;
   flex-direction: column;
+  border-bottom: 1px solid rgba(189, 93, 226, 0.15);
   width: 100%;
   height: 100%;
-  position: relative;
 `
 
 const NavigationMobile = styled.nav`
   width: 100%;
   height: 41px;
-  position: absolute;
   bottom: 0;
 `
 
@@ -82,7 +108,6 @@ const StyledNavLinkMobile = styled(StyledNavLink)`
     content: '';
     width: 100%;
     height: 2px;
-    position: absolute;
     bottom: 2px;
     left: 50%;
     transform: translateX(-50%);

packages/DApp/src/componentsMobile/VoteFilterMobile.tsx

@@ -1,48 +0,0 @@
-import React from 'react'
-import styled from 'styled-components'
-import { VoteFilterBlock, VoteType, VoteTypeWrapper } from '../components/votes/VoteFilter'
-
-export type VoteFilterProps = {
-  voteType: string
-  setVoteType: (value: string) => void
-}
-
-export const VoteFilterMobile = ({ voteType, setVoteType }: VoteFilterProps) => {
-  return (
-    <VoteFilterBlockMobile>
-      <VoteFilterHeading>Vote types:</VoteFilterHeading>
-      <VoteTypeWrapper>
-        <VoteType className={voteType == '' ? 'selected' : 'notSelected'} onClick={() => setVoteType('')}>
-          All
-        </VoteType>
-        <VoteType className={voteType == 'Add' ? 'selected' : 'notSelected'} onClick={() => setVoteType('Add')}>
-          Add
-        </VoteType>
-        <VoteType className={voteType == 'Remove' ? 'selected' : 'notSelected'} onClick={() => setVoteType('Remove')}>
-          Remove
-        </VoteType>
-      </VoteTypeWrapper>
-    </VoteFilterBlockMobile>
-  )
-}
-
-const VoteFilterBlockMobile = styled(VoteFilterBlock)`
-  display: none;
-  width: 450px;
-  margin-top: 16px;
-
-  @media (max-width: 900px) {
-    display: flex;
-  }
-
-  @media (max-width: 500px) {
-    justify-content: center;
-    width: 100%;
-  }
-`
-
-const VoteFilterHeading = styled.span`
-  @media (max-width: 500px) {
-    display: none;
-  }
-`

packages/DApp/src/pagesMobile/DirectoryMobile.tsx

@@ -1,16 +1,65 @@
-import React from 'react'
+import React, { useState } from 'react'
-import { DirectoryCards } from '../components/directory/DirectoryCards'
+import { DirectoryCard } from '../components/directory/DirectoryCards'
 import { TopBarMobile } from '../componentsMobile/TopBarMobile'
+import { useDirectoryCommunities } from '../hooks/useDirectoryCommunities'
+import { DirectorySortingEnum } from '../models/community'
+import styled from 'styled-components'
+import { Search } from '../components/Input'
+import { DirectorySortingOptions } from '../constants/SortingOptions'
+import { DirectoryCardSkeleton } from '../components/directory/DirectoryCardSkeleton'
+import { SearchEmpty } from '../components/SearchEmpty'
+import { WeeklyFeature } from '../components/WeeklyFeature'
+import { FilterList } from '../components/Filter'
 
 export function DirectoryMobile() {
+  const [filterKeyword, setFilterKeyword] = useState('')
+  const [sortedBy, setSortedBy] = useState(DirectorySortingEnum.IncludedRecently)
+  const communities = useDirectoryCommunities(filterKeyword, sortedBy)
   return (
     <div>
       <TopBarMobile
         heading="Current directory"
         text="Vote on your favourite communities being included in 
        Weekly Featured Communities"
+      >
+        <PageBar>
+          <Search
+            type="text"
+            placeholder="Search communities..."
+            value={filterKeyword}
+            onChange={(e) => setFilterKeyword(e.currentTarget.value)}
           />
-      <DirectoryCards />
+          <FilterList value={sortedBy} setValue={setSortedBy} options={DirectorySortingOptions} />
+        </PageBar>
+      </TopBarMobile>
+      <WeeklyFeature endDate={new Date('07/26/2021')} />
+      <Voting>
+        {communities.map((community, idx) => {
+          if (community) {
+            return <DirectoryCard key={community.publicKey} community={community} />
+          } else {
+            return <DirectoryCardSkeleton key={idx} />
+          }
+        })}
+        {communities.length === 0 && <SearchEmpty />}
+      </Voting>
     </div>
   )
 }
+
+const Voting = styled.div`
+  padding-top: 176px;
+  display: flex;
+  flex-direction: column;
+`
+
+const PageBar = styled.div`
+  justify-content: space-between;
+  align-items: center;
+  display: flex;
+  width: 100%;
+  padding: 24px 0 16px;
+  background: #fff;
+  padding: 16px;
+  box-shadow: 0px 6px 6px -6px rgba(0, 0, 0, 0.15);
+`

packages/DApp/src/pagesMobile/MobileRouter.tsx

@@ -21,6 +21,7 @@ export const MobileRouter = () => (
 
 const PageContentMobile = styled.div`
   height: 100%;
-  padding: 196px 16px 16px;
+  padding: 0px 16px 16px;
+  padding-left: 0px;
   position: relative;
 `

packages/DApp/src/pagesMobile/VotesMobile.tsx

@@ -1,15 +1,74 @@
-import React from 'react'
+import React, { useState } from 'react'
-import { VotingCards } from '../components/votes/VotingCards'
+import { FilterList } from '../components/Filter'
+import { Search } from '../components/Input'
+import { SearchEmpty } from '../components/SearchEmpty'
+import { VoteFilter } from '../components/votes/VoteFilter'
+import { VotingCard } from '../components/votes/VotingCard'
+import { VotingEmpty } from '../components/votes/VotingEmpty'
 import { TopBarMobile } from '../componentsMobile/TopBarMobile'
+import { useVotingCommunities } from '../hooks/useVotingCommunities'
+import { VotingSortingEnum } from '../models/community'
+import styled from 'styled-components'
+import { VotingCardSkeleton } from '../components/votes/VotingCardSkeleton'
+import { VotingSortingOptions } from '../constants/SortingOptions'
 
 export function VotesMobile() {
+  const [sortedBy, setSortedBy] = useState(VotingSortingEnum.EndingSoonest)
+  const [voteType, setVoteType] = useState('')
+  const [filterKeyword, setFilterKeyword] = useState('')
+  const { roomsToShow, empty } = useVotingCommunities(filterKeyword, voteType, sortedBy)
+
   return (
     <div>
       <TopBarMobile
         heading="Ongoing Votes"
         text="Help curate the Status Communities directory by voting which communities should be included"
+      >
+        <VoteBar>
+          <PageDesktopBar>
+            <Search
+              type="text"
+              placeholder="Search communities..."
+              value={filterKeyword}
+              onChange={(e) => setFilterKeyword(e.currentTarget.value)}
             />
-      <VotingCards />
+            <FilterList value={sortedBy} setValue={setSortedBy} options={VotingSortingOptions} />
+          </PageDesktopBar>
+          <VoteFilter voteType={voteType} setVoteType={setVoteType} />
+        </VoteBar>
+      </TopBarMobile>
+      <VotingCardsWrapper>
+        {roomsToShow.map((room: any, idx) => {
+          if (room?.details) {
+            return <VotingCard key={idx} room={room} />
+          } else {
+            return <VotingCardSkeleton key={idx} />
+          }
+        })}
+        {roomsToShow.length === 0 && empty && <VotingEmpty />}
+        {roomsToShow.length === 0 && !empty && <SearchEmpty />}
+      </VotingCardsWrapper>
     </div>
   )
 }
+
+const VotingCardsWrapper = styled.div`
+  padding-top: 310px;
+`
+const PageDesktopBar = styled.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin: 0 auto;
+  width: 100%;
+`
+
+const VoteBar = styled.div`
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  padding: 24px 0 16px;
+  background: #fff;
+  padding: 16px;
+  box-shadow: 0px 6px 6px -6px rgba(0, 0, 0, 0.15);
+`