From 34340507693ccc0db8bbacd67917335ea9879191 Mon Sep 17 00:00:00 2001 From: Ian Philips Date: Wed, 29 Mar 2023 16:24:32 -0600 Subject: [PATCH] Consolidate comment code, add market creator badge --- web/components/feed/feed-comments.tsx | 131 ++++++++++++++------------ web/components/widgets/user-link.tsx | 51 ++++++++-- web/lib/icons/scales-icon.tsx | 16 ++++ 3 files changed, 132 insertions(+), 66 deletions(-) create mode 100644 web/lib/icons/scales-icon.tsx diff --git a/web/components/feed/feed-comments.tsx b/web/components/feed/feed-comments.tsx index 49cbb07b35..4cf37b5d59 100644 --- a/web/components/feed/feed-comments.tsx +++ b/web/components/feed/feed-comments.tsx @@ -1,4 +1,4 @@ -import React, { memo, useEffect, useRef, useState } from 'react' +import React, { memo, ReactNode, useEffect, useRef, useState } from 'react' import { Editor } from '@tiptap/react' import { useRouter } from 'next/router' import clsx from 'clsx' @@ -103,29 +103,27 @@ export function FeedCommentThread(props: { ) } - -export const ParentFeedComment = memo(function ParentFeedComment(props: { +export const FeedComment = memo(function FeedComment(props: { contract: Contract comment: ContractComment highlighted?: boolean showLike?: boolean - seeReplies: boolean - numComments: number onReplyClick?: (comment: ContractComment) => void - onSeeReplyClick: () => void + children?: ReactNode + className?: string }) { const { contract, + className, comment, highlighted, showLike, onReplyClick, - onSeeReplyClick, - seeReplies, - numComments, + children, } = props const { userUsername, userAvatarUrl } = comment const commentRef = useRef(null) + const marketCreator = contract.creatorId === comment.userId useEffect(() => { if (highlighted && commentRef.current) { @@ -133,24 +131,26 @@ export const ParentFeedComment = memo(function ParentFeedComment(props: { } }, [highlighted]) - const commentKind = - userUsername === 'ManifoldDream' ? 'ub-dream-comment' : null return ( - + - - + + {children} void + onSeeReplyClick: () => void +}) { + const { + contract, + comment, + highlighted, + showLike, + onReplyClick, + onSeeReplyClick, + seeReplies, + numComments, + } = props + const { userUsername } = comment + const commentRef = useRef(null) + + useEffect(() => { + if (highlighted && commentRef.current) { + commentRef.current.scrollIntoView(true) + } + }, [highlighted]) + + const commentKind = userUsername === 'ManifoldDream' ? 'ub-dream-comment' : '' + return ( + + + + ) +}) + function HideableContent(props: { comment: ContractComment }) { const { comment } = props const { text, content } = comment @@ -267,44 +315,6 @@ export function CommentActions(props: { ) } -export const FeedComment = memo(function FeedComment(props: { - contract: Contract - comment: ContractComment - highlighted?: boolean - showLike?: boolean - onReplyClick?: (comment: ContractComment) => void -}) { - const { contract, comment, highlighted, showLike, onReplyClick } = props - const { userUsername, userAvatarUrl } = comment - const commentRef = useRef(null) - - useEffect(() => { - if (highlighted && commentRef.current) { - commentRef.current.scrollIntoView(true) - } - }, [highlighted]) - - return ( - - - - - - - - - ) -}) - function CommentStatus(props: { contract: Contract comment: ContractComment @@ -388,6 +398,7 @@ export function FeedCommentHeader(props: { }) { const { comment, contract } = props const { userUsername, userName, createdTime } = comment + const marketCreator = contract.creatorId === comment.userId const betOutcome = comment.betOutcome let bought: string | undefined let money: string | undefined @@ -398,7 +409,11 @@ export function FeedCommentHeader(props: { const shouldDisplayOutcome = betOutcome && !comment.answerOutcome return ( - + {bought} {money} diff --git a/web/components/widgets/user-link.tsx b/web/components/widgets/user-link.tsx index 0daf717ba4..ea91f4efd0 100644 --- a/web/components/widgets/user-link.tsx +++ b/web/components/widgets/user-link.tsx @@ -11,6 +11,7 @@ import { BadgeCheckIcon } from '@heroicons/react/outline' import { Row } from '../layout/row' import { Avatar } from './avatar' import { DAY_MS } from 'common/util/time' +import ScalesIcon from 'web/lib/icons/scales-icon' export const isFresh = (createdTime: number) => createdTime > Date.now() - DAY_MS * 14 @@ -51,11 +52,32 @@ export function UserLink(props: { noLink?: boolean createdTime?: number hideBadge?: boolean + marketCreator?: boolean }) { - const { name, username, className, short, noLink, createdTime, hideBadge } = - props + const { + name, + username, + className, + short, + noLink, + createdTime, + hideBadge, + marketCreator, + } = props const fresh = createdTime ? isFresh(createdTime) : false const shortName = short ? shortenName(name) : name + const children = ( + <> + {shortName} + {!hideBadge && ( + + )} + + ) if (noLink) { return (
- {shortName} - {!hideBadge && } + {children}
) } @@ -76,8 +97,7 @@ export function UserLink(props: { className={clsx('inline-flex flex-row items-center gap-1', className)} followsLinkClass > - {shortName} - {!hideBadge && } + {children} ) } @@ -100,8 +120,12 @@ export function PostBanBadge() { ) } -export function UserBadge(props: { username: string; fresh?: boolean }) { - const { username, fresh } = props +export function UserBadge(props: { + username: string + fresh?: boolean + marketCreator?: boolean +}) { + const { username, fresh, marketCreator } = props if (BOT_USERNAMES.includes(username)) { return } @@ -114,6 +138,9 @@ export function UserBadge(props: { username: string; fresh?: boolean }) { if (fresh) { return } + if (marketCreator) { + return + } return null } @@ -146,3 +173,11 @@ function FreshBadge() { ) } + +function MarketCreatorBadge() { + return ( + + + ) +} diff --git a/web/lib/icons/scales-icon.tsx b/web/lib/icons/scales-icon.tsx new file mode 100644 index 0000000000..891640404a --- /dev/null +++ b/web/lib/icons/scales-icon.tsx @@ -0,0 +1,16 @@ +export default function ScalesIcon(props: React.SVGProps) { + return ( + + + + ) +}