stacker.news/components/comment.js

178 lines
6.0 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'
import Reply 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 { useMe } from './me'
import CommentEdit from './comment-edit'
2021-08-11 20:34:10 +00:00
import Countdown from './countdown'
import { NOFOLLOW_LIMIT } from '../lib/constants'
2021-04-14 23:56:29 +00:00
function Parent ({ item, rootText }) {
2021-04-15 19:41:02 +00:00
const ParentFrag = () => (
<>
<span> \ </span>
<Link href={`/items/${item.parentId}`} passHref>
2021-06-24 23:56:01 +00:00
<a onClick={e => e.stopPropagation()} 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>
<a onClick={e => e.stopPropagation()} className='text-reset'>{rootText || 'on:'} {item.root.title}</a>
2021-04-15 19:41:02 +00:00
</Link>
</>
)
}
2021-09-23 17:42:00 +00:00
export default function Comment ({
item, children, replyOpen, includeParent,
2021-09-24 21:28:21 +00:00
rootText, noComments, noReply
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-08-10 22:59:06 +00:00
const me = useMe()
2021-08-10 23:09:27 +00:00
const mine = me?.id === item.user.id
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-06-24 23:56:01 +00:00
}
}, [item])
2021-04-14 23:56:29 +00:00
return (
2021-06-24 23:56:01 +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}`}>
<span>{item.sats} sats</span>
<span> \ </span>
2021-09-10 21:13:52 +00:00
{item.boost > 0 &&
<>
<span>{item.boost} boost</span>
<span> \ </span>
</>}
{item.tips > 0 &&
<>
<span>{item.tips} tipped</span>
<span> \ </span>
</>}
2021-04-30 21:42:51 +00:00
<Link href={`/items/${item.id}`} passHref>
2021-06-24 23:56:01 +00:00
<a onClick={e => e.stopPropagation()} className='text-reset'>{item.ncomments} replies</a>
2021-04-30 21:42:51 +00:00
</Link>
<span> \ </span>
<Link href={`/${item.user.name}`} passHref>
2021-06-24 23:56:01 +00:00
<a onClick={e => e.stopPropagation()}>@{item.user.name}</a>
2021-04-30 21:42:51 +00:00
</Link>
<span> </span>
<span>{timeSince(new Date(item.createdAt))}</span>
{includeParent && <Parent item={item} rootText={rootText} />}
2021-09-23 20:09:07 +00:00
{canEdit &&
<>
<span> \ </span>
<div
className={styles.edit}
onClick={() => setEdit(!edit)}
>
{edit ? 'cancel' : 'edit'}
<Countdown
date={editThreshold}
onComplete={() => {
setCanEdit(false)
}}
/>
</div>
</>}
2021-04-30 21:42:51 +00:00
</div>
{!includeParent && (collapse
? <Eye className={styles.collapser} height={10} width={10} onClick={() => setCollapse(false)} />
: <EyeClose className={styles.collapser} height={10} width={10} onClick={() => setCollapse(true)} />)}
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}>
<Text nofollow={item.sats + item.boost < NOFOLLOW_LIMIT}>{item.text}</Text>
2021-08-10 22:59:06 +00:00
</div>
)}
2021-04-14 23:56:29 +00:00
</div>
</div>
2021-08-18 18:59:30 +00:00
<div className={`${styles.children}`}>
2021-09-24 21:28:21 +00:00
{!noReply &&
<Reply
parentId={item.id} replyOpen={replyOpen}
/>}
2021-04-28 19:30:14 +00:00
{children}
<div className={`${styles.comments} ml-sm-1 ml-md-3`}>
{item.comments && !noComments
? item.comments.map((item) => (
<Comment key={item.id} item={item} />
))
: null}
</div>
</div>
</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
)
}