12345678910111213141516171819202122232425262728293031323334353637383940414243444546 |
- 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, chat_avatar, user_id, messages, onUpload, onSend }) => {
- let [msg, setMSG] = useState("")
- let [isUpload, setIsUpload] = useState(false)
- let [files, setFiles] = useState([])
- console.log(files)
- let filesHandler = (file) => {
- files.length ? setFiles([...files, file]) : setFiles([file])
- }
- let handler = (e) => {
- if ((e.key === "Enter" && !e.shiftKey) || e.type === "click") {
- onSend(chat_id, msg, files)
- setMSG("")
- 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} modified={message.modified} own={message.owner._id === user_id} />)}
- </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
|