import itemStyles from './item.module.css'
import styles from './comment.module.css'
import Text from './text'
import Link from 'next/link'
import Reply, { ReplyOnAnotherPage } from './reply'
import { useEffect, useMemo, useRef, useState } from 'react'
import UpVote from './upvote'
import Eye from '../svgs/eye-fill.svg'
import EyeClose from '../svgs/eye-close-line.svg'
import { useRouter } from 'next/router'
import CommentEdit from './comment-edit'
import { ANON_USER_ID, COMMENT_DEPTH_LIMIT, NOFOLLOW_LIMIT } from '../lib/constants'
import { ignoreClick } from '../lib/clicks'
import PayBounty from './pay-bounty'
import BountyIcon from '../svgs/bounty-bag.svg'
import ActionTooltip from './action-tooltip'
import Flag from '../svgs/flag-fill.svg'
import { numWithUnits } from '../lib/format'
import Share from './share'
import ItemInfo from './item-info'
import Badge from 'react-bootstrap/Badge'
import { RootProvider, useRoot } from './root'
import { useMe } from './me'
function Parent ({ item, rootText }) {
const root = useRoot()
const ParentFrag = () => (
<>
\
parent
>
)
return (
<>
{Number(root.id) !== Number(item.parentId) && }
\
{rootText || 'on:'} {root?.title}
{root.subName &&
{' '}{root.subName}
}
>
)
}
const truncateString = (string = '', maxLength = 140) =>
string.length > maxLength
? `${string.substring(0, maxLength)} […]`
: string
export function CommentFlat ({ item, rank, ...props }) {
const router = useRouter()
const [href, as] = useMemo(() => {
if (item.path.split('.').length > COMMENT_DEPTH_LIMIT + 1) {
return [{
pathname: '/items/[id]',
query: { id: item.parentId, commentId: item.id }
}, `/items/${item.parentId}`]
} else {
return [{
pathname: '/items/[id]',
query: { id: item.root.id, commentId: item.id }
}, `/items/${item.root.id}`]
}
}, [item?.id])
return (
<>
{rank
? (
{rank}
)
: }
{
if (ignoreClick(e)) return
router.push(href, as)
}}
>
>
)
}
export default function Comment ({
item, children, replyOpen, includeParent, topLevel,
rootText, noComments, noReply, truncate, depth
}) {
const [edit, setEdit] = useState()
const me = useMe()
const isHiddenFreebie = !me?.wildWestMode && !me?.greeterMode && !item.mine && item.freebie && item.wvotes <= 0
const [collapse, setCollapse] = useState(
isHiddenFreebie || item?.user?.meMute
? 'yep'
: 'nope')
const ref = useRef(null)
const router = useRouter()
const root = useRoot()
const [pendingSats, setPendingSats] = useState(0)
useEffect(() => {
setCollapse(window.localStorage.getItem(`commentCollapse:${item.id}`) || collapse)
if (Number(router.query.commentId) === Number(item.id)) {
// HACK wait for other comments to collapse if they're collapsed
setTimeout(() => {
ref.current.scrollIntoView({ behavior: 'instant', block: 'start' })
ref.current.classList.add('outline-it')
}, 20)
}
}, [item.id, router.query.commentId])
useEffect(() => {
if (router.query.commentsViewedAt &&
me?.id !== item.user?.id &&
new Date(item.createdAt).getTime() > router.query.commentsViewedAt) {
ref.current.classList.add('outline-new-comment')
}
}, [item.id])
const bottomedOut = depth === COMMENT_DEPTH_LIMIT
// Don't show OP badge when anon user comments on anon user posts
const op = root.user.name === item.user.name && Number(item.user.id) !== ANON_USER_ID
? 'OP'
: root.forwards?.some(f => f.user.name === item.user.name) && Number(item.user.id) !== ANON_USER_ID
? 'fwd'
: null
const bountyPaid = root.bountyPaidTo?.includes(Number(item.id))
return (
ref.current.classList.add('outline-new-comment-unset')}
onTouchStart={() => ref.current.classList.add('outline-new-comment-unset')}
>
{item.meDontLike
?
:
}
{item.user?.meMute && !includeParent && collapse === 'yep'
? (
{
setCollapse('nope')
window.localStorage.setItem(`commentCollapse:${item.id}`, 'nope')
}}
>reply from someone you muted
)
:
{op}>}
extraInfo={
<>
{includeParent && }
{bountyPaid &&
}
>
}
onEdit={e => { setEdit(!edit) }}
editText={edit ? 'cancel' : 'edit'}
/>}
{!includeParent && (collapse === 'yep'
? {
setCollapse('nope')
window.localStorage.setItem(`commentCollapse:${item.id}`, 'nope')
}}
/>
: {
setCollapse('yep')
window.localStorage.setItem(`commentCollapse:${item.id}`, 'yep')
}}
/>)}
{topLevel && (
)}
{edit
? (
{
setEdit(!edit)
}}
/>
)
: (
{truncate ? truncateString(item.text) : item.searchText || item.text}
)}
{collapse !== 'yep' && (
bottomedOut
?
: (
{!noReply &&
{root.bounty && !bountyPaid && }
}
{children}
{item.comments && !noComments
? item.comments.map((item) => (
))
: null}
)
)}
)
}
function DepthLimit ({ item }) {
if (item.ncomments > 0) {
return (
view replies
)
}
return (
)
}
export function CommentSkeleton ({ skeletonChildren }) {
return (
{skeletonChildren
?
: null}
)
}