Extract CardCommunity (#98)

packages/DApp/src/components/Card.tsx

@@ -1,101 +1,4 @@
-import React, { useState } from 'react'
 import styled from 'styled-components'
-import { Colors } from '../constants/styles'
-import { CommunityDetail } from '../models/community'
-import { LinkExternal, LinkInternal } from './Link'
-import { Modal } from './Modal'
-import { VoteConfirmModal } from './card/VoteConfirmModal'
-import binIcon from '../assets/images/bin.svg'
-import { RemoveModal } from './card/RemoveModal'
-
-interface CardCommunityProps {
-  community: CommunityDetail
-  showRemoveButton?: boolean
-  customHeading?: string
-}
-
-export const CardCommunity = ({ community, showRemoveButton, customHeading }: CardCommunityProps) => {
-  const [showHistoryModal, setShowHistoryModal] = useState(false)
-  const [showRemoveModal, setShowRemoveModal] = useState(false)
-  const [showConfirmModal, setShowConfirmModal] = useState(false)
-
-  const isDisabled = community.votingHistory.length === 0
-
-  const setNewModal = (val: boolean) => {
-    setShowConfirmModal(val)
-    setShowRemoveModal(false)
-  }
-
-  return (
-    <CardCommunityBlock>
-      {showHistoryModal && (
-        <Modal heading={`${community.name} voting history`} setShowModal={setShowHistoryModal}>
-          <VoteHistoryTable>
-            <tbody>
-              <tr>
-                <VoteHistoryTableColumnCell>Date</VoteHistoryTableColumnCell>
-                <VoteHistoryTableColumnCell>Type</VoteHistoryTableColumnCell>
-                <VoteHistoryTableColumnCell>Result</VoteHistoryTableColumnCell>
-              </tr>
-              {community.votingHistory.map((vote) => {
-                return (
-                  <tr key={vote.ID}>
-                    <VoteHistoryTableCell>{vote.date.toLocaleDateString()}</VoteHistoryTableCell>
-                    <VoteHistoryTableCell>{vote.type}</VoteHistoryTableCell>
-                    <VoteHistoryTableCell>{vote.result}</VoteHistoryTableCell>
-                  </tr>
-                )
-              })}
-            </tbody>
-          </VoteHistoryTable>
-        </Modal>
-      )}
-      {showRemoveModal && (
-        <Modal
-          heading="Remove from directory?"
-          setShowModal={(val: boolean) => {
-            setShowRemoveModal(val)
-          }}
-        >
-          <RemoveModal community={community} availableAmount={549739700} setShowConfirmModal={setNewModal} />{' '}
-        </Modal>
-      )}
-      {showConfirmModal && (
-        <Modal setShowModal={setNewModal}>
-          <VoteConfirmModal community={community} selectedVote={{ verb: 'to remove' }} setShowModal={setNewModal} />
-        </Modal>
-      )}
-      <Community>
-        <CardLogoWrap>
-          {' '}
-          <CardLogo src={community.icon} alt={`${community.name} logo`} />
-        </CardLogoWrap>
-
-        <CommunityInfo>
-          <CardTop>
-            <CardHeading>{customHeading ? customHeading : community.name}</CardHeading>
-            {community.directoryInfo && showRemoveButton && <RemoveBtn onClick={() => setShowRemoveModal(true)} />}
-          </CardTop>
-          <CardText>{community.description}</CardText>
-          <CardTags>
-            {community.tags.map((tag, key) => (
-              <Tag key={key}>
-                <p>{tag}</p>
-              </Tag>
-            ))}
-          </CardTags>
-        </CommunityInfo>
-      </Community>
-      <CardLinks>
-        <LinkExternal>Visit community</LinkExternal>
-        <LinkExternal>Etherscan</LinkExternal>
-        <LinkInternal onClick={() => setShowHistoryModal(true)} disabled={isDisabled}>
-          Voting history
-        </LinkInternal>
-      </CardLinks>
-    </CardCommunityBlock>
-  )
-}
 
 export const Card = styled.div`
   display: flex;
@@ -108,13 +11,6 @@ export const Card = styled.div`
   }
 `
 
-export const CardCommunityBlock = styled.div`
-  display: flex;
-  flex-direction: column;
-  justify-content: space-between;
-  width: 100%;
-`
-
 export const CardCommunityWrap = styled.div`
   display: flex;
   align-items: stretch;
