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'
|
2021-06-24 23:56:01 +00:00
|
|
|
import { useEffect, useRef, useState } from 'react'
|
2021-04-18 18:50:04 +00:00
|
|
|
import { timeSince } from '../lib/time'
|
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'
|
2021-08-11 20:34:10 +00:00
|
|
|
import Countdown from './countdown'
|
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'
|
2021-04-14 23:56:29 +00:00
|
|
|
|
2021-08-17 23:07:52 +00:00
|
|
|
function Parent ({ item, rootText }) {
|
2021-04-15 19:41:02 +00:00
|
|
|
const ParentFrag = () => (
|
|
|
|
<>
|
|
|
|
<span> \ </span>
|
|
|
|
<Link href={`/items/${item.parentId}`} passHref>
|
2022-01-20 19:03:48 +00:00
|
|
|
<a className='text-reset'>parent</a>
|
2021-04-15 19:41:02 +00:00
|
|
|
</Link>
|
|
|
|
</>
|
|
|
|
)
|
|
|
|
|
2021-07-08 00:15:27 +00:00
|
|
|
if (!item.root) {
|
2021-04-15 19:41:02 +00:00
|
|
|
return <ParentFrag />
|
|
|
|
}
|
|
|
|
|
|
|
|
return (
|
|
|
|
<>
|
2021-07-08 00:15:27 +00:00
|
|
|
{Number(item.root.id) !== Number(item.parentId) && <ParentFrag />}
|
2021-04-15 19:41:02 +00:00
|
|
|
<span> \ </span>
|
2021-07-08 00:15:27 +00:00
|
|
|
<Link href={`/items/${item.root.id}`} passHref>
|
2022-01-20 19:03:48 +00:00
|
|
|
<a className='text-reset'>{rootText || 'on:'} {item.root.title}</a>
|
2021-04-15 19:41:02 +00:00
|
|
|
</Link>
|
|
|
|
</>
|
|
|
|
)
|
|
|
|
}
|
|
|
|
|
2021-12-16 20:02:17 +00:00
|
|
|
const truncateString = (string = '', maxLength = 140) =>
|
|
|
|
string.length > maxLength
|
|
|
|
? `${string.substring(0, maxLength)} […]`
|
|
|
|
: string
|
|
|
|
|
2022-01-27 19:18:48 +00:00
|
|
|
export function CommentFlat ({ item, ...props }) {
|
|
|
|
const router = useRouter()
|
|
|
|
return (
|
|
|
|
<div
|
|
|
|
className='clickToContext py-2'
|
|
|
|
onClick={e => {
|
|
|
|
if (ignoreClick(e)) {
|
|
|
|
return
|
|
|
|
}
|
2022-05-17 22:09:15 +00:00
|
|
|
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}`)
|
|
|
|
}
|
2022-01-27 19:18:48 +00:00
|
|
|
}}
|
|
|
|
>
|
|
|
|
<Comment item={item} {...props} />
|
|
|
|
</div>
|
|
|
|
)
|
|
|
|
}
|
|
|
|
|
2021-09-23 17:42:00 +00:00
|
|
|
export default function Comment ({
|
|
|
|
item, children, replyOpen, includeParent,
|
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()
|
2021-04-30 21:42:51 +00:00
|
|
|
const [collapse, setCollapse] = useState(false)
|
2021-06-24 23:56:01 +00:00
|
|
|
const ref = useRef(null)
|
|
|
|
const router = useRouter()
|
2021-11-27 18:01:02 +00:00
|
|
|
const mine = item.mine
|
2021-08-10 22:59:06 +00:00
|
|
|
const editThreshold = new Date(item.createdAt).getTime() + 10 * 60000
|
|
|
|
const [canEdit, setCanEdit] =
|
|
|
|
useState(mine && (Date.now() < editThreshold))
|
2021-06-24 23:56:01 +00:00
|
|
|
|
|
|
|
useEffect(() => {
|
|
|
|
if (Number(router.query.commentId) === Number(item.id)) {
|
|
|
|
ref.current.scrollIntoView()
|
2021-08-17 23:59:22 +00:00
|
|
|
ref.current.classList.add('flash-it')
|
2021-12-21 18:14:48 +00:00
|
|
|
router.replace({
|
|
|
|
pathname: router.pathname,
|
|
|
|
query: { id: router.query.id }
|
|
|
|
}, undefined, { scroll: false })
|
2021-06-24 23:56:01 +00:00
|
|
|
}
|
2021-10-27 18:35:26 +00:00
|
|
|
setCollapse(localStorage.getItem(`commentCollapse:${item.id}`))
|
2021-06-24 23:56:01 +00:00
|
|
|
}, [item])
|
2021-04-14 23:56:29 +00:00
|
|
|
|
2022-05-17 22:09:15 +00:00
|
|
|
const bottomedOut = depth === COMMENT_DEPTH_LIMIT
|
|
|
|
|
2022-05-18 20:55:06 +00:00
|
|
|
const op = item.root?.user.name === item.user.name
|
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
|
2021-08-17 23:59:22 +00:00
|
|
|
ref={ref} className={includeParent ? '' : `${styles.comment} ${collapse ? styles.collapsed : ''}`}
|
2021-06-24 23:56:01 +00:00
|
|
|
>
|
2021-04-28 19:30:14 +00:00
|
|
|
<div className={`${itemStyles.item} ${styles.item}`}>
|
2021-09-10 21:13:52 +00:00
|
|
|
<UpVote item={item} className={styles.upvote} />
|
2021-04-30 21:42:51 +00:00
|
|
|
<div className={`${itemStyles.hunk} ${styles.hunk}`}>
|
|
|
|
<div className='d-flex align-items-center'>
|
|
|
|
<div className={`${itemStyles.other} ${styles.other}`}>
|
2022-01-20 23:04:12 +00:00
|
|
|
<span title={`from ${item.upvotes} users (${item.meSats} from me)`}>{item.sats} sats</span>
|
2021-04-30 21:42:51 +00:00
|
|
|
<span> \ </span>
|
2021-09-10 21:13:52 +00:00
|
|
|
{item.boost > 0 &&
|
|
|
|
<>
|
|
|
|
<span>{item.boost} boost</span>
|
2021-12-04 06:26:42 +00:00
|
|
|
<span> \ </span>
|
2021-09-10 21:13:52 +00:00
|
|
|
</>}
|
2021-04-30 21:42:51 +00:00
|
|
|
<Link href={`/items/${item.id}`} passHref>
|
2022-01-20 19:03:48 +00:00
|
|
|
<a className='text-reset'>{item.ncomments} replies</a>
|
2021-04-30 21:42:51 +00:00
|
|
|
</Link>
|
|
|
|
<span> \ </span>
|
|
|
|
<Link href={`/${item.user.name}`} passHref>
|
2022-01-20 19:03:48 +00:00
|
|
|
<a>@{item.user.name}<span className='text-boost font-weight-bold'>{op && ' OP'}</span></a>
|
2021-04-30 21:42:51 +00:00
|
|
|
</Link>
|
|
|
|
<span> </span>
|
2021-12-21 21:46:42 +00:00
|
|
|
<Link href={`/items/${item.id}`} passHref>
|
|
|
|
<a title={item.createdAt} className='text-reset'>{timeSince(new Date(item.createdAt))}</a>
|
|
|
|
</Link>
|
2021-08-17 23:07:52 +00:00
|
|
|
{includeParent && <Parent item={item} rootText={rootText} />}
|
2021-09-23 20:09:07 +00:00
|
|
|
{canEdit &&
|
|
|
|
<>
|
|
|
|
<span> \ </span>
|
|
|
|
<div
|
|
|
|
className={styles.edit}
|
2022-01-20 19:03:48 +00:00
|
|
|
onClick={e => {
|
|
|
|
setEdit(!edit)
|
|
|
|
}}
|
2021-09-23 20:09:07 +00:00
|
|
|
>
|
|
|
|
{edit ? 'cancel' : 'edit'}
|
|
|
|
<Countdown
|
|
|
|
date={editThreshold}
|
|
|
|
onComplete={() => {
|
|
|
|
setCanEdit(false)
|
|
|
|
}}
|
|
|
|
/>
|
|
|
|
</div>
|
|
|
|
</>}
|
2021-04-30 21:42:51 +00:00
|
|
|
</div>
|
|
|
|
{!includeParent && (collapse
|
2021-10-27 18:35:26 +00:00
|
|
|
? <Eye
|
|
|
|
className={styles.collapser} height={10} width={10} onClick={() => {
|
|
|
|
setCollapse(false)
|
|
|
|
localStorage.removeItem(`commentCollapse:${item.id}`)
|
|
|
|
}}
|
|
|
|
/>
|
|
|
|
: <EyeClose
|
|
|
|
className={styles.collapser} height={10} width={10} onClick={() => {
|
|
|
|
setCollapse(true)
|
|
|
|
localStorage.setItem(`commentCollapse:${item.id}`, 'yep')
|
|
|
|
}}
|
|
|
|
/>)}
|
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)
|
|
|
|
setCanEdit(mine && (Date.now() < editThreshold))
|
|
|
|
}}
|
|
|
|
/>
|
2021-08-10 22:59:06 +00:00
|
|
|
)
|
|
|
|
: (
|
|
|
|
<div className={styles.text}>
|
2021-12-16 20:02:17 +00:00
|
|
|
<Text 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>
|
2022-05-17 22:09:15 +00:00
|
|
|
{bottomedOut
|
|
|
|
? <DepthLimit item={item} />
|
|
|
|
: (
|
|
|
|
<div className={`${styles.children}`}>
|
|
|
|
{!noReply &&
|
|
|
|
<Reply
|
|
|
|
depth={depth + 1} parentId={item.id} meComments={item.meComments} replyOpen={replyOpen}
|
|
|
|
/>}
|
|
|
|
{children}
|
|
|
|
<div className={`${styles.comments} ml-sm-1 ml-md-3`}>
|
|
|
|
{item.comments && !noComments
|
|
|
|
? item.comments.map((item) => (
|
|
|
|
<Comment depth={depth + 1} key={item.id} item={item} />
|
|
|
|
))
|
|
|
|
: null}
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
)}
|
|
|
|
</div>
|
|
|
|
)
|
|
|
|
}
|
|
|
|
|
|
|
|
function DepthLimit ({ item }) {
|
|
|
|
if (item.ncomments > 0) {
|
|
|
|
return (
|
|
|
|
<Link href={`/items/${item.id}`} passHref>
|
|
|
|
<a className='d-block p-3 font-weight-bold text-muted w-100 text-center'>view replies</a>
|
|
|
|
</Link>
|
|
|
|
)
|
|
|
|
}
|
|
|
|
|
|
|
|
return (
|
|
|
|
<div className={`${styles.children}`}>
|
|
|
|
<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>
|
|
|
|
<div className={`${styles.comments} ml-sm-1 ml-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
|
|
|
)
|
|
|
|
}
|