123456789101112131415161718192021222324252627282930313233343536373839404142434445464748 |
- import { useState } from "react"
- import { Message } from "./message"
- import { MyDropzone } from "./dropzone"
- import ScrollableFeed from 'react-scrollable-feed'
- import { Link } from "react-router-dom"
- const Chat = ({ chat_id, chat_title, user_id, messages, onUpload, onSend, onMSGEdit }) => {
- let [msg, setMSG] = useState("")
- let [isUpload, setIsUpload] = useState(false)
- let [files, setFiles] = useState([])
- let filesHandler = (file) => {
- setFiles(file)
- }
- let handler = (e) => {
- if ((e.key === "Enter" && !e.shiftKey) || e.type === "click") {
- onSend(chat_id, msg, files)
- setMSG("")
- setFiles([])
- setIsUpload(false)
- e.preventDefault()
- }
- }
- return (
- <div className="chat-window" >
- <div className="chat-nav">
- <span>{chat_title}</span>
- </div>
- <ScrollableFeed className="message-list" forceScroll>
- {messages.length > 0 && messages.map(message => <Message key={message._id} id={message._id} nick={message.owner.nick || message.owner.login} msg={message.text} date={message.createdAt} media={message.media} modified={message.modified} own={message.owner._id === user_id} onMSGEdit={onMSGEdit} />)}
- </ScrollableFeed>
- <div className="message-input">
- <textarea placeholder="Введите сообщение..." value={msg} onInput={(e) => setMSG(e.target.value)} onKeyDown={(e) => handler(e)} />
- <button onClick={() => setIsUpload(!isUpload)}>Прикрепить файл</button>
- {isUpload && <MyDropzone onUpload={onUpload} onSet={filesHandler} />}
- <button onClick={(e) => handler(e)}>Отправить</button>
- </div>
- </div >
- )
- }
- export default Chat
|