Chat/src/components/chatWindow.js

import { useEffect, useRef, useState } from "react"
import { Message, ShortMessage } from "./message"
import { MyDropzone } from "./dropzone"

const updateScroll = (el) => {
    el.scrollTop = el.scrollHeight
}

const Chat = ({ chat_id, chat_title, user_id, messages, onUpload, onSend, onMSGEdit, onScrollTopComplete, onInfo }) => {
    let [msg, setMSG] = useState("")
    let [isUpload, setIsUpload] = useState(false)
    let [files, setFiles] = useState([])
    let [isForward, setIsForward] = useState([false, ""])
    let [isReply, setIsReply] = useState([false, ""])
    let [skip, setSkip] = useState(20)
    let [isScroll, setIsScroll] = useState(true)

    let scrollRef = useRef(null)
    let input = useRef(null)

    useEffect(() => {
        if (isScroll) {
            updateScroll(scrollRef.current)
        }
    }, [messages, isScroll])

    useEffect(() => {
        input.current && input.current.focus()
    }, [isReply, isForward])

    let filesHandler = (file) => {
        setFiles(file)
    }

    let buttonScrollHandler = () => {
        setIsScroll(true)
        updateScroll(scrollRef.current)
    }

    let scrollHandler = (el) => {
        setIsScroll(Math.round(el.scrollTop + el.clientHeight) === el.scrollHeight)

        if (el && el.scrollTop === 0) {
            el.scrollTop = el.scrollHeight / 30
            !isScroll && onScrollTopComplete(chat_id, skip)
            setSkip(skip + 20)
        }
    }

    let sendHandler = (e) => {
        if (e.key === "Escape") {
            setIsReply([false, ""])
            setMSG("")
        }

        if ((e.key === "Enter" && !e.shiftKey) || e.type === "click") {
            if (!isReply[0] && !isForward[0]) { //отправить обычное сообщение
                onSend(chat_id, msg, files)
            }

            if (isReply[0]) {
                onSend(chat_id, msg, files, isReply[1]) //ответить на сообщение (isReply[1] - id msg на какое отвечаем)
                setIsReply([false, ""])
            }

            if (isForward[0]) {
                onSend(chat_id, msg, files, false, isForward[1]) //переслать (isForward[1] - id чата куда переслать)
                setIsForward([false, ""])
            }

            setMSG("")
            updateScroll(scrollRef.current)
            setFiles([])
            setIsUpload(false)
            e.preventDefault()
        }
    }

    return (
        <div className="chat-window">
            <div className="chat-nav">
                <span>{chat_title}</span>
                <button onClick={() => onInfo()}>Инфо</button>
            </div>

            <ul ref={scrollRef} onScroll={() => scrollHandler(scrollRef.current)} className="message-list">
                {messages.length > 0 &&
                    messages.map(message => {
                        return <Message key={message._id}
                            id={message._id}
                            nick={message.owner.nick || message.owner.login}
                            msg={message.text}
                            date={message.createdAt}
                            media={message.media}
                            own={message.owner._id === user_id}
                            replyTo={message.replyTo}
                            onMSGEdit={onMSGEdit}
                            onMSGReply={setIsReply}
                            onMSGForward={setIsForward} />
                    })}
            </ul>

            {isReply[0] &&
                messages.filter(message => message._id === isReply[1]).map(m =>
                    <ShortMessage key={m._id} nick={m.owner.nick || m.owner.login}
                        text={m.text}
                        date={m.createdAt} />)}

            {!isScroll && <button className="btn-scroll" onClick={() => buttonScrollHandler()}>Вниз</button>}

            <div className="message-input">
                <textarea ref={input} placeholder="Введите сообщение..." value={msg} onFocus={() => updateScroll(scrollRef.current)} onInput={(e) => setMSG(e.target.value)} onKeyDown={(e) => sendHandler(e)} />
                <button onClick={() => setIsUpload(!isUpload)}>Прикрепить файл</button>
                {isUpload && <MyDropzone onUpload={onUpload} onSet={filesHandler} />}
                <button onClick={(e) => sendHandler(e)}>Отправить</button>
            </div>
        </div >
    )
}

export default Chat