Closing soon: hide already closed, show close time

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: {
           </div>
         ) : showCloseTime ? (
           <div className="whitespace-nowrap">
-            <ClockIcon className="h-5 w-5 text-gray-400 inline" />{' '}
-            {dayjs(closeTime).format('MMM D')}
+            <ClockIcon className="h-5 w-5 -my-1 text-gray-500 inline" /> Closes{' '}
+            {fromNow(closeTime || 0)}
           </div>
         ) : (
           <div className="whitespace-nowrap">{formatMoney(truePool)} pool</div>

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 (
     <DateTimeTooltip time={time}>
       <span className="whitespace-nowrap text-gray-400 ml-1">
-        {dayjs(time).fromNow()}
+        {fromNow(time)}
       </span>
     </DateTimeTooltip>
   )
@@ -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,

web/components/contracts-list.tsx

@@ -52,7 +52,7 @@ export function ContractsGrid(props: {
           contract={contract}
           key={contract.id}
           // showHotVolume={showHotVolume}
-          // showCloseTime={showCloseTime}
+          showCloseTime={showCloseTime}
         />
       ))}
     </ul>
@@ -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' ? (
         <CreatorContractsGrid contracts={matches} />
       ) : (
-        <ContractsGrid contracts={matches} />
+        <ContractsGrid
+          contracts={matches}
+          showCloseTime={sort == 'close-date'}
+        />
       )}
     </div>
   )

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