stacker.news/components/comment.js

271 lines
9.1 KiB
JavaScript
Raw Normal View History

2021-04-14 23:56:29 +00:00
import itemStyles from './item.module.css'
import styles from './comment.module.css'
import Text from './text'
import Link from 'next/link'
2022-05-17 22:09:15 +00:00
import Reply, { ReplyOnAnotherPage } from './reply'
import { useEffect, useMemo, useRef, useState } from 'react'
2021-04-22 22:14:32 +00:00
import UpVote from './upvote'
2021-04-30 21:42:51 +00:00
import Eye from '../svgs/eye-fill.svg'
import EyeClose from '../svgs/eye-close-line.svg'
2021-06-24 23:56:01 +00:00
import { useRouter } from 'next/router'
2021-08-10 22:59:06 +00:00
import CommentEdit from './comment-edit'
2022-05-17 22:09:15 +00:00
import { COMMENT_DEPTH_LIMIT, NOFOLLOW_LIMIT } from '../lib/constants'
2022-01-27 19:18:48 +00:00
import { ignoreClick } from '../lib/clicks'
2023-01-26 16:11:55 +00:00
import PayBounty from './pay-bounty'
import BountyIcon from '../svgs/bounty-bag.svg'
import ActionTooltip from './action-tooltip'
2022-09-21 19:57:36 +00:00
import Flag from '../svgs/flag-fill.svg'
import { numWithUnits } from '../lib/format'
2022-12-19 22:27:52 +00:00
import Share from './share'
import ItemInfo from './item-info'
2023-07-24 18:35:05 +00:00
import Badge from 'react-bootstrap/Badge'
2023-05-06 21:51:17 +00:00
import { RootProvider, useRoot } from './root'
import { useMe } from './me'
2021-04-14 23:56:29 +00:00
function Parent ({ item, rootText }) {
2023-05-06 21:51:17 +00:00
const root = useRoot()
2021-04-15 19:41:02 +00:00
const ParentFrag = () => (
<>
<span> \ </span>
<Link href={`/items/${item.parentId}`} className='text-reset'>
parent
2021-04-15 19:41:02 +00:00
</Link>
</>
)
return (
<>
2023-05-06 21:51:17 +00:00
{Number(root.id) !== Number(item.parentId) && <ParentFrag />}
2021-04-15 19:41:02 +00:00
<span> \ </span>
<Link href={`/items/${root.id}`} className='text-reset'>
{rootText || 'on:'} {root?.title}
2021-04-15 19:41:02 +00:00
</Link>
2023-05-06 21:51:17 +00:00
{root.subName &&
<Link href={`/~${root.subName}`}>
2023-07-24 18:35:05 +00:00
{' '}<Badge className={itemStyles.newComment} bg={null}>{root.subName}</Badge>
2023-05-02 16:55:10 +00:00
</Link>}
2021-04-15 19:41:02 +00:00
</>
)
}
2021-12-16 20:02:17 +00:00
const truncateString = (string = '', maxLength = 140) =>
string.length > maxLength
? `${string.substring(0, maxLength)} […]`
: string
export function CommentFlat ({ item, rank, ...props }) {
2022-01-27 19:18:48 +00:00
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])
2022-01-27 19:18:48 +00:00
return (
<>
{rank
? (
<div className={`${itemStyles.rank} pt-2 align-self-start`}>
{rank}
</div>)
: <div />}
<div
className='clickToContext py-2'
onClick={e => {
if (ignoreClick(e)) return
router.push(href, as)
}}
>
<RootProvider root={item.root}>
<Comment item={item} {...props} />
</RootProvider>
</div>
</>
2022-01-27 19:18:48 +00:00
)
}
2021-09-23 17:42:00 +00:00
export default function Comment ({
item, children, replyOpen, includeParent, topLevel,
2022-05-17 22:09:15 +00:00
rootText, noComments, noReply, truncate, depth
2021-09-23 17:42:00 +00:00
}) {
2021-08-10 22:59:06 +00:00
const [edit, setEdit] = useState()
const me = useMe()
const [collapse, setCollapse] = useState(
!me?.wildWestMode && !me?.greeterMode &&
!item.mine && item.freebie && item.wvotes <= 0
? 'yep'
: 'nope')
2021-06-24 23:56:01 +00:00
const ref = useRef(null)
const router = useRouter()
2023-05-06 21:51:17 +00:00
const root = useRoot()
const [pendingSats, setPendingSats] = useState(0)
2021-06-24 23:56:01 +00:00
useEffect(() => {
2023-07-25 14:14:45 +00:00
setCollapse(window.localStorage.getItem(`commentCollapse:${item.id}`) || collapse)
2021-06-24 23:56:01 +00:00
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)
2021-06-24 23:56:01 +00:00
}
2023-08-05 17:13:15 +00:00
}, [item.id, router.query.commentId])
2021-04-14 23:56:29 +00:00
2023-08-06 19:18:40 +00:00
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])
2022-05-17 22:09:15 +00:00
const bottomedOut = depth === COMMENT_DEPTH_LIMIT
2023-05-06 21:51:17 +00:00
const op = root.user.name === item.user.name
const bountyPaid = root.bountyPaidTo?.includes(Number(item.id))
2021-10-27 18:26:34 +00:00
2021-04-14 23:56:29 +00:00
return (
2021-11-09 22:43:56 +00:00
<div
ref={ref} className={includeParent ? '' : `${styles.comment} ${collapse === 'yep' ? styles.collapsed : ''}`}
onMouseEnter={() => ref.current.classList.add('outline-new-comment-unset')}
onTouchStart={() => ref.current.classList.add('outline-new-comment-unset')}
2021-06-24 23:56:01 +00:00
>
2021-04-28 19:30:14 +00:00
<div className={`${itemStyles.item} ${styles.item}`}>
2023-01-26 16:11:55 +00:00
{item.meDontLike
2023-07-25 14:14:45 +00:00
? <Flag width={24} height={24} className={styles.dontLike} />
: <UpVote item={item} className={styles.upvote} pendingSats={pendingSats} setPendingSats={setPendingSats} />}
2021-04-30 21:42:51 +00:00
<div className={`${itemStyles.hunk} ${styles.hunk}`}>
<div className='d-flex align-items-center'>
<ItemInfo
item={item}
pendingSats={pendingSats}
commentsText='replies'
commentTextSingular='reply'
className={`${itemStyles.other} ${styles.other}`}
2023-07-24 18:35:05 +00:00
embellishUser={op && <Badge bg='boost' className={`ms-1 ${styles.op} bg-opacity-75`}>OP</Badge>}
extraInfo={
2021-09-10 21:13:52 +00:00
<>
{includeParent && <Parent item={item} rootText={rootText} />}
{bountyPaid &&
<ActionTooltip notForm overlayText={`${numWithUnits(root.bounty)} paid`}>
<BountyIcon className={`${styles.bountyIcon} ${'fill-success vertical-align-middle'}`} height={16} width={16} />
</ActionTooltip>}
</>
}
onEdit={e => { setEdit(!edit) }}
editText={edit ? 'cancel' : 'edit'}
/>
{!includeParent && (collapse === 'yep'
2021-10-27 18:35:26 +00:00
? <Eye
className={styles.collapser} height={10} width={10} onClick={() => {
setCollapse('nope')
2023-07-25 14:14:45 +00:00
window.localStorage.setItem(`commentCollapse:${item.id}`, 'nope')
2021-10-27 18:35:26 +00:00
}}
/>
: <EyeClose
className={styles.collapser} height={10} width={10} onClick={() => {
setCollapse('yep')
2023-07-25 14:14:45 +00:00
window.localStorage.setItem(`commentCollapse:${item.id}`, 'yep')
2021-10-27 18:35:26 +00:00
}}
/>)}
{topLevel && (
2023-07-24 18:35:05 +00:00
<span className='d-flex ms-auto align-items-center'>
<Share item={item} />
</span>
)}
2021-04-14 23:56:29 +00:00
</div>
2021-08-10 22:59:06 +00:00
{edit
? (
2021-09-23 20:09:07 +00:00
<CommentEdit
comment={item}
onSuccess={() => {
setEdit(!edit)
}}
/>
2021-08-10 22:59:06 +00:00
)
: (
<div className={styles.text}>
<Text topLevel={topLevel} nofollow={item.sats + item.boost < NOFOLLOW_LIMIT}>
2022-02-03 22:01:42 +00:00
{truncate ? truncateString(item.text) : item.searchText || item.text}
2021-12-16 20:02:17 +00:00
</Text>
2021-08-10 22:59:06 +00:00
</div>
)}
2021-04-14 23:56:29 +00:00
</div>
</div>
{collapse !== 'yep' && (
bottomedOut
? <DepthLimit item={item} />
: (
2023-07-25 14:14:45 +00:00
<div className={styles.children}>
{!noReply &&
<Reply depth={depth + 1} item={item} replyOpen={replyOpen}>
{root.bounty && !bountyPaid && <PayBounty item={item} />}
</Reply>}
{children}
2023-07-25 18:32:48 +00:00
<div className={styles.comments}>
{item.comments && !noComments
? item.comments.map((item) => (
<Comment depth={depth + 1} key={item.id} item={item} />
2023-07-25 14:14:45 +00:00
))
: null}
</div>
2022-05-17 22:09:15 +00:00
</div>
)
)}
2022-05-17 22:09:15 +00:00
</div>
)
}
function DepthLimit ({ item }) {
if (item.ncomments > 0) {
return (
2023-07-24 18:35:05 +00:00
<Link href={`/items/${item.id}`} className='d-block p-3 fw-bold text-muted w-100 text-center'>
view replies
2022-05-17 22:09:15 +00:00
</Link>
)
}
return (
2023-07-25 14:14:45 +00:00
<div className={styles.children}>
2022-05-17 22:09:15 +00:00
<ReplyOnAnotherPage parentId={item.id} />
2021-11-09 22:43:56 +00:00
</div>
2021-04-22 22:14:32 +00:00
)
}
export function CommentSkeleton ({ skeletonChildren }) {
return (
2021-04-28 22:52:03 +00:00
<div className={styles.comment}>
2021-04-22 22:14:32 +00:00
<div className={`${itemStyles.item} ${itemStyles.skeleton} ${styles.item} ${styles.skeleton}`}>
<UpVote className={styles.upvote} />
<div className={`${itemStyles.hunk} ${styles.hunk}`}>
<div className={itemStyles.other}>
2021-04-28 22:52:03 +00:00
<span className={`${itemStyles.otherItem} clouds`} />
<span className={`${itemStyles.otherItem} clouds`} />
2021-04-22 22:14:32 +00:00
<span className={`${itemStyles.otherItem} clouds`} />
<span className={`${itemStyles.otherItem} ${itemStyles.otherItemLonger} clouds`} />
</div>
<div className={`${styles.text} clouds`} />
2021-04-14 23:56:29 +00:00
</div>
2021-04-22 22:14:32 +00:00
</div>
2021-04-28 22:52:03 +00:00
<div className={`${itemStyles.children} ${styles.children} ${styles.skeleton}`}>
<div className={styles.replyPadder}>
<div className={`${itemStyles.other} ${styles.reply} clouds`} />
</div>
2023-07-24 18:35:05 +00:00
<div className={`${styles.comments} ms-sm-1 ms-md-3`}>
2021-05-05 18:13:14 +00:00
{skeletonChildren
? <CommentSkeleton skeletonChildren={skeletonChildren - 1} />
2021-04-17 18:15:18 +00:00
: null}
</div>
2021-04-14 23:56:29 +00:00
</div>
2021-04-28 22:52:03 +00:00
</div>
2021-04-14 23:56:29 +00:00
)
}