Chat/src/components/chatEditForm.js

import { useEffect, useState } from "react"
import { connect } from "react-redux"
import { actionFullEditChat, actionUserSearch } from "../actions"
import { MemberList, UserSearch } from "./chatForm"
import { ConnectDropzone } from "./dropzone"

const ChatEditForm = ({ chat_id, chat, searchState, onUserSearch, onChangeChat }) => {
    let [edit, setEdit] = useState(false)
    let [newTitle, setNewTitle] = useState(chat.title || "")
    let [newAvatar, setNewAvatar] = useState([])
    let [newMembers, setNewMembers] = useState(chat.members)

    console.log(newAvatar)
    useEffect(() => {
        setEdit(false)
        setNewTitle(chat.title)
        setNewAvatar([chat.avatar])
        setNewMembers(chat.members)
    }, [chat])

    let editChatHandler = () => {
        setEdit(!edit)
        setNewMembers(chat.members)
    }

    let userAddHandler = (user) => {
        setNewMembers([...newMembers, user])
    }

    let memberDeleteHandler = (user) => {
        setNewMembers(newMembers.filter(member => member._id !== user._id))
    }

    return (
        <div className="chat-edit-form">
            {edit ? <input onChange={(e) => setNewTitle(e.target.value)} value={newTitle} /> : <span>Название чата: {chat.title}</span>}
            {edit ? <div>
                <span>Загрузите новый аватар</span>
                <ConnectDropzone maxFiles={1} onSet={setNewAvatar} />
            </div> :
                chat.avatar && <img src={"/" + chat.avatar.url} alt="chatAvatar" />}

            {<MemberList members={newMembers} onDeleteMember={edit && memberDeleteHandler} />}
            {edit && <UserSearch searchState={searchState} onUserSearch={onUserSearch} onAddMember={userAddHandler} />}
            <div className="edit-btn-container">
                <button onClick={() => editChatHandler()} >{edit ? "Отменить редактирование" : "Редактировать чат"}</button>
                {edit && <button onClick={() => onChangeChat(chat_id, newTitle, newAvatar[0]?._id, newMembers)}>Применить изменения</button>}
            </div>
        </div>
    )
}

const ConnectChatEditForm = connect(state => ({ searchState: state.promise?.userSearch?.payload?.data?.UserFind }),
    {
        onUserSearch: actionUserSearch,
        onChangeChat: actionFullEditChat
    })(ChatEditForm)

export default ConnectChatEditForm