diff --git a/web/components/contract-feed.tsx b/web/components/contract-feed.tsx index c17bf586..7e11ef73 100644 --- a/web/components/contract-feed.tsx +++ b/web/components/contract-feed.tsx @@ -1,12 +1,15 @@ // From https://tailwindui.com/components/application-ui/lists/feeds -import { Fragment } from 'react' +import { Fragment, useState } from 'react' import { ChatAltIcon, TagIcon, UserCircleIcon } from '@heroicons/react/solid' import { useBets } from '../hooks/use-bets' -import { Bet } from '../lib/firebase/bets' +import { Bet, createComment } from '../lib/firebase/bets' import dayjs from 'dayjs' import relativeTime from 'dayjs/plugin/relativeTime' import { Contract } from '../lib/firebase/contracts' import { OutcomeLabel } from './outcome-label' +import { useUser } from '../hooks/use-user' +import { User } from '../lib/firebase/users' +import { Linkify } from './linkify' dayjs.extend(relativeTime) const activity = [ @@ -55,44 +58,61 @@ function classNames(...classes) { function FeedComment(props: { activityItem: any }) { const { activityItem } = props + const { person, text, date, amount, outcome, createdTime } = activityItem return ( <>
- +
-
- - {activityItem.person.name} - -

- Commented {activityItem.date} + + {person.name} + {' '} + placed M$ {amount} on {' '} +

-

{activityItem.comment}

+

+ +

) } -function FeedBet(props: { activityItem: any }) { - const { activityItem } = props - const { amount, outcome, createdTime } = activityItem +function Timestamp(props: { time: number }) { + const { time } = props + return ( + + {dayjs(time).fromNow()} + + ) +} + +function FeedBet(props: { activityItem: any; user: User }) { + const { activityItem, user } = props + const { id, contractId, amount, outcome, createdTime } = activityItem + const isCreator = user.id == activityItem.userId + + const [comment, setComment] = useState('') + async function submitComment() { + await createComment(contractId, id, comment, user) + } return ( <>
@@ -107,14 +127,26 @@ function FeedBet(props: { activityItem: any }) {
- Someone placed M$ {amount} on{' '} - {' '} - - {dayjs(createdTime).fromNow()} - + {isCreator ? 'You' : 'Someone'}{' '} + placed M$ {amount} on {' '} + + {isCreator && ( + // Allow user to comment in an textarea if they are the creator +
+