open.source/manifold
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Revert "Comment tips (#469)"

Browse Source 
This reverts commit e567782a7d.
This commit is contained in:
James Grugett 2022-06-17 16:31:21 -05:00
parent 7679849c7d
commit 83ded17625
15 changed files with 37 additions and 313 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
common/txn.ts
View File

@ -13,27 +13,9 @@ export type Txn = {
amount: number
token: 'M$' // | 'USD' | MarketOutcome
category: 'CHARITY' | 'TIP' // | 'BET'
// Any extra data
data?: { [key: string]: any }
category: 'CHARITY' // | 'BET' | 'TIP'
// Human-readable description
description?: string
}
export type SourceType = 'USER' | 'CONTRACT' | 'CHARITY' | 'BANK'
export type DonationTxn = Omit<Txn, 'data'> & {
fromType: 'USER'
toType: 'CHARITY'
category: 'CHARITY'
}
export type TipTxn = Txn & {
fromType: 'USER'
toType: 'USER'
category: 'TIP'
data: {
contractId: string
commentId: string
}
}

21
functions/src/transact.ts
View File

@ -11,17 +11,7 @@ export const transact = functions
const userId = context?.auth?.uid
if (!userId) return { status: 'error', message: 'Not authorized' }
const {
amount,
fromType,
fromId,
toId,
toType,
category,
token,
data: innerData,
description,
} = data
const { amount, fromType, fromId, toId, toType, description } = data
if (fromType !== 'USER')
return {
@ -35,7 +25,7 @@ export const transact = functions
message: 'Must be authenticated with userId equal to specified fromId.',
}
if (isNaN(amount) || !isFinite(amount))
if (amount <= 0 || isNaN(amount) || !isFinite(amount))
return { status: 'error', message: 'Invalid amount' }
// Run as transaction to prevent race conditions.
@ -79,10 +69,9 @@ export const transact = functions
toType,
amount,
category,
data: innerData,
token,
// TODO: Unhardcode once we have non-donation txns
token: 'M$',
category: 'CHARITY',
description,
})

4
web/components/charity/feed-items.tsx
View File

