feat(cases-list-card): display closest deadline

kleros · Dec 17, 2018 · a1bc04e · a1bc04e
1 parent 46ac46e
commit a1bc04e
Show file tree

Hide file tree

Showing 2 changed files with 49 additions and 2 deletions.
diff --git a/src/assets/images/hourglass.svg b/src/assets/images/hourglass.svg
diff --git a/src/components/cases-list-card.js b/src/components/cases-list-card.js
@@ -1,5 +1,7 @@
 import React, { useMemo } from 'react'
+import { ReactComponent as Hourglass } from '../assets/images/hourglass.svg'
 import { List } from 'antd'
+import TimeAgo from './time-ago'
 import TitledListCard from './titled-list-card'
 import styled from 'styled-components/macro'
 import { useDrizzle } from '../temp/drizzle-react-hooks'
@@ -17,6 +19,24 @@ const StyledListItem = styled(List.Item)`
     transform: translateY(-50%);
   }
 `
+const StyledDiv = styled.div`
+  background: whitesmoke;
+  padding: 30px 22px;
+  position: relative;
+  text-align: center;
+`
+const StyledDeadlineDiv = styled.div`
+  font-weight: medium;
+`
+const StyledTimeAgo = styled(TimeAgo)`
+  font-size: 24px;
+  font-weight: bold;
+`
+const StyledHourglass = styled(Hourglass)`
+  position: absolute;
+  right: 13px;
+  top: 13px;
+`
 const CasesListCard = () => {
   const { cacheCall, drizzleState, useCacheEvents } = useDrizzle()
   const draws = useCacheEvents(
@@ -41,8 +61,25 @@ const CasesListCard = () => {
               'disputes',
               d.returnValues._disputeID
             )
-            if (dispute) acc[dispute.period === 4 ? 'executed' : 'active']++
-            else acc.loading = true
+            if (dispute) {
+              acc[dispute.period === '4' ? 'executed' : 'active']++
+              if (dispute.period === '1' || dispute.period === '2') {
+                const subcourt = cacheCall(
+                  'KlerosLiquid',
+                  'getSubcourt',
+                  dispute.subcourtID
+                )
+                if (subcourt) {
+                  const deadline = new Date(
+                    (Number(dispute.lastPeriodChange) +
+                      Number(subcourt.timesPerPeriod[dispute.period])) *
+                      1000
+                  )
+                  if (!acc.deadline || deadline < acc.deadline)
+                    acc.deadline = deadline
+                } else acc.loading = true
+              }
+            } else acc.loading = true
           }
           return acc
         },
@@ -59,6 +96,13 @@ const CasesListCard = () => {
       <StyledListItem extra={String(disputes.executed)}>
         Executed
       </StyledListItem>
+      {disputes.deadline && (
+        <StyledDiv className="primary-color theme-color">
+          <StyledDeadlineDiv>Next voting deadline</StyledDeadlineDiv>
+          <StyledTimeAgo>{disputes.deadline}</StyledTimeAgo>
+          <StyledHourglass className="primary-fill" />
+        </StyledDiv>
+      )}
     </TitledListCard>
   )
 }