@@ -146,7 +42,6 @@ export const CardVoteWrap = styled.div`
     border-bottom: 1px solid #e0e0e0;
   }
 `
-
 export const CardVoteBlock = styled.div`
   display: flex;
   flex-direction: column;
@@ -154,96 +49,9 @@ export const CardVoteBlock = styled.div`
   width: 100%;
 `
 
-const Community = styled.div`
-  display: flex;
-  margin-bottom: 16px;
-`
-
-const CommunityInfo = styled.div`
-  display: flex;
-  flex-direction: column;
-`
-
-const CardLogoWrap = styled.div`
-  width: 64px !important;
-  height: 64px !important;
-  object-fit: cover;
-  margin-right: 16px;
-`
-const CardLogo = styled.img`
-  width: 64px !important;
-  height: 64px !important;
-  border-radius: 50%;
-`
-
 export const CardHeading = styled.h2`
   font-weight: bold;
   font-size: 17px;
   line-height: 24px;
   text-align: center;
 `
-
-const CardTop = styled.div`
-  display: flex;
-  align-items: center;
-  margin-bottom: 8px;
-  line-height: 24px;
-`
-
-const RemoveBtn = styled.button`
-  width: 16px;
-  height: 16px;
-  margin-left: 16px;
-  background-image: url(${binIcon});
-  background-size: cover;
-`
-
-const CardText = styled.p`
-  line-height: 22px;
-  margin-bottom: 8px;
-`
-
-const CardTags = styled.div`
-  display: flex;
-  flex-wrap: wrap;
-`
-const Tag = styled.div`
-  margin: 0 8px 8px 0;
-  padding: 0 10px;
-  border: 1px solid ${Colors.VioletDark};
-  box-sizing: border-box;
-  border-radius: 10px;
-  color: ${Colors.VioletDark};
-  font-weight: 500;
-  font-size: 12px;
-  line-height: 20px;
-`
-export const CardLinks = styled.div`
-  display: flex;
-  justify-content: space-between;
-  width: 100%;
-  font-size: 15px;
-  line-height: 22px;
-
-  @media (max-width: 768px) {
-    width: auto;
-    margin-left: 80px;
-  }
-`
-
-const VoteHistoryTable = styled.table`
-  width: 100%;
-`
-
-const VoteHistoryTableColumnCell = styled.td`
-  font-weight: bold;
-  padding-bottom: 24px;
-  padding-right: 112px;
-  width: 65px;
-`
-
-const VoteHistoryTableCell = styled.td`
-  width: 65px;
-  padding-bottom: 18px;
-  padding-right: 112px;
-`

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

@@ -0,0 +1,193 @@
+import React, { useState } from 'react'
+import styled from 'styled-components'
+import { Colors } from '../../constants/styles'
+import { CommunityDetail } 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'
+
+interface CardCommunityProps {
+  community: CommunityDetail
+  showRemoveButton?: boolean
+  customHeading?: string
+}
+
+export const CardCommunity = ({ community, showRemoveButton, customHeading }: CardCommunityProps) => {
+  const [showHistoryModal, setShowHistoryModal] = useState(false)
+  const [showRemoveModal, setShowRemoveModal] = useState(false)
+  const [showConfirmModal, setShowConfirmModal] = useState(false)
+
+  const isDisabled = community.votingHistory.length === 0
+
+  const setNewModal = (val: boolean) => {
+    setShowConfirmModal(val)
+    setShowRemoveModal(false)
+  }
+
+  return (
+    <CardCommunityBlock>
+      {showHistoryModal && (
+        <Modal heading={`${community.name} voting history`} setShowModal={setShowHistoryModal}>
+          <VoteHistoryTable>
+            <tbody>
+              <tr>
+                <VoteHistoryTableColumnCell>Date</VoteHistoryTableColumnCell>
+                <VoteHistoryTableColumnCell>Type</VoteHistoryTableColumnCell>
+                <VoteHistoryTableColumnCell>Result</VoteHistoryTableColumnCell>
+              </tr>
+              {community.votingHistory.map((vote) => {
+                return (
+                  <tr key={vote.ID}>
+                    <VoteHistoryTableCell>{vote.date.toLocaleDateString()}</VoteHistoryTableCell>
+                    <VoteHistoryTableCell>{vote.type}</VoteHistoryTableCell>
+                    <VoteHistoryTableCell>{vote.result}</VoteHistoryTableCell>
+                  </tr>
+                )
+              })}
+            </tbody>
+          </VoteHistoryTable>
+        </Modal>
+      )}
+      {showRemoveModal && (
+        <Modal
+          heading="Remove from directory?"
+          setShowModal={(val: boolean) => {
+            setShowRemoveModal(val)
+          }}
+        >
+          <RemoveModal community={community} availableAmount={549739700} setShowConfirmModal={setNewModal} />{' '}
+        </Modal>
+      )}
+      {showConfirmModal && (
+        <Modal setShowModal={setNewModal}>
+          <VoteConfirmModal community={community} selectedVote={{ verb: 'to remove' }} setShowModal={setNewModal} />
+        </Modal>
+      )}
+      <Community>
+        <CardLogoWrap>
+          {' '}
+          <CardLogo src={community.icon} alt={`${community.name} logo`} />
+        </CardLogoWrap>
+
+        <CommunityInfo>
+          <CardTop>
+            <CardHeading>{customHeading ? customHeading : community.name}</CardHeading>
+            {community.directoryInfo && showRemoveButton && <RemoveBtn onClick={() => setShowRemoveModal(true)} />}
+          </CardTop>
+          <CardText>{community.description}</CardText>
+          <CardTags>
+            {community.tags.map((tag, key) => (
+              <Tag key={key}>
+                <p>{tag}</p>
+              </Tag>
+            ))}
+          </CardTags>
+        </CommunityInfo>
+      </Community>
+      <CardLinks>
+        <LinkExternal>Visit community</LinkExternal>
+        <LinkExternal>Etherscan</LinkExternal>
+        <LinkInternal onClick={() => setShowHistoryModal(true)} disabled={isDisabled}>
+          Voting history
+        </LinkInternal>
+      </CardLinks>
+    </CardCommunityBlock>
+  )
+}
+
+export const CardCommunityBlock = styled.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  width: 100%;
+`
+
+const Community = styled.div`
+  display: flex;
+  margin-bottom: 16px;
+`
+
+const CommunityInfo = styled.div`
+  display: flex;
+  flex-direction: column;
+`
+
+const CardLogoWrap = styled.div`
+  width: 64px !important;
+  height: 64px !important;
+  object-fit: cover;
+  margin-right: 16px;
+`
+const CardLogo = styled.img`
+  width: 64px !important;
+  height: 64px !important;
+  border-radius: 50%;
+`
+
+const CardTop = styled.div`
+  display: flex;
+  align-items: center;
+  margin-bottom: 8px;
+  line-height: 24px;
+`
+
+const RemoveBtn = styled.button`
+  width: 16px;
+  height: 16px;
+  margin-left: 16px;
+  background-image: url(${binIcon});
+  background-size: cover;
+`
+
+const CardText = styled.p`
+  line-height: 22px;
+  margin-bottom: 8px;
+`
+
+const CardTags = styled.div`
+  display: flex;
+  flex-wrap: wrap;
+`
+const Tag = styled.div`
+  margin: 0 8px 8px 0;
+  padding: 0 10px;
+  border: 1px solid ${Colors.VioletDark};
+  box-sizing: border-box;
+  border-radius: 10px;
+  color: ${Colors.VioletDark};
+  font-weight: 500;
+  font-size: 12px;
+  line-height: 20px;
+`
+export const CardLinks = styled.div`
+  display: flex;
+  justify-content: space-between;
+  width: 100%;
+  font-size: 15px;
+  line-height: 22px;
+
+  @media (max-width: 768px) {
+    width: auto;
+    margin-left: 80px;
+  }
+`
+
+const VoteHistoryTable = styled.table`
+  width: 100%;
+`
+
+const VoteHistoryTableColumnCell = styled.td`
+  font-weight: bold;
+  padding-bottom: 24px;
+  padding-right: 112px;
+  width: 65px;
+`
+
+const VoteHistoryTableCell = styled.td`
+  width: 65px;
+  padding-bottom: 18px;
+  padding-right: 112px;
+`

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

