chatWindow.js 1.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748
  1. import { useState } from "react"
  2. import { Message } from "./message"
  3. import { MyDropzone } from "./dropzone"
  4. import ScrollableFeed from 'react-scrollable-feed'
  5. import { Link } from "react-router-dom"
  6. const Chat = ({ chat_id, chat_title, user_id, messages, onUpload, onSend, onMSGEdit }) => {
  7. let [msg, setMSG] = useState("")
  8. let [isUpload, setIsUpload] = useState(false)
  9. let [files, setFiles] = useState([])
  10. let filesHandler = (file) => {
  11. setFiles(file)
  12. }
  13. let handler = (e) => {
  14. if ((e.key === "Enter" && !e.shiftKey) || e.type === "click") {
  15. onSend(chat_id, msg, files)
  16. setMSG("")
  17. setFiles([])
  18. setIsUpload(false)
  19. e.preventDefault()
  20. }
  21. }
  22. return (
  23. <div className="chat-window" >
  24. <div className="chat-nav">
  25. <span>{chat_title}</span>
  26. </div>
  27. <ScrollableFeed className="message-list" forceScroll>
  28. {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} />)}
  29. </ScrollableFeed>
  30. <div className="message-input">
  31. <textarea placeholder="Введите сообщение..." value={msg} onInput={(e) => setMSG(e.target.value)} onKeyDown={(e) => handler(e)} />
  32. <button onClick={() => setIsUpload(!isUpload)}>Прикрепить файл</button>
  33. {isUpload && <MyDropzone onUpload={onUpload} onSet={filesHandler} />}
  34. <button onClick={(e) => handler(e)}>Отправить</button>
  35. </div>
  36. </div >
  37. )
  38. }
  39. export default Chat