import { useEffect, useState } from "react";
import { connect } from "react-redux";
import { actionAddChatBack, actionUserSearch } from "../actions"
const UserList = ({ users, onAddMember }) => {
return (
{users.map(user =>
-
)}
)
}
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 (
Добавьте пользователей
searchHandler(e)} value={searchInput} placeholder="Введите имя пользователя..." />
{searchInput && users && users.length > 0 && }
{searchState && searchInput && users && !users.length && Пользователей с таким именем не существует}
)
}
export const MemberList = ({ members, onDeleteMember }) => {
return (
Пользователи чата
{members.map(m =>
-
{m.nick || m.login}
{onDeleteMember && }
)}
)
}
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 (
Выберите чат или создайте новый
setTitle(e.target.value)} value={title} placeholder="Введите название чата" />
{members && members.length > 0 && }
)
}
const ConnectChatForm = connect(state => ({ searchState: state.promise?.userSearch?.payload?.data?.UserFind }),
{
onUserSearch: actionUserSearch,
onNewChat: actionAddChatBack
})(ChatForm)
export default ConnectChatForm