@@ -1,7 +1,7 @@
 import React, { useState } from 'react'
 import styled from 'styled-components'
 import { CommunityDetail } from '../../models/community'
-import { CardCommunity } from '../Card'
+import { CardCommunity } from './CardCommunity'
 import { ButtonPrimary } from '../Button'
 import { VotePropose } from '../votes/VotePropose'
 import { ColumnFlexDiv } from '../../constants/styles'

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

@@ -1,7 +1,7 @@
 import React, { useState } from 'react'
 import styled from 'styled-components'
 import { ButtonPrimary } from '../Button'
-import { CardCommunity } from '../Card'
+import { CardCommunity } from './CardCommunity'
 import { Input } from '../Input'
 import { VotePropose } from '../votes/VotePropose'
 import { Warning } from '../votes/VoteWarning'

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

@@ -1,7 +1,7 @@
 import React from 'react'
 import { ColumnFlexDiv } from '../../constants/styles'
 import { CommunityDetail } from '../../models/community'
-import { CardCommunity } from '../Card'
+import { CardCommunity } from './CardCommunity'
 import { RemoveAmountPicker } from '../card/RemoveAmountPicker'
 
 interface RemoveModalProps {

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

@@ -1,5 +1,6 @@
 import React, { useState } from 'react'
-import { Card, CardCommunity, CardCommunityWrap, CardVoteWrap } from '../Card'
+import { Card, CardCommunityWrap, CardVoteWrap } from '../Card'
+import { CardCommunity } from '../card/CardCommunity'
 import { CardFeature } from '../card/CardFeature'
 import styled from 'styled-components'
 import { CommunityDetail, DirectorySortingEnum } from '../../models/community'
@@ -13,6 +14,7 @@ import { useConfig } from '../../providers/config'
 import { Colors } from '../../constants/styles'
 import { WeeklyFeature } from '../WeeklyFeature'
 import { DirectoryCardSkeleton } from './DirectoryCardSkeleton'
+
 interface DirectoryCardProps {
   community: CommunityDetail
 }

packages/DApp/src/components/skeleton/CommunitySkeleton.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import styled from 'styled-components'
-import { CardCommunityBlock, CardLinks } from '../Card'
+import { CardCommunityBlock, CardLinks } from '../card/CardCommunity'
 import { LinkExternal, LinkInternal } from '../Link'
 import { Skeleton } from '../skeleton/Skeleton'
 import { TagsSkeletonList } from '../skeleton/TagSkeleton'

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

@@ -1,6 +1,7 @@
 import React, { useState, useEffect } from 'react'
 import { DetailedVotingRoom } from '../../models/smartContract'
-import { Card, CardCommunity, CardCommunityWrap, CardVoteWrap } from '../Card'
+import { Card, CardCommunityWrap, CardVoteWrap } from '../Card'
+import { CardCommunity } from '../card/CardCommunity'
 import { CardVote } from './../card/CardVote/CardVote'
 
 interface VotingCardProps {