import { useState, useRef } from 'react' import useTranslation from 'next-translate/useTranslation' import TextareaAutosize from 'react-textarea-autosize' import classNames from 'clsx' import type { GuildsChannelsPath } from '..' import { useAuthentication } from '../../../tools/authentication' import type { EmojiPickerOnClick } from '../../Emoji' import { EmojiPicker } from '../../Emoji' export interface SendMessageProps { path: GuildsChannelsPath } export const SendMessage: React.FC = (props) => { const { path } = props const { t } = useTranslation() const { authentication } = useAuthentication() const [isVisibleEmojiPicker, setIsVisibleEmojiPicker] = useState(false) const [message, setMessage] = useState('') const textareaReference = useRef(null) const handleTextareaKeyDown: React.KeyboardEventHandler = ( event ) => { if (event.key === 'Enter' && !event.shiftKey) { event.preventDefault() event.currentTarget.dispatchEvent( new Event('submit', { cancelable: true, bubbles: true }) ) } } const handleSubmit: React.FormEventHandler = async ( event ) => { event.preventDefault() if (typeof message === 'string' && message.length > 0) { await authentication.api.post(`/channels/${path.channelId}/messages`, { value: message }) setMessage('') } } const handleTextareaChange: React.ChangeEventHandler = ( event ) => { setMessage(event.target.value) } const handleFileChange: React.ChangeEventHandler = async ( event ) => { const files = event?.target?.files if (files != null && files.length === 1 && files[0] != null) { const file = files[0] const formData = new FormData() formData.append('file', file) await authentication.api.post( `/channels/${path.channelId}/messages/uploads`, formData, { headers: { 'Content-Type': 'multipart/form-data' } } ) } } const handleVisibleEmojiPicker = (): void => { setIsVisibleEmojiPicker((isVisible) => { return !isVisible }) } const handleEmojiPicker: EmojiPickerOnClick = (emoji) => { const emojiColons = emoji.colons ?? '' setMessage((oldMessage) => { return oldMessage + emojiColons }) handleVisibleEmojiPicker() textareaReference.current?.focus() } return (
) }