import { Form, MarkdownInput, SubmitButton } from '../components/form' import { gql, useMutation } from '@apollo/client' import styles from './reply.module.css' import { COMMENTS } from '../fragments/comments' import { useMe } from './me' import TextareaAutosize from 'react-textarea-autosize' import { useEffect, useState, useRef } from 'react' import Link from 'next/link' import FeeButton from './fee-button' import { commentsViewedAfterComment } from '../lib/new-comments' import { commentSchema } from '../lib/validate' export function ReplyOnAnotherPage ({ parentId }) { return ( reply on another page ) } export default function Reply ({ item, onSuccess, replyOpen, children }) { const [reply, setReply] = useState(replyOpen) const me = useMe() const parentId = item.id useEffect(() => { setReply(replyOpen || !!localStorage.getItem('reply-' + parentId + '-' + 'text')) }, []) const [createComment] = useMutation( gql` ${COMMENTS} mutation createComment($text: String!, $parentId: ID!) { createComment(text: $text, parentId: $parentId) { ...CommentFields comments { ...CommentsRecursive } } }`, { update (cache, { data: { createComment } }) { cache.modify({ id: `Item:${parentId}`, fields: { comments (existingCommentRefs = []) { 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) } } ) const replyInput = useRef(null) useEffect(() => { if (replyInput.current && reply) replyInput.current.focus() }, [reply]) return (