Function ReplyModal

src/components/modules/dashboard/comments/ReplyModal.tsx:17–117

(props: { comment: CommentModel })

const replyTextAtom = atom('')
export const ReplyModal = (props: { comment: CommentModel }) => {
  const { author, id, text } = props.comment

  const store = useStore()
  const [, getValue, ref] = useUncontrolledInput<HTMLTextAreaElement>(
    store.get(replyTextAtom),
  )

  const { dismiss, ref: modalElRef } = useCurrentModal()

  const { mutateAsync: reply } = useReplyCommentMutation()
  const handleReply = useEventCallback(async () => {
    const text = getValue()
    if (!text) {
      toast.error('回复内容不能为空')
      return
    }

    reply({
      id,
      content: text,
    })

    dismiss()

    store.set(replyTextAtom, '')
  })

  const handleSubmit = useEventCallback((e: any) => {
    e.preventDefault()
  })

  const handleKeyDown = useEventCallback((e: React.KeyboardEvent) => {
    // cmd + enter / ctrl + enter
    if ((e.metaKey || e.ctrlKey) && e.key === 'Enter') {
      handleReply()
    }
  })

  const isMobile = useIsMobile()

  useEffect(() => {
    const $ = ref.current
    return () => {
      if (!$) return
      store.set(replyTextAtom, $.value)
    }
  }, [store, ref])

  const [kaomojiPanelOpen, setKaomojiPanelOpen] = useState(false)

  return (
    <form
      className="flex w-[500px] max-w-full flex-col"
      onSubmit={handleSubmit}
    >
      <div className="mb-8">
        <Label>回复 {author}：</Label>