Homework/Fakogram REACT project/fakogram/src/pages/MsgPage.js

import React, {useState, useEffect} from "react";
import { connect } from "react-redux";


export const OneChat = ({chats, _id, getData}) => {

    

    const [chatList, setChatList] = useState(chats || []);
    const [messageList, setMessageList] = useState([]);

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

            setChatList(res.chats);
            setMessageList(res.chats?.message);
        }

        getDataFunc();
    }, [_id]);

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

    {console.log(messageList, "messageListmessageListmessageList")}
    return (
        <main className="chatMain">
            {messageList && messageList.length > 0 && (
                <ul className="chatMain">
                    {console.log(messageList, "messageListmessageListmessageList")}
                    {messageList.map((item1, index) => (
                        <li className="msgLi" key={index}>
                            <h3>{item1.text}</h3>
                        </li>
                    ))}
                </ul>
            )}
        </main>
    );
};

export const COneChat = connect(
    (state) => ({
        chats: state.promise.myProfile?.chats,
        // _id: state.auth?.payload?.sub.id,
    }),
)(OneChat);