123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120 |
- 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 } 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)
|