HW/final_project/src/pages/ChatInfoPage.jsx

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

// 632b86aa55e76f7ddb1eae29

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';
import { actionSearchUser } from '../store/actions/action-search-user';


export const ChatInfoPage = ({ us, onSearchUser, match: { params: { _id } }, chats, getData, userName }) => {
    const [chatList, setChatList] = useState(chats || [])
    const [messageList, setMessageList] = useState([])
    const [chatInfo, setChatInfo] = useState([])
    const [searchUser, setSearchUser] = useState("")
    const [userAdd, setUserAdd] = useState("")

    const SearchUs = ( _id) => {
        
        onSearchUser(searchUser)
        setSearchUser('')
        const stD = store.dispatch(onSearchUser())
        const userId = us
        console.log('1', stD)
        console.log('2', userId)
        console.log(store.getState())
        
    
    }
    

    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])

    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={`${item._id}/info`}> <h3 onClick={() => chatInfoClick(item._id)}>Инфо </h3> </Link>
                                        <Link to={`/chat/${item._id}`}></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'>
                    <h1>Members Add</h1>
                    <input
                        type="text"
                        value={searchUser}
                        onChange={(e) => setSearchUser(e.target.value)}
                        className="form-control"
                        id="exampleInputEmail1"
                        aria-describedby="emailHelp" />
                    <div className="mb-3">
                        <button type="submit" className="btn btn-primary" onClick={SearchUs}>Add</button>
                    </div>

                    <div className="membersChat">
                        <h1> Members: </h1>

                        {chatInfo  /* chatInfo.length > 0 */ &&
                            <ul>{chatInfo.map((item2, index) =>
                                <li key={index}>
                                    <h1><p>{item2.login}</p></h1>
                                </li>

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