Chat/src/components/chatForm.js

import { Button, Chip, TextField } from "@mui/material";
import { useEffect, useState } from "react";
import { connect } from "react-redux";
import { actionAddChatBack, actionUserSearch } from "../actions"

const UserList = ({ users, onAddMember }) => {
    return (
        <ul className="user-search-list">
            {users.map(user =>
                <li key={user._id} >
                    <Button variant="text" onClick={() => onAddMember(user)}>{user.nick || user.login}</Button>
                </li>)}
        </ul>
    )
}

export const UserSearch = ({ searchState, onUserSearch, onAddMember }) => {
    let [searchInput, setSearchInput] = useState("")
    let [users, setUsers] = useState([])

    useEffect(() => {
        searchInput && setUsers(searchState)
    }, [searchState, searchInput])

    let searchHandler = async (e) => {
        setSearchInput(e.target.value)

        if (e.target.value) {
            onUserSearch(e.target.value)
        } else {
            setUsers([])
        }
    }

    return (
        <div className="user-search-panel">
            <TextField
                label="Найти юзеров..."
                variant="standard"
                onInput={e => searchHandler(e)}
                value={searchInput}
                placeholder="Найти юзеров..." />
            {searchInput && users && users.length > 0 && <UserList users={users} onAddMember={onAddMember} />}
            {searchState && searchInput && users && !users.length && <span>Пользователей с таким именем не существует</span>}
        </div>
    )
}

export const MemberList = ({ members, onDeleteMember }) => {
    return (
        <div className="chat-member-list">
            <h4>Пользователи чата</h4>
            <ul>
                {members.map(m =>
                    <li key={m._id}>
                        {onDeleteMember ? <Chip
                            label={m.nick || m.login}
                            onDelete={() => onDeleteMember(m)}
                        /> : <span>{m.nick || m.login}</span>}
                    </li>
                )}
            </ul>
        </div>
    )
}

const ChatForm = ({ searchState, onUserSearch, onNewChat }) => {
    let [title, setTitle] = useState("")
    let [members, setMembers] = useState([])

    let userAddHandler = (user) => {
        members.length > 0 ? setMembers([...members, user]) : setMembers([user])
    }

    let memberDeleteHandler = (user) => {
        setMembers(members.filter(member => member._id !== user._id))
    }

    return (
        <div className="new-chat">
            <TextField
                label="Название чата"
                variant="standard"
                onInput={e => setTitle(e.target.value)}
                value={title}
                placeholder="Название чата" />
            <UserSearch searchState={searchState} onUserSearch={onUserSearch} onAddMember={userAddHandler} />
            {members && members.length > 0 && <MemberList members={members} onDeleteMember={memberDeleteHandler} />}
            <Button variant="contained" onClick={() => onNewChat(title, members)} disabled={!title || !members.length}>Создать чат</Button>
        </div>
    )
}

const ConnectChatForm = connect(state => ({ searchState: state.promise?.userSearch?.payload?.data?.UserFind }),
    {
        onUserSearch: actionUserSearch,
        onNewChat: actionAddChatBack
    })(ChatForm)

export default ConnectChatForm