@ -1,11 +1,11 @@
import { DonationTxn } from 'common/txn'
import { Txn } from 'common/txn'
import { Avatar } from '../avatar'
import { useUserById } from 'web/hooks/use-users'
import { UserLink } from '../user-page'
import { manaToUSD } from '../../../common/util/format'
import { RelativeTimestamp } from '../relative-timestamp'
export function Donation(props: { txn: DonationTxn }) {
export function Donation(props: { txn: Txn }) {
const { txn } = props
const user = useUserById(txn.fromId)

2
web/components/contract/contract-overview.tsx
View File

@ -13,6 +13,7 @@ import {
NumericResolutionOrExpectation,
} from './contract-card'
import { Bet } from 'common/bet'
import { Comment } from 'common/comment'
import BetRow from '../bet-row'
import { AnswersGraph } from '../answers/answers-graph'
import { Contract } from 'common/contract'
@ -24,6 +25,7 @@ import { NumericGraph } from './numeric-graph'
export const ContractOverview = (props: {
contract: Contract
bets: Bet[]
comments: Comment[]
className?: string
}) => {
const { contract, bets, className } = props

7
web/components/contract/contract-tabs.tsx
View File

@ -7,16 +7,14 @@ import { ContractBetsTable, BetsSummary } from '../bets-list'
import { Spacer } from '../layout/spacer'
import { Tabs } from '../layout/tabs'
import { Col } from '../layout/col'
import { CommentTipMap } from 'web/hooks/use-tip-txns'
export function ContractTabs(props: {
contract: Contract
user: User | null | undefined
bets: Bet[]
comments: Comment[]
tips: CommentTipMap
}) {
const { contract, user, bets, comments, tips } = props
const { contract, user, bets, comments } = props
const { outcomeType } = contract
const userBets = user && bets.filter((bet) => bet.userId === user.id)
@ -26,7 +24,6 @@ export function ContractTabs(props: {
contract={contract}
bets={bets}
comments={comments}
tips={tips}
user={user}
mode="bets"
betRowClassName="!mt-0 xl:hidden"
@ -39,7 +36,6 @@ export function ContractTabs(props: {
contract={contract}
bets={bets}
comments={comments}
tips={tips}
user={user}
mode={
contract.outcomeType === 'FREE_RESPONSE'
@ -56,7 +52,6 @@ export function ContractTabs(props: {
contract={contract}
bets={bets}
comments={comments}
tips={tips}
user={user}
mode={'comments'}
betRowClassName="!mt-0 xl:hidden"

7
web/components/feed/activity-items.ts
View File

@ -6,7 +6,6 @@ import { getOutcomeProbability } from 'common/calculate'
import { Comment } from 'common/comment'
import { Contract, FreeResponseContract } from 'common/contract'
import { User } from 'common/user'
import { CommentTipMap } from 'web/hooks/use-tip-txns'
export type ActivityItem =
| DescriptionItem
@ -51,7 +50,6 @@ export type CommentThreadItem = BaseActivityItem & {
type: 'commentThread'
parentComment: Comment
comments: Comment[]
tips: CommentTipMap
bets: Bet[]
}
@ -60,7 +58,6 @@ export type AnswerGroupItem = BaseActivityItem & {
user: User | undefined | null
answer: Answer
comments: Comment[]
tips: CommentTipMap
bets: Bet[]
}
@ -106,7 +103,6 @@ function getAnswerAndCommentInputGroups(
function getCommentThreads(
bets: Bet[],
comments: Comment[],
tips: CommentTipMap,
contract: Contract
) {
const parentComments = comments.filter((comment) => !comment.replyToCommentId)
@ -118,7 +114,6 @@ function getCommentThreads(
comments: comments,
parentComment: comment,
bets: bets,
tips,
}))
return items
@ -137,7 +132,6 @@ export function getSpecificContractActivityItems(
contract: Contract,
bets: Bet[],
comments: Comment[],
tips: CommentTipMap,
user: User | null | undefined,
options: {
mode: 'comments' | 'bets' | 'free-response-comment-answer-groups'
@ -173,7 +167,6 @@ export function getSpecificContractActivityItems(
...getCommentThreads(
nonFreeResponseBets,
nonFreeResponseComments,
tips,
contract
)
)

5
web/components/feed/contract-activity.tsx
View File

@ -7,20 +7,18 @@ import { getSpecificContractActivityItems } from './activity-items'
import { FeedItems } from './feed-items'
import { User } from 'common/user'
import { useContractWithPreload } from 'web/hooks/use-contract'
import { CommentTipMap } from 'web/hooks/use-tip-txns'
export function ContractActivity(props: {
contract: Contract
bets: Bet[]
comments: Comment[]
tips: CommentTipMap
user: User | null | undefined
mode: 'comments' | 'bets' | 'free-response-comment-answer-groups'
contractPath?: string
className?: string
betRowClassName?: string
}) {
const { user, mode, tips, className, betRowClassName } = props
const { user, mode, className, betRowClassName } = props
const contract = useContractWithPreload(props.contract) ?? props.contract
@ -33,7 +31,6 @@ export function ContractActivity(props: {
contract,
bets,
comments,
tips,
user,
{ mode }
)

5
web/components/feed/feed-answer-comment-group.tsx
View File

@ -24,17 +24,15 @@ import { groupBy } from 'lodash'
import { User } from 'common/user'
import { useEvent } from 'web/hooks/use-event'
import { getDpmOutcomeProbability } from 'common/calculate-dpm'
import { CommentTipMap } from 'web/hooks/use-tip-txns'
export function FeedAnswerCommentGroup(props: {
contract: any
user: User | undefined | null
answer: Answer
comments: Comment[]
tips: CommentTipMap
bets: Bet[]
}) {
const { answer, contract, comments, tips, bets, user } = props
const { answer, contract, comments, bets, user } = props
const { username, avatarUrl, name, text } = answer
const [replyToUsername, setReplyToUsername] = useState('')
@ -216,7 +214,6 @@ export function FeedAnswerCommentGroup(props: {
smallAvatar={true}
truncate={false}
bets={bets}
tips={tips}
scrollAndOpenReplyInput={scrollAndOpenReplyInput}
treatFirstIndexEqually={true}
/>

39
web/components/feed/feed-comments.tsx
View File

@ -25,27 +25,17 @@ import { getProbability } from 'common/calculate'
import { LoadingIndicator } from 'web/components/loading-indicator'
import { PaperAirplaneIcon } from '@heroicons/react/outline'
import { track } from 'web/lib/service/analytics'
import { Tipper } from '../tipper'
import { CommentTipMap, CommentTips } from 'web/hooks/use-tip-txns'
export function FeedCommentThread(props: {
contract: Contract
comments: Comment[]
tips: CommentTipMap
parentComment: Comment
bets: Bet[]
truncate?: boolean
smallAvatar?: boolean
}) {
const {
contract,
comments,
bets,
tips,
truncate,
smallAvatar,
parentComment,
} = props
const { contract, comments, bets, truncate, smallAvatar, parentComment } =
props
const [showReply, setShowReply] = useState(false)
const [replyToUsername, setReplyToUsername] = useState('')
const betsByUserId = groupBy(bets, (bet) => bet.userId)
@ -74,7 +64,6 @@ export function FeedCommentThread(props: {
contract={contract}
commentsList={commentsList}
betsByUserId={betsByUserId}
tips={tips}
smallAvatar={smallAvatar}
truncate={truncate}
bets={bets}
@ -108,7 +97,6 @@ export function CommentRepliesList(props: {
contract: Contract
commentsList: Comment[]
betsByUserId: Dictionary<Bet[]>
tips: CommentTipMap
scrollAndOpenReplyInput: (comment: Comment) => void
bets: Bet[]
treatFirstIndexEqually?: boolean
@ -119,7 +107,6 @@ export function CommentRepliesList(props: {
contract,
commentsList,
betsByUserId,
tips,
truncate,
smallAvatar,
bets,
@ -147,7 +134,6 @@ export function CommentRepliesList(props: {
<FeedComment
contract={contract}
comment={comment}
tips={tips[comment.id]}
betsBySameUser={betsByUserId[comment.userId] ?? []}
onReplyClick={scrollAndOpenReplyInput}
probAtCreatedTime={
@ -171,7 +157,6 @@ export function CommentRepliesList(props: {
export function FeedComment(props: {
contract: Contract
comment: Comment
tips: CommentTips
betsBySameUser: Bet[]
probAtCreatedTime?: number
truncate?: boolean
@ -181,7 +166,6 @@ export function FeedComment(props: {
const {
contract,
comment,
tips,
betsBySameUser,
probAtCreatedTime,
truncate,
@ -273,17 +257,14 @@ export function FeedComment(props: {
moreHref={contractPath(contract)}
shouldTruncate={truncate}
/>
<Row className="mt-2 items-center gap-6 text-xs text-gray-500">
<Tipper comment={comment} tips={tips ?? {}} />
{onReplyClick && (
<button
className="font-bold hover:underline"
onClick={() => onReplyClick(comment)}
>
Reply
</button>
)}
</Row>
{onReplyClick && (
<button
className={'text-xs font-bold text-gray-500 hover:underline'}
onClick={() => onReplyClick(comment)}
>
Reply
</button>
)}
</div>
</Row>
)

157
web/components/tipper.tsx
View File

@ -1,157 +0,0 @@
import {
ChevronDoubleRightIcon,
ChevronLeftIcon,
ChevronRightIcon,
} from '@heroicons/react/solid'
import clsx from 'clsx'
import { Comment } from 'common/comment'
import { User } from 'common/user'
import { formatMoney } from 'common/util/format'
import { debounce, sumBy } from 'lodash'
import { useEffect, useMemo, useRef, useState } from 'react'
import { CommentTips } from 'web/hooks/use-tip-txns'
import { useUser } from 'web/hooks/use-user'
import { transact } from 'web/lib/firebase/fn-call'
import { Row } from './layout/row'
import { Tooltip } from './tooltip'
// xth triangle number * 5 = 5 + 10 + 15 + ... + (x * 5)
const quad = (x: number) => (5 / 2) * x * (x + 1)
// inverse (see https://math.stackexchange.com/questions/2041988/how-to-get-inverse-of-formula-for-sum-of-integers-from-1-to-nsee )
const invQuad = (y: number) => Math.sqrt((2 / 5) * y + 1 / 4) - 1 / 2
export function Tipper(prop: { comment: Comment; tips: CommentTips }) {
const { comment, tips } = prop
const me = useUser()
const myId = me?.id ?? ''
const savedTip = tips[myId] as number | undefined
// optimistically increase the tip count, but debounce the update
const [localTip, setLocalTip] = useState(savedTip ?? 0)
const initialized = useRef(false)
useEffect(() => {
if (savedTip && !initialized.current) {
setLocalTip(savedTip)
initialized.current = true
}
}, [savedTip])
const score = useMemo(() => {
const tipVals = Object.values({ ...tips, [myId]: localTip })
return sumBy(tipVals, invQuad)
}, [localTip, tips, myId])
// declare debounced function only on first render
const [saveTip] = useState(() =>
debounce(async (user: User, change: number) => {
if (change === 0) {
return
}
await transact({
amount: change,
fromId: user.id,
fromType: 'USER',
toId: comment.userId,
toType: 'USER',
token: 'M$',
category: 'TIP',
data: {
contractId: comment.contractId,
commentId: comment.id,
},
description: `${user.name} tipped M$ ${change} to ${comment.userName} for a comment`,
})
}, 1500)
)
// instant save on unrender
useEffect(() => () => void saveTip.flush(), [saveTip])
const changeTip = (tip: number) => {
setLocalTip(tip)
me && saveTip(me, tip - (savedTip ?? 0))
}
return (
<Row className="items-center gap-0.5">
<DownTip
value={localTip}
onChange={changeTip}
disabled={!me || localTip <= 0}
/>
<span className="font-bold">{Math.floor(score)} </span>
<UpTip
value={localTip}
onChange={changeTip}
disabled={!me || me.id === comment.userId}
/>
{localTip === 0 ? (
''
) : (
<span
className={clsx(
'font-semibold',
localTip > 0 ? 'text-primary' : 'text-red-400'
)}
>
({formatMoney(localTip)} tip)
</span>
)}
</Row>
)
}
function DownTip(prop: {
value: number
onChange: (tip: number) => void
disabled?: boolean
}) {
const { onChange, value, disabled } = prop
const marginal = 5 * invQuad(value)
return (
<Tooltip
className="tooltip-bottom"
text={!disabled && `Refund ${formatMoney(marginal)}`}
>
<button
className="flex h-max items-center hover:text-red-600 disabled:text-gray-300"
disabled={disabled}
onClick={() => onChange(value - marginal)}
>
<ChevronLeftIcon className="h-6 w-6" />
</button>
</Tooltip>
)
}
function UpTip(prop: {
value: number
onChange: (tip: number) => void
disabled?: boolean
}) {
const { onChange, value, disabled } = prop
const marginal = 5 * invQuad(value) + 5
return (
<Tooltip
className="tooltip-bottom"
text={!disabled && `Tip ${formatMoney(marginal)}`}
>
<button
className="hover:text-primary flex h-max items-center disabled:text-gray-300"
disabled={disabled}
onClick={() => onChange(value + marginal)}
>
{value >= quad(2) ? (
<ChevronDoubleRightIcon className="text-primary mx-1 h-6 w-6" />
) : value > 0 ? (
<ChevronRightIcon className="text-primary h-6 w-6" />
) : (
<ChevronRightIcon className="h-6 w-6" />
)}
</button>
</Tooltip>
)
}

16
web/components/tooltip.tsx
View File

@ -1,16 +0,0 @@
import clsx from 'clsx'
export function Tooltip(
props: {
text: string | false | undefined | null
} & JSX.IntrinsicElements['div']
) {
const { text, children, className } = props
return text ? (
<div className={clsx(className, 'tooltip z-10')} data-tip={text}>
{children}
</div>
) : (
<>{children}</>
)
}

4
web/hooks/use-charity-txns.ts
View File

@ -1,9 +1,9 @@
import { useEffect, useState } from 'react'
import { DonationTxn } from 'common/txn'
import { Txn } from 'common/txn'
import { listenForCharityTxns } from 'web/lib/firebase/txns'
export const useCharityTxns = (charityId: string) => {
const [txns, setTxns] = useState<DonationTxn[]>([])
const [txns, setTxns] = useState<Txn[]>([])
useEffect(() => {
return listenForCharityTxns(charityId, setTxns)

23
web/hooks/use-tip-txns.ts
View File

@ -1,23 +0,0 @@
import { TipTxn } from 'common/txn'
import { groupBy, mapValues, sumBy } from 'lodash'
import { useEffect, useMemo, useState } from 'react'
import { listenForTipTxns } from 'web/lib/firebase/txns'
export type CommentTips = { [userId: string]: number }
export type CommentTipMap = { [commentId: string]: CommentTips }
export function useTipTxns(contractId: string): CommentTipMap {
const [txns, setTxns] = useState<TipTxn[]>([])
useEffect(() => {
return listenForTipTxns(contractId, setTxns)
}, [contractId, setTxns])
return useMemo(() => {
const byComment = groupBy(txns, 'data.commentId')
return mapValues(byComment, (txns) => {
const bySender = groupBy(txns, 'fromId')
return mapValues(bySender, (t) => sumBy(t, 'amount'))
})
}, [txns])
}

25
web/lib/firebase/txns.ts
View File

@ -1,5 +1,6 @@
import { DonationTxn, TipTxn } from 'common/txn'
import { collection, orderBy, query, where } from 'firebase/firestore'
import { collection, query, where, orderBy } from 'firebase/firestore'
import { Txn } from 'common/txn'
import { db } from './init'
import { getValues, listenForValues } from './utils'
@ -15,27 +16,13 @@ const getCharityQuery = (charityId: string) =>
export function listenForCharityTxns(
charityId: string,
setTxns: (txns: DonationTxn[]) => void
setTxns: (txns: Txn[]) => void
) {
return listenForValues<DonationTxn>(getCharityQuery(charityId), setTxns)
return listenForValues<Txn>(getCharityQuery(charityId), setTxns)
}
const charitiesQuery = query(txnCollection, where('toType', '==', 'CHARITY'))
export function getAllCharityTxns() {
return getValues<DonationTxn>(charitiesQuery)
}
const getTipsQuery = (contractId: string) =>
query(
txnCollection,
where('category', '==', 'TIP'),
where('data.contractId', '==', contractId)
)
export function listenForTipTxns(
contractId: string,
setTxns: (txns: TipTxn[]) => void
) {
return listenForValues<TipTxn>(getTipsQuery(contractId), setTxns)
return getValues<Txn>(charitiesQuery)
}

15
web/pages/[username]/[contractSlug].tsx
View File

@ -41,7 +41,6 @@ import ContractEmbedPage from '../embed/[username]/[contractSlug]'
import { useBets } from 'web/hooks/use-bets'
import { AlertBox } from 'web/components/alert-box'
import { useTracking } from 'web/hooks/use-tracking'
import { CommentTipMap, useTipTxns } from 'web/hooks/use-tip-txns'
export const getStaticProps = fromPropz(getStaticPropz)
export async function getStaticPropz(props: {
@ -120,8 +119,6 @@ export function ContractPageContent(
// Sort for now to see if bug is fixed.
comments.sort((c1, c2) => c1.createdTime - c2.createdTime)
const tips = useTipTxns(contract.id)
const user = useUser()
const { width, height } = useWindowSize()
@ -195,7 +192,11 @@ export function ContractPageContent(
</button>
)}
<ContractOverview contract={contract} bets={bets} />
<ContractOverview
contract={contract}
bets={bets}
comments={comments ?? []}
/>
{isNumeric && (
<AlertBox
title="Warning"
@ -223,7 +224,6 @@ export function ContractPageContent(
contract={contract}
bets={bets}
comments={comments}
tips={tips}
/>
</div>
<Spacer h={12} />
@ -234,7 +234,6 @@ export function ContractPageContent(
contract={contract}
user={user}
bets={bets}
tips={tips}
comments={comments}
/>
</Col>
@ -291,9 +290,8 @@ function ContractTopTrades(props: {
contract: Contract
bets: Bet[]
comments: Comment[]
tips: CommentTipMap
}) {
const { contract, bets, comments, tips } = props
const { contract, bets, comments } = props
const commentsById = keyBy(comments, 'id')
const betsById = keyBy(bets, 'id')
@ -330,7 +328,6 @@ function ContractTopTrades(props: {
<FeedComment
contract={contract}
comment={commentsById[topCommentId]}
tips={tips[topCommentId]}
betsBySameUser={[betsById[topCommentId]]}
truncate={false}
smallAvatar={false}