Add voting history (#38)

src/components/Card.tsx

@@ -14,30 +14,54 @@ interface CardCommunityProps {
   community: CommunityDetail
 }
 
-export const CardCommunity = ({ community }: CardCommunityProps) => (
-  <CardInfoBlock>
-    <Community>
-      <CardLogo src={community.icon} alt={`${community.name} logo`} />
-      <CommunityInfo>
-        <CardHeading>{community.name}</CardHeading>
-        <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>Voting history</LinkInternal>
-    </CardLinks>
-  </CardInfoBlock>
-)
+export const CardCommunity = ({ community }: CardCommunityProps) => {
+  const [showHistoryModal, setShowHistoryModal] = useState(false)
+  return (
+    <CardInfoBlock>
+      {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>
+      )}
+      <Community>
+        <CardLogo src={community.icon} alt={`${community.name} logo`} />
+        <CommunityInfo>
+          <CardHeading>{community.name}</CardHeading>
+          <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)}>Voting history</LinkInternal>
+      </CardLinks>
+    </CardInfoBlock>
+  )
+}
 
 interface CardVoteProps {
   community: CommunityDetail
@@ -225,3 +249,20 @@ export const VoteBtn = styled(ButtonSecondary)`
 const VoteBtnFinal = styled(VoteBtn)`
   width: 100%;
 `
+
+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;
+`

src/helpers/apiMockData.ts

@@ -100,7 +100,32 @@ export const communities: Array<CommunityDetail> = [
       'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque interdum rutrum sodales. Nullam mattis fermentum libero, non volutpat.',
     numberOfMembers: 50,
     validForAddition: true,
-    votingHistory: [],
+    votingHistory: [
+      {
+        type: 'Add',
+        date: new Date('2021-03-16'),
+        result: 'Failed',
+        ID: 0,
+      },
+      {
+        type: 'Add',
+        date: new Date('2021-04-02'),
+        result: 'Passed',
+        ID: 1,
+      },
+      {
+        type: 'Feature',
+        date: new Date('2021-04-17'),
+        result: 'Failed',
+        ID: 2,
+      },
+      {
+        type: 'Remove',
+        date: new Date('2021-05-07'),
+        result: 'Passed',
+        ID: 3,
+      },
+    ],
     currentVoting: {
       timeLeft: 28800,
       type: 'Add',

src/models/community.ts

@@ -20,14 +20,13 @@ export type CommunityDetail = {
   numberOfMembers: number // amount of members in community
   validForAddition: boolean // boolean of wheather community can be added to directory
   votingHistory:
-    | [
-        // list of objects describing previous votes
-        {
-          date: Date // date of vote
-          type: 'Remove' | 'Add' // string with type of vote
-          result: 'Passed' | 'Failed' // string with vote result
-        }
-      ]
+    | // list of objects describing previous votes
+    {
+        date: Date // date of vote
+        type: 'Remove' | 'Add' | 'Feature' // string with type of vote
+        result: 'Passed' | 'Failed' // string with vote result
+        ID: number // ID of vote on smart contract
+      }[]
     | []
   currentVoting: CurrentVoting | undefined
   directoryInfo?: {