stacker.news/components/reply.js

144 lines
4.4 KiB
JavaScript
Raw Normal View History

2021-07-01 23:51:58 +00:00
import { Form, MarkdownInput, SubmitButton } from '../components/form'
2021-04-14 23:56:29 +00:00
import { gql, useMutation } from '@apollo/client'
import styles from './reply.module.css'
2021-04-22 22:14:32 +00:00
import { COMMENTS } from '../fragments/comments'
2021-05-25 00:08:56 +00:00
import { useMe } from './me'
2021-07-16 17:32:54 +00:00
import TextareaAutosize from 'react-textarea-autosize'
2023-02-24 15:52:09 +00:00
import { useEffect, useState, useRef } from 'react'
2022-05-17 22:09:15 +00:00
import Link from 'next/link'
2022-08-10 15:06:31 +00:00
import FeeButton from './fee-button'
import { commentsViewedAfterComment } from '../lib/new-comments'
2023-02-08 19:38:04 +00:00
import { commentSchema } from '../lib/validate'
2021-04-14 23:56:29 +00:00
2022-05-17 22:09:15 +00:00
export function ReplyOnAnotherPage ({ parentId }) {
return (
<Link href={`/items/${parentId}`}>
<a className={`${styles.replyButtons} text-muted`}>reply on another page</a>
</Link>
)
}
2023-05-11 00:41:17 +00:00
export default function Reply ({ item, onSuccess, replyOpen, children, placeholder }) {
const [reply, setReply] = useState(replyOpen)
2021-05-25 00:08:56 +00:00
const me = useMe()
const parentId = item.id
2021-05-25 00:08:56 +00:00
useEffect(() => {
setReply(replyOpen || !!localStorage.getItem('reply-' + parentId + '-' + 'text'))
}, [])
2021-04-14 23:56:29 +00:00
const [createComment] = useMutation(
gql`
2021-04-17 18:15:18 +00:00
${COMMENTS}
2021-04-14 23:56:29 +00:00
mutation createComment($text: String!, $parentId: ID!) {
createComment(text: $text, parentId: $parentId) {
2021-04-17 18:15:18 +00:00
...CommentFields
comments {
...CommentsRecursive
}
2021-04-14 23:56:29 +00:00
}
2021-04-17 18:15:18 +00:00
}`, {
update (cache, { data: { createComment } }) {
cache.modify({
2021-04-27 00:55:48 +00:00
id: `Item:${parentId}`,
2021-04-17 18:15:18 +00:00
fields: {
comments (existingCommentRefs = []) {
2021-04-17 18:15:18 +00:00
const newCommentRef = cache.writeFragment({
data: createComment,
fragment: COMMENTS,
fragmentName: 'CommentsRecursive'
})
return [newCommentRef, ...existingCommentRefs]
}
}
})
const ancestors = item.path.split('.')
// update all ancestors
ancestors.forEach(id => {
cache.modify({
id: `Item:${id}`,
fields: {
ncomments (existingNComments = 0) {
return existingNComments + 1
}
}
})
})
// so that we don't see indicator for our own comments, we record this comments as the latest time
// but we also have record num comments, in case someone else commented when we did
const root = ancestors[0]
commentsViewedAfterComment(root, createComment.createdAt)
2021-04-17 18:15:18 +00:00
}
}
2021-04-14 23:56:29 +00:00
)
2023-02-24 15:52:09 +00:00
const replyInput = useRef(null)
useEffect(() => {
2023-02-24 16:08:15 +00:00
if (replyInput.current && reply && !replyOpen) replyInput.current.focus()
2023-02-24 15:52:09 +00:00
}, [reply])
2021-04-14 23:56:29 +00:00
return (
2021-09-23 20:09:07 +00:00
<div>
{replyOpen
? <div className={styles.replyButtons} />
: (
2023-01-26 16:11:55 +00:00
<div className={styles.replyButtons}>
<div
onClick={() => setReply(!reply)}
>
{reply ? 'cancel' : 'reply'}
</div>
{/* HACK if we need more items, we should probably do a comment toolbar */}
{children}
</div>)}
2021-09-23 20:09:07 +00:00
<div className={reply ? `${styles.reply}` : 'd-none'}>
<Form
initial={{
text: ''
}}
2023-02-08 19:38:04 +00:00
schema={commentSchema}
2021-09-23 20:09:07 +00:00
onSubmit={async (values, { resetForm }) => {
const { error } = await createComment({ variables: { ...values, parentId } })
if (error) {
throw new Error({ message: error.toString() })
}
resetForm({ text: '' })
setReply(replyOpen || false)
}}
2022-01-07 18:55:40 +00:00
storageKeyPrefix={'reply-' + parentId}
2021-09-23 20:09:07 +00:00
>
<MarkdownInput
name='text'
as={TextareaAutosize}
2021-11-12 22:39:52 +00:00
minRows={6}
2021-09-23 20:09:07 +00:00
autoFocus={!replyOpen}
required
2023-05-11 00:41:17 +00:00
placeholder={placeholder}
hint={me?.freeComments && me?.sats < 1 ? <span className='text-success'>{me.freeComments} free comments left</span> : null}
2023-02-24 15:52:09 +00:00
innerRef={replyInput}
2021-09-23 20:09:07 +00:00
/>
2022-08-10 15:06:31 +00:00
{reply &&
<div className='mt-1'>
<FeeButton
2022-09-27 21:19:15 +00:00
baseFee={1} parentId={parentId} text='reply'
2022-08-10 15:06:31 +00:00
ChildButton={SubmitButton} variant='secondary' alwaysShow
/>
</div>}
2021-09-23 20:09:07 +00:00
</Form>
</div>
2021-04-14 23:56:29 +00:00
</div>
)
}
2021-04-27 00:55:48 +00:00
export function ReplySkeleton () {
return (
<div className={`${styles.reply} ${styles.skeleton}`}>
<div className={`${styles.input} clouds`} />
<div className={`${styles.button} clouds`} />
</div>
)
}