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() +}