diff --git a/web/components/contract-card.tsx b/web/components/contract-card.tsx
index 152f212c..9ac088a0 100644
--- a/web/components/contract-card.tsx
+++ b/web/components/contract-card.tsx
@@ -11,9 +11,11 @@ import {
import { Col } from './layout/col'
import { parseTags } from '../../common/util/parse'
import dayjs from 'dayjs'
-import { TrendingUpIcon, ClockIcon } from '@heroicons/react/solid'
+import { TrendingUpIcon } from '@heroicons/react/solid'
import { DateTimeTooltip } from './datetime-tooltip'
import { CompactTagsList } from './tags-list'
+import { ClockIcon } from '@heroicons/react/outline'
+import { fromNow } from '../lib/util/time'
export function ContractCard(props: {
contract: Contract
@@ -128,8 +130,8 @@ export function AbbrContractDetails(props: {
) : showCloseTime ? (
- {' '}
- {dayjs(closeTime).format('MMM D')}
+ Closes{' '}
+ {fromNow(closeTime || 0)}
) : (
{formatMoney(truePool)} pool
diff --git a/web/components/contract-feed.tsx b/web/components/contract-feed.tsx
index 4b3648c7..7bff5f59 100644
--- a/web/components/contract-feed.tsx
+++ b/web/components/contract-feed.tsx
@@ -1,9 +1,8 @@
// From https://tailwindui.com/components/application-ui/lists/feeds
-import { ReactChild, useState } from 'react'
+import { useState } from 'react'
import _ from 'lodash'
import {
BanIcon,
- ChatAltIcon,
CheckIcon,
DotsVerticalIcon,
LockClosedIcon,
@@ -14,9 +13,6 @@ import {
} from '@heroicons/react/solid'
import dayjs from 'dayjs'
-import relativeTime from 'dayjs/plugin/relativeTime'
-dayjs.extend(relativeTime)
-
import { OutcomeLabel } from './outcome-label'
import {
contractMetrics,
@@ -41,6 +37,7 @@ import { Comment, mapCommentsByBetId } from '../lib/firebase/comments'
import { JoinSpans } from './join-spans'
import Textarea from 'react-expanding-textarea'
import { outcome } from '../../common/contract'
+import { fromNow } from '../lib/util/time'
export function AvatarWithIcon(props: { username: string; avatarUrl: string }) {
const { username, avatarUrl } = props
@@ -98,7 +95,7 @@ function Timestamp(props: { time: number }) {
return (
- {dayjs(time).fromNow()}
+ {fromNow(time)}
)
@@ -434,7 +431,7 @@ function toFeedBet(bet: Bet) {
amount: bet.sale ? -bet.sale.amount : bet.amount,
outcome: bet.outcome,
createdTime: bet.createdTime,
- date: dayjs(bet.createdTime).fromNow(),
+ date: fromNow(bet.createdTime),
}
}
@@ -447,7 +444,7 @@ function toFeedComment(bet: Bet, comment: Comment) {
amount: bet.sale ? -bet.sale.amount : bet.amount,
outcome: bet.outcome,
createdTime: bet.createdTime,
- date: dayjs(bet.createdTime).fromNow(),
+ date: fromNow(bet.createdTime),
// Invariant: bet.comment exists
text: comment.text,
diff --git a/web/components/contracts-list.tsx b/web/components/contracts-list.tsx
index 7917d463..ed268867 100644
--- a/web/components/contracts-list.tsx
+++ b/web/components/contracts-list.tsx
@@ -52,7 +52,7 @@ export function ContractsGrid(props: {
contract={contract}
key={contract.id}
// showHotVolume={showHotVolume}
- // showCloseTime={showCloseTime}
+ showCloseTime={showCloseTime}
/>
))}
@@ -229,6 +229,8 @@ export function SearchableGrid(props: {
} else if (sort === 'close-date') {
matches = _.sortBy(matches, ({ volume24Hours }) => -1 * volume24Hours)
matches = _.sortBy(matches, (contract) => contract.closeTime)
+ // Hide contracts that have already closed
+ matches = matches.filter(({ closeTime }) => (closeTime || 0) > Date.now())
} else if (sort === 'most-traded') {
matches.sort(
(a, b) => contractMetrics(b).truePool - contractMetrics(a).truePool
@@ -281,7 +283,10 @@ export function SearchableGrid(props: {
) : !byOneCreator && sort === 'creator' ? (
) : (
-
+
)}
)
diff --git a/web/lib/util/time.ts b/web/lib/util/time.ts
new file mode 100644
index 00000000..a5844b34
--- /dev/null
+++ b/web/lib/util/time.ts
@@ -0,0 +1,7 @@
+import dayjs from 'dayjs'
+import relativeTime from 'dayjs/plugin/relativeTime'
+dayjs.extend(relativeTime)
+
+export function fromNow(time: number) {
+ return dayjs(time).fromNow()
+}