Add tablet removal button (#100)

packages/DApp/src/components/card/CardCommunity.tsx

@@ -1,21 +1,25 @@
 import React, { useState } from 'react'
 import styled from 'styled-components'
 import { Colors } from '../../constants/styles'
-import { CommunityDetail } from '../../models/community'
+import { CommunityDetail, CurrentVoting } from '../../models/community'
 import { LinkExternal, LinkInternal } from '../Link'
 import { Modal } from '../Modal'
 import { VoteConfirmModal } from './VoteConfirmModal'
 import binIcon from '../../assets/images/bin.svg'
 import { RemoveModal } from './RemoveModal'
 import { CardHeading } from '../Card'
+import { useEthers } from '@usedapp/core'
 
 interface CardCommunityProps {
   community: CommunityDetail
   showRemoveButton?: boolean
   customHeading?: string
+  currentVoting?: CurrentVoting
 }
 
-export const CardCommunity = ({ community, showRemoveButton, customHeading }: CardCommunityProps) => {
+export const CardCommunity = ({ community, showRemoveButton, customHeading, currentVoting }: CardCommunityProps) => {
+  const { account } = useEthers()
+
   const [showHistoryModal, setShowHistoryModal] = useState(false)
   const [showRemoveModal, setShowRemoveModal] = useState(false)
   const [showConfirmModal, setShowConfirmModal] = useState(false)
@@ -76,7 +80,9 @@ export const CardCommunity = ({ community, showRemoveButton, customHeading }: Ca
         <CommunityInfo>
           <CardTop>
             <CardHeading>{customHeading ? customHeading : community.name}</CardHeading>
-            {community.directoryInfo && showRemoveButton && <RemoveBtn onClick={() => setShowRemoveModal(true)} />}
+            {community.directoryInfo && showRemoveButton && !currentVoting && (
+              <RemoveBtn onClick={() => setShowRemoveModal(true)} disabled={!account} />
+            )}
           </CardTop>
           <CardText>{community.description}</CardText>
           <CardTags>
@@ -162,9 +168,14 @@ const RemoveBtn = styled.button`
 `
 
 const RemoveBtnMobile = styled(RemoveBtn)`
+  display: none;
+
   @media (max-width: 768px) {
     display: block;
     margin-left: 0;
+  
+    &:disabled {
+    filter: grayscale(1);
   }
 `
 

packages/DApp/src/components/card/CardFeature.tsx

@@ -3,17 +3,15 @@ import styled from 'styled-components'
 import { Colors, ColumnFlexDiv } from '../../constants/styles'
 import { addCommas } from '../../helpers/addCommas'
 import { CardHeading, CardVoteBlock } from '../Card'
-import { CommunityDetail } from '../../models/community'
+import { CommunityDetail, CurrentVoting } from '../../models/community'
 import { Modal } from '../Modal'
 import { FeatureModal } from './FeatureModal'
 import { VoteConfirmModal } from './VoteConfirmModal'
 import { OngoingVote } from './OngoingVote'
 import { useEthers } from '@usedapp/core'
-import { useContracts } from '../../hooks/useContracts'
-import { useContractCall } from '@usedapp/core'
-import { votingFromRoom } from '../../helpers/voting'
 import { VoteSubmitButton } from './VoteSubmitButton'
 import { VoteSendingBtn, VoteBtn } from '../Button'
+import { VotingRoom } from '../../models/smartContract'
 
 interface CardFeatureProps {
   community: CommunityDetail
@@ -21,9 +19,11 @@ interface CardFeatureProps {
   icon: string
   sum?: number
   timeLeft?: string
+  currentVoting?: CurrentVoting
+  room?: VotingRoom
 }
 
-export const CardFeature = ({ community, heading, icon, sum, timeLeft }: CardFeatureProps) => {
+export const CardFeature = ({ community, heading, icon, sum, timeLeft, currentVoting, room }: CardFeatureProps) => {
   const { account } = useEthers()
   const [showFeatureModal, setShowFeatureModal] = useState(false)
   const [showConfirmModal, setShowConfirmModal] = useState(false)
@@ -34,23 +34,6 @@ export const CardFeature = ({ community, heading, icon, sum, timeLeft }: CardFea
     setShowFeatureModal(false)
   }
 
-  const { votingContract } = useContracts()
-  let votingRoom = useContractCall({
-    abi: votingContract.interface,
-    address: votingContract.address,
-    method: 'getCommunityVoting',
-    args: [community.publicKey],
-  }) as any
-
-  if (votingRoom && (votingRoom.roomNumber.toNumber() === 0 || votingRoom.finalized == true)) {
-    votingRoom = undefined
-  }
-
-  let currentVoting
-  if (votingRoom) {
-    currentVoting = votingFromRoom(votingRoom)
-  }
-
   return (
     <CardVoteBlock style={{ backgroundColor: `${Colors.GrayLight}` }}>
       <CardHeading style={{ fontWeight: timeLeft ? 'normal' : 'bold', fontSize: timeLeft ? '15px' : '17px' }}>
@@ -84,11 +67,9 @@ export const CardFeature = ({ community, heading, icon, sum, timeLeft }: CardFea
         </FeatureBtn>
       </div>
 
-      {currentVoting && (
+      {currentVoting && room && (
         <FeatureBottom>
-          {showOngoingVote && (
-            <OngoingVote community={community} setShowOngoingVote={setShowOngoingVote} room={votingRoom} />
-          )}
+          {showOngoingVote && <OngoingVote community={community} setShowOngoingVote={setShowOngoingVote} room={room} />}
           <VoteSendingBtn onClick={() => setShowOngoingVote(true)}>Removal vote in progress</VoteSendingBtn>
           {currentVoting && currentVoting.timeLeft > 0 && <VoteSubmitButton vote={currentVoting} />}
         </FeatureBottom>

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

@@ -14,6 +14,9 @@ import { useConfig } from '../../providers/config'
 import { Colors } from '../../constants/styles'
 import { WeeklyFeature } from '../WeeklyFeature'
 import { DirectoryCardSkeleton } from './DirectoryCardSkeleton'
+import { useContracts } from '../../hooks/useContracts'
+import { useContractCall } from '@usedapp/core'
+import { votingFromRoom } from '../../helpers/voting'
 
 interface DirectoryCardProps {
   community: CommunityDetail
@@ -28,11 +31,28 @@ function DirectoryCard({ community }: DirectoryCardProps) {
     timeLeft = `${community.directoryInfo.untilNextFeature / (3600 * 24 * 7)} weeks left`
   }
 
+  const { votingContract } = useContracts()
+  let votingRoom = useContractCall({
+    abi: votingContract.interface,
+    address: votingContract.address,
+    method: 'getCommunityVoting',
+    args: [community.publicKey],
+  }) as any
+
+  if (votingRoom && (votingRoom.roomNumber.toNumber() === 0 || votingRoom.finalized == true)) {
+    votingRoom = undefined
+  }
+
+  let currentVoting
+  if (votingRoom) {
+    currentVoting = votingFromRoom(votingRoom)
+  }
+
   return (
     <Card>
       <CardCommunityWrap>
         &nbsp;
-        <CardCommunity community={community} showRemoveButton={true} />
+        <CardCommunity community={community} showRemoveButton={true} currentVoting={currentVoting} />
       </CardCommunityWrap>
       <CardVoteWrap style={{ backgroundColor: `${Colors.GrayLight}` }}>
         <CardFeature
@@ -41,6 +61,8 @@ function DirectoryCard({ community }: DirectoryCardProps) {
           icon={timeLeft ? '⏳' : '⭐'}
           sum={community.directoryInfo.featureVotes?.toNumber()}
           timeLeft={timeLeft}
+          currentVoting={currentVoting}
+          room={votingRoom}
         />
       </CardVoteWrap>
     </Card>