stacker.news/components/comment-edit.js

73 lines
2.0 KiB
JavaScript
Raw Normal View History

2021-08-10 22:59:06 +00:00
import { Form, MarkdownInput, SubmitButton } from '../components/form'
import * as Yup from 'yup'
import { gql, useMutation } from '@apollo/client'
import styles from './reply.module.css'
import TextareaAutosize from 'react-textarea-autosize'
2022-08-18 18:15:24 +00:00
import { useState } from 'react'
import { EditFeeButton } from './fee-button'
2021-08-10 22:59:06 +00:00
export const CommentSchema = Yup.object({
text: Yup.string().required('required').trim()
})
export default function CommentEdit ({ comment, editThreshold, onSuccess, onCancel }) {
2022-08-18 18:15:24 +00:00
const [hasImgLink, setHasImgLink] = useState()
2021-08-10 22:59:06 +00:00
const [updateComment] = useMutation(
gql`
mutation updateComment($id: ID! $text: String!) {
updateComment(id: $id, text: $text) {
text
2022-08-18 18:15:24 +00:00
paidImgLink
2021-08-10 22:59:06 +00:00
}
}`, {
update (cache, { data: { updateComment } }) {
cache.modify({
id: `Item:${comment.id}`,
fields: {
text () {
return updateComment.text
2022-08-18 18:15:24 +00:00
},
paidImgLink () {
return updateComment.paidImgLink
2021-08-10 22:59:06 +00:00
}
}
})
}
}
)
return (
<div className={`${styles.reply} mt-2`}>
<Form
initial={{
text: comment.text
}}
schema={CommentSchema}
onSubmit={async (values, { resetForm }) => {
const { error } = await updateComment({ variables: { ...values, id: comment.id } })
if (error) {
throw new Error({ message: error.toString() })
}
if (onSuccess) {
onSuccess()
}
}}
>
<MarkdownInput
name='text'
as={TextareaAutosize}
2021-11-13 16:28:58 +00:00
minRows={6}
2021-08-10 22:59:06 +00:00
autoFocus
2022-08-18 18:15:24 +00:00
setHasImgLink={setHasImgLink}
2021-08-10 22:59:06 +00:00
required
/>
2022-08-18 18:15:24 +00:00
<EditFeeButton
paidSats={comment.meSats} hadImgLink={comment.paidImgLink} hasImgLink={hasImgLink}
parentId={comment.parentId} text='save' ChildButton={SubmitButton} variant='secondary'
/>
2021-08-10 22:59:06 +00:00
</Form>
</div>
)
}