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, 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 { 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 { abbrNum } from '../lib/format'
import Share from './share'
import ItemInfo from './item-info'
import { Badge } from 'react-bootstrap'
function Parent ({ item, rootText }) {
const ParentFrag = () => (
<>
\
parent
>
)
if (!item.root) {
return
}
return (
<>
{Number(item.root.id) !== Number(item.parentId) && }
\
{rootText || 'on:'} {item.root.title}
{item.root.subName &&
{' '}{item.root.subName}
}
>
)
}
const truncateString = (string = '', maxLength = 140) =>
string.length > maxLength
? `${string.substring(0, maxLength)} […]`
: string
export function CommentFlat ({ item, ...props }) {
const router = useRouter()
return (
{
if (ignoreClick(e)) {
return
}
if (item.path.split('.').length > COMMENT_DEPTH_LIMIT + 1) {
router.push({
pathname: '/items/[id]',
query: { id: item.parentId, commentId: item.id }
}, `/items/${item.parentId}`)
} else {
router.push({
pathname: '/items/[id]',
query: { id: item.root.id, commentId: item.id }
}, `/items/${item.root.id}`)
}
}}
>
)
}
export default function Comment ({
item, children, replyOpen, includeParent, topLevel,
rootText, noComments, noReply, truncate, depth
}) {
const [edit, setEdit] = useState()
const [collapse, setCollapse] = useState(false)
const ref = useRef(null)
const router = useRouter()
useEffect(() => {
if (Number(router.query.commentId) === Number(item.id)) {
ref.current.scrollIntoView()
ref.current.classList.add('flash-it')
router.replace({
pathname: router.pathname,
query: { id: router.query.id }
}, undefined, { scroll: false })
}
setCollapse(localStorage.getItem(`commentCollapse:${item.id}`))
}, [item])
const bottomedOut = depth === COMMENT_DEPTH_LIMIT
const op = item.root?.user.name === item.user.name
const bountyPaid = item.root?.bountyPaidTo?.includes(Number(item.id))
return (
{item.meDontLike
?
:
}
OP}
extraInfo={
<>
{includeParent && }
{bountyPaid &&
}
>
}
onEdit={e => { setEdit(!edit) }}
editText={edit ? 'cancel' : 'edit'}
/>
{!includeParent && (collapse
? {
setCollapse(false)
localStorage.removeItem(`commentCollapse:${item.id}`)
}}
/>
: {
setCollapse(true)
localStorage.setItem(`commentCollapse:${item.id}`, 'yep')
}}
/>)}
{topLevel && (
)}
{edit
? (
{
setEdit(!edit)
}}
/>
)
: (
{truncate ? truncateString(item.text) : item.searchText || item.text}
)}
{bottomedOut
?
: (
{!noReply &&
{item.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}
)
}