Chat/src/components/chatForm.js

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

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

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

    return (
        <div className="user-search-panel">
            <span>Добавьте пользователей</span>
            <input 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}>
                        <span>{m.nick || m.login}</span>
                        {onDeleteMember && <button onClick={() => onDeleteMember(m)}>x</button>}
                    </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">
            <span>Выберите чат или создайте новый</span>
            <input 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 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