From 503ea92c90b8c7b6787c769efdf48c883975f703 Mon Sep 17 00:00:00 2001
From: Szymon Szlachtowicz <38212223+Szymx95@users.noreply.github.com>
Date: Fri, 11 Jun 2021 15:19:48 +0200
Subject: [PATCH] Add voteFilter (#23)

* Add voteFilter

* Lint:fix

* Remove search bar

Co-authored-by: Szymon Szlachtowicz <szymon.szlachtowicz@Szymons-MacBook-Pro.local>
---
 src/components/hooks/useCommunities.ts |  2 +-
 src/components/votes/VotingCards.tsx   | 33 +++++++++++++++++++-------
 2 files changed, 25 insertions(+), 10 deletions(-)

diff --git a/src/components/hooks/useCommunities.ts b/src/components/hooks/useCommunities.ts
index 15eded4..345c79f 100644
--- a/src/components/hooks/useCommunities.ts
+++ b/src/components/hooks/useCommunities.ts
@@ -8,7 +8,7 @@ type APIFunction = (
   filterKeyword?: string
 ) => { page: number; communities: CommunityDetail[] }
 
-export function useCommunities(API: APIFunction, searchField: string, sortingType: number) {
+export function useCommunities(API: APIFunction, searchField?: string, sortingType?: number) {
   const [communities, setCommunities] = useState<CommunityDetail[]>([])
   const [page, setPage] = useState(0)
   const [increment, setIncrement] = useState(true)
diff --git a/src/components/votes/VotingCards.tsx b/src/components/votes/VotingCards.tsx
index 2a487e5..4c5533d 100644
--- a/src/components/votes/VotingCards.tsx
+++ b/src/components/votes/VotingCards.tsx
@@ -4,10 +4,11 @@ import { getCommunitiesUnderVote } from '../../helpers/apiMock'
 import { CommunityDetail, VotingSortingEnum } from '../../models/community'
 import styled from 'styled-components'
 import { FilterList } from '../Filter'
-import { Search } from '../Input'
 import { PageBar } from '../PageBar'
 import { useCommunities } from '../hooks/useCommunities'
 import { VotingSortingOptions } from '../../constants/SortingOptions'
+import { ButtonSecondary } from '../Button'
+import { Colors } from '../../constants/styles'
 
 interface VotingCardProps {
   community: CommunityDetail
@@ -44,19 +45,17 @@ function VotingCard({ community }: VotingCardProps) {
 }
 
 export function VotingCards() {
-  const [searchField, setSearchField] = useState('')
   const [sortingType, setSortingType] = useState(VotingSortingEnum.EndingSoonest)
-  const communities = useCommunities(getCommunitiesUnderVote, searchField, sortingType)
+  const communities = useCommunities(getCommunitiesUnderVote, undefined, sortingType)
 
   return (
     <div>
       <PageBar>
-        <Search
-          type="text"
-          placeholder="Search communities..."
-          value={searchField}
-          onChange={(e) => setSearchField(e.currentTarget.value)}
-        />
+        <VoteFilter>
+          <span>Vote types:</span>
+          <VoteType>Add</VoteType>
+          <VoteType>Remove</VoteType>
+        </VoteFilter>
         <FilterList value={sortingType} setValue={setSortingType} options={VotingSortingOptions} />
       </PageBar>
       <Voting>
@@ -72,3 +71,19 @@ const Voting = styled.div`
   display: flex;
   flex-direction: column;
 `
+
+const VoteFilter = styled.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: 257px;
+  color: ${Colors.VioletDark};
+`
+
+const VoteType = styled(ButtonSecondary)`
+  display: flex;
+  justify-content: space-between;
+  color: ${Colors.VioletDark};
+  line-height: 22px;
+  padding: 5px 12px;
+`