Chat/src/pages/main.js

import Chat from "../components/chatWindow";
import ChatsList from "../components/chatsList";
import { useEffect } from "react";
import io from 'socket.io-client';
import { connect } from "react-redux";
import { actionAddChat, actionAddChatBack, actionAddMSG, actionAddMSGBack, actionEditChat, actionEditMSG, actionEditMSGback, actionFullEditChat, actionFullGetChats, actionFullGetMessages, actionUploadFile, actionUserSearch } from "../actions";
import ConnectChatForm from "../components/chatForm";
import { ChatEditForm } from "../components/chatEditForm";

//все в куче
const Main = ({ match: { params: { _id } }, userID, chats, getChat, getMessages, addChat, editChat, addMSG, editMSG, editMSGState, sendMSG, search, userSearch, changeChat, addFile }) => {
    let chat_id = _id.split(".")[1]

    useEffect(() => {
        getChat(userID)
        console.log("монтируем")

        const socket = io("ws://chat.fs.a-level.com.ua")

        socket.emit("jwt", localStorage.authToken)

        socket.on("jwt_ok", data => console.log("С JWT все норм", data))

        socket.on("jwt_fail", error => console.log("С JWT траблы", error))

        socket.on("connect", () => {
            // getChat(userID)
            console.log("Законектились, сокет: ", socket.id)
        });

        socket.on("connect_error", error => console.log("ошибка конекта", error));

        socket.on("reconnect_attempt", () => console.log("пробуем реконектнуть"));

        socket.on("disconnect", () => console.log("дисконект", socket.id));

        socket.on('chat', chat => {
            console.log("это пришло по сокету (чат)", chat)
            addChat(chat._id, chat.title, chat.createdAt, chat.lastModified, chat.owner, chat.avatar, chat.messages, chat.members)
        })

        socket.on('msg', msg => {
            console.log("это пришло по сокету (сообщение)", msg)
            addMSG(true, msg.chat._id, msg._id, msg.text, msg.createdAt, msg.owner, msg.media, msg.replyTo)
        })

        return () => {
            console.log("размонтировали")
        }
    }, [])

    useEffect(() => {
        chat_id && getMessages(chat_id, 0)
    }, [_id])

    return (
        <main>
            <ChatsList chats={chats} />
            {_id === "chat" && <ConnectChatForm />}

            {chats[chat_id] &&
                <Chat chat_id={chat_id}
                    chat_title={chats[chat_id].title}
                    chat_avatar={chats[chat_id].avatar?.url}
                    user_id={userID}
                    messages={chats[chat_id].messages || []}
                    onUpload={addFile}
                    onSend={sendMSG}
                    onMSGEdit={editMSG}
                    onScrollTopComplete={getMessages} />}

            {chats[chat_id] && <ChatEditForm chat_id={chat_id}
                chat={chats[chat_id]}
                searchState={search}
                onUserSearch={userSearch}
                onChangeChat={changeChat}
                onUpload={addFile} />}
        </main>
    )
}

export const ConnectMain = connect(state => ({
    userID: state.auth.payload.sub.id,
    search: state.promise?.userSearch?.payload?.data?.UserFind,
    chats: state.chat,
}),
    {
        getChat: actionFullGetChats,
        getMessages: actionFullGetMessages,
        addChat: actionAddChat,
        addMSG: actionAddMSG,
        editMSG: actionEditMSGback,
        editMSGState: actionEditMSG,
        sendMSG: actionAddMSGBack,
        userSearch: actionUserSearch,
        newChat: actionAddChatBack,
        changeChat: actionFullEditChat,
        addFile: actionUploadFile
    })(Main)