From 3a397ce36d7a177bc2457c837317ddae62b526e6 Mon Sep 17 00:00:00 2001
From: Szymon Szlachtowicz <38212223+Szymx95@users.noreply.github.com>
Date: Fri, 23 Jul 2021 12:40:16 +0200
Subject: [PATCH] Add mobile feature routing (#150)

---
 .../src/componentsMobile/FeatureMobile.tsx    | 49 +++++++++++++++++++
 .../DApp/src/pagesMobile/DirectoryMobile.tsx  |  9 +++-
 .../DApp/src/pagesMobile/MobileRouter.tsx     |  3 +-
 3 files changed, 59 insertions(+), 2 deletions(-)
 create mode 100644 packages/DApp/src/componentsMobile/FeatureMobile.tsx

diff --git a/packages/DApp/src/componentsMobile/FeatureMobile.tsx b/packages/DApp/src/componentsMobile/FeatureMobile.tsx
new file mode 100644
index 0000000..ace5fa6
--- /dev/null
+++ b/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;
+`
diff --git a/packages/DApp/src/pagesMobile/DirectoryMobile.tsx b/packages/DApp/src/pagesMobile/DirectoryMobile.tsx
index 7401822..66756d9 100644
--- a/packages/DApp/src/pagesMobile/DirectoryMobile.tsx
+++ b/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} />
           }
diff --git a/packages/DApp/src/pagesMobile/MobileRouter.tsx b/packages/DApp/src/pagesMobile/MobileRouter.tsx
index 4071e27..cb6c1cb 100644
--- a/packages/DApp/src/pagesMobile/MobileRouter.tsx
+++ b/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} />