Add mobile feature routing (#150)

packages/DApp/src/componentsMobile/FeatureMobile.tsx

@@ -0,0 +1,49 @@
+import React, { useState } from 'react'
+import { CardCommunity } from '../components/card/CardCommunity'
+import { VotePropose } from '../components/votes/VotePropose'
+import styled from 'styled-components'
+import { useCommunities } from '../hooks/useCommunities'
+import { useParams } from 'react-router'
+import { ButtonPrimary } from '../components/Button'
+import { CommunitySkeleton } from '../components/skeleton/CommunitySkeleton'
+
+export function FeatureMobile() {
+  const { publicKey } = useParams<{ publicKey: string }>()
+  const [community] = useCommunities([publicKey])
+  const [proposingAmount, setProposingAmount] = useState(0)
+  const disabled = proposingAmount === 0
+
+  if (!community) {
+    return <CommunitySkeleton />
+  } else {
+    return (
+      <FeatureWrap>
+        <CardCommunity community={community} />
+        <VoteProposeWrap>
+          <VotePropose
+            availableAmount={60000000}
+            setProposingAmount={setProposingAmount}
+            proposingAmount={proposingAmount}
+            disabled={disabled}
+          />
+          <VoteConfirmBtn disabled={disabled}>Confirm vote to feature community</VoteConfirmBtn>
+        </VoteProposeWrap>
+      </FeatureWrap>
+    )
+  }
+}
+
+const FeatureWrap = styled.div`
+  padding: 20px;
+`
+
+const VoteProposeWrap = styled.div`
+  margin-top: 32px;
+  width: 100%;
+`
+
+const VoteConfirmBtn = styled(ButtonPrimary)`
+  width: 100%;
+  padding: 11px 0;
+  margin-top: 32px;
+`

packages/DApp/src/pagesMobile/DirectoryMobile.tsx

@@ -10,11 +10,14 @@ import { DirectoryCardSkeleton } from '../components/directory/DirectoryCardSkel
 import { SearchEmpty } from '../components/SearchEmpty'
 import { WeeklyFeature } from '../components/WeeklyFeature'
 import { FilterList } from '../components/Filter'
+import { useHistory } from 'react-router'
 
 export function DirectoryMobile() {
   const [filterKeyword, setFilterKeyword] = useState('')
   const [sortedBy, setSortedBy] = useState(DirectorySortingEnum.IncludedRecently)
   const communities = useDirectoryCommunities(filterKeyword, sortedBy)
+  const history = useHistory()
+
   return (
     <div>
       <TopBarMobile
@@ -37,7 +40,11 @@ export function DirectoryMobile() {
         <WeeklyFeature endDate={new Date('07/26/2021')} />
         {communities.map((community, idx) => {
           if (community) {
-            return <DirectoryCard key={community.publicKey} community={community} />
+            return (
+              <div key={community.publicKey} onClick={() => history.push(`/feature/${community.publicKey}`)}>
+                <DirectoryCard community={community} />
+              </div>
+            )
           } else {
             return <DirectoryCardSkeleton key={idx} />
           }

packages/DApp/src/pagesMobile/MobileRouter.tsx

@@ -7,13 +7,14 @@ import { VotingRoomMobile } from '../componentsMobile/VotingRoomMobile'
 import { DirectoryMobile } from './DirectoryMobile'
 import { InfoMobile } from './InfoMobile'
 import { VotesMobile } from './VotesMobile'
-
+import { FeatureMobile } from '../componentsMobile/FeatureMobile'
 export const MobileRouter = () => (
   <BrowserRouter>
     <PageContentMobile>
       <Switch>
         <Route exact path="/" render={() => <Redirect to="/votes" />} />
         <Route exact path="/votingRoom/:id" component={VotingRoomMobile} />
+        <Route exact path="/feature/:publicKey" component={FeatureMobile} />
         <Route exact path="/propose" component={ProposeMobile} />
         <Route exact path="/votes" component={VotesMobile} />
         <Route exact path="/directory" component={DirectoryMobile} />