HW/final_project/src/pages/OpenChatPage.jsx

import React, { useState, useEffect } from 'react';
import { Link, useParams } from 'react-router-dom';
import io from 'socket.io-client';


import { history } from '../history/';
import '../App.css';
import store from '../store';
import { actionAboutMe } from '../store/actions/action-aboutMe'
import backgroundChat from '../img/back.JPG'
import { useRef } from 'react';


export const OpenChatPage = ({ onCreateMsg, match: { params: { _id } }, chats, getData, userName }) => {
    const [chatList, setChatList] = useState(chats || [])
    const [messageList, setMessageList] = useState([])
    const [chatInfo, setChatInfo] = useState([])
    const [msgAdd, setMsgAdd] = useState("")

    useEffect(() => {
        if (chats) {
            const activeChatId = window.location.pathname.split('/')[2]
            let activeChat = chats.filter((item) => item._id === activeChatId);
            console.log('sadasdasd', activeChat)

            setMessageList(activeChat[0].messages)
        }
    }, [chats])

    useEffect(() => {
        if (chats) {
            const activeChatId = window.location.pathname.split('/')[2]
            let activeChat = chats.filter((item) => item._id === activeChatId);
            console.log('mem', activeChat)

            setChatInfo(activeChat[0].members)
        }
    }, [chats])

    const CreationMsg = () => {
        onCreateMsg(msgAdd)
        setMsgAdd('')
    }


    useEffect(() => {

        async function getDataFunc() {
            const res = await getData(_id)

            setChatList(res.chats)
            setMessageList(res.chats?.message)
            setChatInfo(res.chats?.members)
        }

        getDataFunc()
    }, [_id])

    function handleClick(_id) {
        const filteredChatList = chatList.filter((item) => item._id === _id)
        console.log(filteredChatList)
        setMessageList(filteredChatList[0].messages)
    }

    function chatInfoClick(_id) {
        const filteredChatList = chatList.filter((item) => item._id === _id)
        console.log(filteredChatList)
        setChatInfo(filteredChatList[0].members)
    }


    return (
        <>
            <div className='chatPage'>
                <aside>
                    <div className="row">
                        <div className="col-12">
                            <div id="list-example" className="list-group">
                                <a href="/create-chat" className='linkToCreate'><h1>Создать чат</h1></a>
                                <ul className='chatAside'>{chatList.map((item, index) =>

                                    <a className="list-group-item list-group-item-action">
                                        <Link to={`/chat/${item._id}/info`}> <h3 onClick={() => chatInfoClick(item._id)}>Инфо </h3> </Link>
                                        <Link to={`/chat/${item._id}`}>
                                            <li onClick={() => handleClick(item._id)} className='chatLi' key={index}>
                                                <h3>Chat: {item.title}</h3>
                                                {/* {item.lastMessage ? <h6>Last Message: {item.lastMessage.text}</h6> : []} */}
                                            </li>
                                        </Link>
                                    </a>
                                )}
                                </ul>
                            </div>
                        </div>
                    </div>
                </aside>
                <main className='chatMain'>
                    <div className="mb-3 sendMsg">
                        <input
                            type="text"
                            value={msgAdd}
                            onChange={(e) => setMsgAdd(e.target.value)}
                            className="form-control"
                            id="exampleInputEmail1"
                            aria-describedby="emailHelp" />
                        <button type="submit" className="btn btn-primary" onClick={CreationMsg}>Отправить</button>

                    </div>

                    {messageList && messageList.length > 0 &&

                        <ul className='msgUl'>{messageList.map((item1, index) =>

                            <li className='msgLi' key={index}>
                                <h4><p className='msgOwner'>{item1.owner.login}</p> <p>{item1.text}</p></h4>
                            </li>
                        )}

                        </ul>

                    }
                </main>
            </div>
        </>
    )
}