Chat/src/components/chatEditForm.js

import { Avatar, Button, ButtonGroup, TextField } from "@mui/material"
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)


    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 ? <div>
                <span>Загрузите новый аватар</span>
                <ConnectDropzone maxFiles={1} onSet={setNewAvatar} />
            </div> :
                chat.avatar && <Avatar src={"/" + chat.avatar.url} alt="chatAvatar" sx={{ width: 60, height: 60 }} />}
            {edit ? <TextField
                label="Сменить название чата"
                variant="standard"
                onChange={(e) => setNewTitle(e.target.value)}
                value={newTitle}
                placeholder="Сменить название чата" /> : <span>Название чата: {chat.title}</span>}

            {<MemberList members={newMembers} onDeleteMember={edit && memberDeleteHandler} />}
            {edit && <UserSearch searchState={searchState} onUserSearch={onUserSearch} onAddMember={userAddHandler} />}

            <ButtonGroup size="small">
                <Button variant="outlined" onClick={() => editChatHandler()} >
                    {edit ? "Отменить редактирование" : "Редактировать чат"}
                </Button>

                {edit &&
                    <Button variant="contained" onClick={() => onChangeChat(chat_id, newTitle, newAvatar[0]?._id, newMembers)}>
                        Применить изменения
                    </Button>}
            </ButtonGroup>

        </div>
    )
}

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

export default ConnectChatEditForm