Show all bets in a feed-like manner

web/components/contract-feed.tsx

@@ -1,6 +1,12 @@
 // From https://tailwindui.com/components/application-ui/lists/feeds
 import { Fragment } from 'react'
 import { ChatAltIcon, TagIcon, UserCircleIcon } from '@heroicons/react/solid'
+import { useBets } from '../hooks/use-bets'
+import { Bet } from '../lib/firebase/bets'
+import dayjs from 'dayjs'
+import relativeTime from 'dayjs/plugin/relativeTime'
+import { Contract } from '../lib/firebase/contracts'
+dayjs.extend(relativeTime)
 
 const activity = [
   {
@@ -14,10 +20,10 @@ const activity = [
     date: '6d ago',
   },
   {
-    id: 2,
+    id: 'hifadsdf',
-    type: 'assignment',
+    type: 'bet',
-    person: { name: 'Hilary Mahy', href: '#' },
+    outcome: 'YES',
-    assigned: { name: 'Kristin Watson', href: '#' },
+    amount: 30,
     date: '2d ago',
   },
   {
@@ -83,8 +89,9 @@ function FeedComment(props: { activityItem: any }) {
   )
 }
 
-function FeedAssignment(props: { activityItem: any }) {
+function FeedBet(props: { activityItem: any }) {
   const { activityItem } = props
+  const { amount, outcome, createdTime } = activityItem
   return (
     <>
       <div>
@@ -99,20 +106,14 @@ function FeedAssignment(props: { activityItem: any }) {
       </div>
       <div className="min-w-0 flex-1 py-1.5">
         <div className="text-sm text-gray-500">
-          <a
+          <span className="text-gray-900">Someone</span> placed M$ {amount} on{' '}
-            href={activityItem.person.href}
+          {outcome}{' '}
-            className="font-medium text-gray-900"
+          <span
+            className="whitespace-nowrap"
+            title={dayjs(createdTime).format('MMM D, h:mma')}
           >
-            {activityItem.person.name}
+            {dayjs(createdTime).fromNow()}
-          </a>{' '}
+          </span>
-          assigned{' '}
-          <a
-            href={activityItem.assigned.href}
-            className="font-medium text-gray-900"
-          >
-            {activityItem.assigned.name}
-          </a>{' '}
-          <span className="whitespace-nowrap">{activityItem.date}</span>
         </div>
       </div>
     </>
@@ -171,14 +172,34 @@ function FeedTags(props: { activityItem: any }) {
   )
 }
 
-export function ContractFeed() {
+function toFeedBet(bet: Bet) {
+  return {
+    id: bet.id,
+    type: 'bet',
+    amount: bet.amount,
+    outcome: bet.outcome,
+    createdTime: bet.createdTime,
+    date: dayjs(bet.createdTime).fromNow(),
+  }
+}
+
+export function ContractFeed(props: { contract: Contract }) {
+  const { contract } = props
+  const { id } = contract
+
+  let bets = useBets(id)
+  if (bets === 'loading') bets = []
+
+  // const allItems = [...bets.map(toFeedBet), ...activity]
+  const allItems = bets.map(toFeedBet)
+
   return (
     <div className="flow-root">
       <ul role="list" className="-mb-8">
-        {activity.map((activityItem, activityItemIdx) => (
+        {allItems.map((activityItem, activityItemIdx) => (
           <li key={activityItem.id}>
             <div className="relative pb-8">
-              {activityItemIdx !== activity.length - 1 ? (
+              {activityItemIdx !== allItems.length - 1 ? (
                 <span
                   className="absolute top-5 left-5 -ml-px h-full w-0.5 bg-gray-200"
                   aria-hidden="true"
@@ -187,8 +208,8 @@ export function ContractFeed() {
               <div className="relative flex items-start space-x-3">
                 {activityItem.type === 'comment' ? (
                   <FeedComment activityItem={activityItem} />
-                ) : activityItem.type === 'assignment' ? (
+                ) : activityItem.type === 'bet' ? (
-                  <FeedAssignment activityItem={activityItem} />
+                  <FeedBet activityItem={activityItem} />
                 ) : activityItem.type === 'tags' ? (
                   <FeedTags activityItem={activityItem} />
                 ) : null}

web/components/contract-overview.tsx

@@ -15,6 +15,7 @@ import dayjs from 'dayjs'
 import { Linkify } from './linkify'
 import clsx from 'clsx'
 import { ContractDetails, ResolutionOrChance } from './contract-card'
+import { ContractFeed } from './contract-feed'
 
 function ContractCloseTime(props: { contract: Contract }) {
   const closeTime = props.contract.closeTime
@@ -150,6 +151,10 @@ export const ContractOverview = (props: {
 
       <ContractDescription contract={contract} isCreator={isCreator} />
 
+      <Spacer h={12} />
+
+      <ContractFeed contract={contract} />
+
       {/* Show a delete button for contracts without any trading */}
       {isCreator && truePool === 0 && (
         <>