Chat/src/pages/main.js

import { useEffect, useState } from "react";
import io from 'socket.io-client';
import { connect } from "react-redux";
import Chat from "../components/chatWindow";
import ChatsList from "../components/chatsList";
import ConnectChatForm from "../components/chatForm";
import ConnectChatEditForm from "../components/chatEditForm";
import { ConnectProfile } from "../components/profileBar";
import { ChatBar } from "../components/chatBar";
import {
    actionAddChat, actionAddChatBack, actionAddMSG, actionAddMSGBack,
    actionEditMSGback, actionFullGetChats, actionFullGetMessages,
    actionGetUserInfo, actionUploadFile
} from "../actions";
import { Grid, Container, AppBar } from "@mui/material";

const Main = ({ match: { params: { _id } }, userID, chats, isLoad, getUserInfo, getChat, getMessages, addChat, addMSG, editMSG, sendMSG, addFile }) => {
    let [isEdit, setIsEdit] = useState(false)
    let onInfoHandler = () => {
        setIsEdit(!isEdit)
    }

    let chat_id = _id.split(".")[1]

    useEffect(() => {
        getUserInfo(userID)
        getChat(userID)

        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 => {
            addChat(chat._id, chat.title, chat.createdAt, chat.lastModified, chat.owner, chat.avatar, chat.messages, chat.members)
        })

        socket.on('msg', msg => {
            addMSG(true, msg.chat._id, msg._id, msg.text, msg.createdAt, msg.owner, msg.media, msg.replyTo)
        })
    }, [])

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

    return (
        <Grid container spacing={0} sx={{
            width: '100%',
            bgcolor: 'background.paper',
            position: 'relative',
            maxHeight: '95vh',
        }}>
            <Grid container lg="12" sx={{
                display: 'flex',
                alignItems: 'center',
                bgcolor: 'primary.main',
            }}>
                <Grid item lg="3">
                    <ConnectProfile />
                </Grid>
                {chat_id && <Grid item lg="9" >
                    <ChatBar
                        chat_title={chats[chat_id]?.title || ""}
                        onInfo={onInfoHandler} />
                </Grid>}
            </Grid>

            <Grid item lg="3">
                <ChatsList />
            </Grid>
            <Grid item lg={isEdit ? "6" : "9"} sx={{ bgcolor: '#c7deed', }}>
                {chats[chat_id] ?
                    <Chat chat_id={chat_id}
                        user_id={userID}
                        messages={chats[chat_id].messages || []}
                        isLoad={isLoad}
                        onUpload={addFile}
                        onSend={sendMSG}
                        onMSGEdit={editMSG}
                        onScrollTopComplete={getMessages}
                    /> : <ConnectChatForm />}
            </Grid>
            {isEdit && chats[chat_id] && <Grid item lg="3">
                <ConnectChatEditForm chat_id={chat_id} chat={chats[chat_id]} />
            </Grid>}
        </Grid>
    )
}

export const ConnectMain = connect(state => ({
    userID: state.auth.payload.sub.id,
    chats: state.chat,
    isLoad: state.promise?.messages?.status
}),
    {
        getUserInfo: actionGetUserInfo,
        getChat: actionFullGetChats,
        getMessages: actionFullGetMessages,
        addChat: actionAddChat,
        addMSG: actionAddMSG,
        editMSG: actionEditMSGback,
        sendMSG: actionAddMSGBack,
        newChat: actionAddChatBack,
        addFile: actionUploadFile
    })(Main)