import itemStyles from './item.module.css' import styles from './comment.module.css' import Text from './text' import Link from 'next/link' import Reply from './reply' import { useEffect, useRef, useState } from 'react' import { timeSince } from '../lib/time' 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 { useMe } from './me' import CommentEdit from './comment-edit' import Countdown from './countdown' import { NOFOLLOW_LIMIT } from '../lib/constants' function Parent ({ item, rootText }) { const ParentFrag = () => ( <> \ e.stopPropagation()} className='text-reset'>parent ) if (!item.root) { return } return ( <> {Number(item.root.id) !== Number(item.parentId) && } \ e.stopPropagation()} className='text-reset'>{rootText || 'on:'} {item.root.title} ) } export default function Comment ({ item, children, replyOpen, includeParent, rootText, noComments, noReply }) { const [edit, setEdit] = useState() const [collapse, setCollapse] = useState(false) const ref = useRef(null) const router = useRouter() const me = useMe() const mine = me?.id === item.user.id const editThreshold = new Date(item.createdAt).getTime() + 10 * 60000 const [canEdit, setCanEdit] = useState(mine && (Date.now() < editThreshold)) useEffect(() => { if (Number(router.query.commentId) === Number(item.id)) { ref.current.scrollIntoView() ref.current.classList.add('flash-it') } }, [item]) return (
{item.sats} sats \ {item.boost > 0 && <> {item.boost} boost \ } {item.tips > 0 && <> {item.tips} tipped \ } e.stopPropagation()} className='text-reset'>{item.ncomments} replies \ e.stopPropagation()}>@{item.user.name} {timeSince(new Date(item.createdAt))} {includeParent && } {canEdit && <> \
setEdit(!edit)} > {edit ? 'cancel' : 'edit'} { setCanEdit(false) }} />
}
{!includeParent && (collapse ? setCollapse(false)} /> : setCollapse(true)} />)}
{edit ? ( { setEdit(!edit) setCanEdit(mine && (Date.now() < editThreshold)) }} /> ) : (
{item.text}
)}
{!noReply && } {children}
{item.comments && !noComments ? item.comments.map((item) => ( )) : null}
) } export function CommentSkeleton ({ skeletonChildren }) { return (
{skeletonChildren ? : null}
) }