125 lines
3.7 KiB
JavaScript
125 lines
3.7 KiB
JavaScript
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 { useState } from 'react'
|
|
import { gql, useQuery } from '@apollo/client'
|
|
import { timeSince } from '../lib/time'
|
|
import UpVote from './upvote'
|
|
|
|
function Parent ({ item }) {
|
|
const { data } = useQuery(
|
|
gql`{
|
|
root(id: ${item.id}) {
|
|
id
|
|
title
|
|
}
|
|
}`
|
|
)
|
|
|
|
const ParentFrag = () => (
|
|
<>
|
|
<span> \ </span>
|
|
<Link href={`/items/${item.parentId}`} passHref>
|
|
<a className='text-reset'>parent</a>
|
|
</Link>
|
|
</>
|
|
)
|
|
|
|
if (!data) {
|
|
return <ParentFrag />
|
|
}
|
|
|
|
return (
|
|
<>
|
|
{data.root.id !== item.parentId && <ParentFrag />}
|
|
<span> \ </span>
|
|
<Link href={`/items/${data.root.id}`} passHref>
|
|
<a className='text-reset'>{data.root.title}</a>
|
|
</Link>
|
|
</>
|
|
)
|
|
}
|
|
|
|
export default function Comment ({ item, children, replyOpen, includeParent, cacheId, noReply }) {
|
|
const [reply, setReply] = useState(replyOpen)
|
|
|
|
return (
|
|
<>
|
|
<div />
|
|
<div>
|
|
<div className={`${itemStyles.item} ${styles.item}`}>
|
|
<UpVote itemId={item.id} meSats={item.meSats} className={styles.upvote} />
|
|
<div className={itemStyles.hunk}>
|
|
<div className={itemStyles.other}>
|
|
<Link href={`/${item.user.name}`} passHref>
|
|
<a>@{item.user.name}</a>
|
|
</Link>
|
|
<span> </span>
|
|
<span>{timeSince(new Date(item.createdAt))}</span>
|
|
<span> \ </span>
|
|
<span>{item.sats} sats</span>
|
|
<span> \ </span>
|
|
<Link href={`/items/${item.id}`} passHref>
|
|
<a className='text-reset'>{item.ncomments} replies</a>
|
|
</Link>
|
|
{includeParent && <Parent item={item} />}
|
|
</div>
|
|
<div className={styles.text}>
|
|
<Text>{item.text}</Text>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className={`${itemStyles.children} ${styles.children}`}>
|
|
{!noReply &&
|
|
<div
|
|
className={`${itemStyles.other} ${styles.reply}`}
|
|
onClick={() => setReply(!reply)}
|
|
>
|
|
{reply ? 'cancel' : 'reply'}
|
|
</div>}
|
|
{reply && <Reply parentId={item.id} onSuccess={() => setReply(replyOpen || false)} cacheId={cacheId} />}
|
|
{children}
|
|
<div className={styles.comments}>
|
|
{item.comments
|
|
? item.comments.map((item) => (
|
|
<Comment key={item.id} item={item} />
|
|
))
|
|
: null}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</>
|
|
)
|
|
}
|
|
|
|
export function CommentSkeleton ({ skeletonChildren }) {
|
|
const comments = skeletonChildren ? new Array(2).fill(null) : []
|
|
|
|
return (
|
|
<>
|
|
<div className={`${itemStyles.item} ${itemStyles.skeleton} ${styles.item} ${styles.skeleton}`}>
|
|
<UpVote className={styles.upvote} />
|
|
<div className={`${itemStyles.hunk} ${styles.hunk}`}>
|
|
<div className={itemStyles.other}>
|
|
<span className={`${itemStyles.otherItem} ${itemStyles.otherItemLonger} clouds`} />
|
|
<span className={`${itemStyles.otherItem} clouds`} />
|
|
<span className={`${itemStyles.otherItem} ${itemStyles.otherItemLonger} clouds`} />
|
|
</div>
|
|
<div className={`${styles.text} clouds`} />
|
|
</div>
|
|
</div>
|
|
<div className={`${itemStyles.children} ${styles.children}`}>
|
|
<div className={styles.comments}>
|
|
{comments
|
|
? comments.map((_, i) => (
|
|
<CommentSkeleton key={i} />
|
|
))
|
|
: null}
|
|
</div>
|
|
</div>
|
|
</>
|
|
)
|
|
}
|