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' 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, ...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 me = useMe() const [collapse, setCollapse] = useState( !me?.wildWestMode && !me?.greeterMode && !item.mine && item.freebie && item.wvotes <= 0 ? 'yep' : 'nope') const ref = useRef(null) const router = useRouter() const root = useRoot() useEffect(() => { setCollapse(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() ref.current.classList.add('flash-it') router.replace({ pathname: router.pathname, query: { id: router.query.id } }, undefined, { scroll: false }) }, 20) } }, [item]) const bottomedOut = depth === COMMENT_DEPTH_LIMIT const op = root.user.name === item.user.name const bountyPaid = root.bountyPaidTo?.includes(Number(item.id)) return (
{item.meDontLike ? : }
OP} extraInfo={ <> {includeParent && } {bountyPaid && } } onEdit={e => { setEdit(!edit) }} editText={edit ? 'cancel' : 'edit'} /> {!includeParent && (collapse === 'yep' ? { setCollapse('nope') localStorage.setItem(`commentCollapse:${item.id}`, 'nope') }} /> : { setCollapse('yep') localStorage.setItem(`commentCollapse:${item.id}`, 'yep') }} />)} {topLevel && ( )}
{edit ? ( { setEdit(!edit) }} /> ) : (
{truncate ? truncateString(item.text) : item.searchText || item.text}
)}
{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}
) }